Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante del carrellino
Il pulsante Add to cart di un negozio, con un carrellino della spesa di filo cromato nella punta tonda della pillola, disegnato su un canvas a ogni fotogramma: il cestello sta su due piccole molle, le ruote girano davvero con la strada fatta. Col puntatore sopra il carrellino arretra un poco, come preso per il manico. Al clic una scatola cade dall'alto nel cestello, le molle si schiacciano e il cestello oscilla; poi il carrellino fa una corsetta in avanti attraverso le parole, frena in fondo alla pillola alzando le ruote di dietro e torna indietro frenando, e dietro di lui compare Added · 1 in cart. Ogni clic aggiunge una scatola di un altro colore al mucchio.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The little trolley button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the little trolley button: an Add to cart pill with a chrome wire shopping trolley in its round left end. The
basket rides on two coil springs, the wheels turn with the distance rolled. A click drops a boxed product into
the basket, the basket squashes and sways, then the trolley dashes forward through the words and rolls back
braking, and the new words show behind it. Every click adds one more box to the heap -->
<div class="trolley" data-trolley>
<button class="trolley__btn" type="button" data-btn data-autoclic>
<span class="trolley__fill" aria-hidden="true"></span>
<span class="trolley__faces" data-faces>
<span class="trolley__face" data-face="rest">
<span class="trolley__word" data-wide="Add to cart" data-rest-text>Add to cart</span>
<span class="trolley__price" data-price-text>€24</span>
</span>
<span class="trolley__face trolley__face--done" data-face="done" aria-hidden="true">
<svg class="trolley__tick" viewBox="0 0 20 20" aria-hidden="true"><path d="M4.6 10.4l3.5 3.5 7.4-8" pathLength="1" data-tick/></svg>
<span class="trolley__done" data-done-text>Added</span>
<span class="trolley__dot" aria-hidden="true">·</span>
<span class="trolley__count"><span data-count>1</span> <span data-unit-text>in cart</span></span>
<span class="trolley__chip" data-chip>Clear</span>
</span>
</span>
<canvas class="trolley__art" aria-hidden="true" data-art></canvas>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
35 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il pulsante del carrellino» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola verde basilico, alta 60 pixel, con un filo di luce in alto. A destra, in Mona Sans color avorio, Add to cart e il prezzo €24 in una pillolina; nella punta tonda di sinistra, al posto dell'icona, un carrellino della spesa visto di lato e un poco dall'alto, di filo cromato: due pareti di filo (quella lontana più scura), il bordo arrotolato più spesso, il manico con l'impugnatura rossa, un vassoio di filo sotto il cestello, due piccole molle a spirale fra il vassoio e il cestello e quattro ruote nere col mozzo grigio e i raggi. Ogni filo è un tubo cromato: un'ombra scura, il corpo grigio e un filo di luce in cima. Sotto le ruote un'ombra morbida sulla pillola. All'arrivo il carrellino entra da sinistra rotolando e frena al suo posto, ondeggiando sulle molle. Col mouse sopra il pulsante la scritta si allarga, il fondo si gonfia con un rimbalzo e il carrellino arretra di cinque pixel con le ruote che girano all'indietro e il muso che si alza appena, come se una mano avesse preso il manico. Al clic dall'alto cade una scatolina color terracotta con un'etichetta crema: gira un poco in aria, entra nel cestello, rimbalza una volta, le molle si schiacciano e il cestello oscilla e si inclina. Poi il carrellino parte in avanti: accelerando si impenna sulle ruote di dietro e il cestello resta indietro sulle molle, le parole spariscono a mano a mano che il suo muso le raggiunge; in fondo alla pillola frena, si inclina in avanti alzando le ruote di dietro, e torna indietro, frenando di nuovo davanti a casa. Dietro di lui, man mano che si ritira, compaiono le parole nuove: una spunta verde chiaro che si disegna, Added · 1 in cart col numero che sale con un piccolo salto. Ogni clic aggiunge una scatola di un altro colore (Clay, Ink, Sage, Rose, Oat) che si posa sul mucchio, sempre più in alto, finché le ultime spuntano dal bordo; col cestello pieno al posto di Added compare una pillolina Clear, e un clic manda via il carrellino pieno fuori dalla pillola e ne fa entrare uno vuoto da sinistra. Con la tastiera il fuoco mostra un anello verde chiaro, la scritta si allarga e il carrellino arretra come sotto il mouse; Invio o Spazio aggiungono. Al telefono il dito sul pulsante prende il manico e il tocco aggiunge.
Come funziona
Il carrellino su un canvas
Il canvas copre la pillola e i 64 pixel sopra di lei, da dove cadono le scatole, alla densità dello schermo fino a 3. Il carrellino si disegna nelle sue unità (un poco ingrandite, 1,12) a ogni fotogramma in cui qualcosa si muove, in quest'ordine: le ruote e il telaio del lato lontano, la parete lontana e il fondo del cestello, le scatole, la parete vicina col bordo e il manico, poi le molle, il vassoio e le ruote del lato vicino. Così le scatole stanno dentro il cestello, fra le due pareti di filo. Ogni filo è un Path2D tracciato tre volte: scuro e largo, grigio e più stretto, chiaro e sottile spostato verso l'alto, ed ecco un tubo cromato illuminato dall'alto.
Le ruote e il telaio che si inclina
La posizione del carrellino la muovono le animazioni di GSAP; il resto è fisica che risponde. L'angolo delle ruote è la strada fatta diviso il raggio, quindi girano esattamente quanto il carrellino avanza, e all'indietro quando arretra. Velocità e spinta si ricavano a ogni fotogramma dalle differenze della posizione, filtrate e limitate. Il telaio sta su una molla rigida: la spinta lo inclina (TILT), e il perno cambia secondo il verso: accelerando gira intorno alla ruota di dietro e alza il muso, frenando intorno a quella davanti e alza le ruote di dietro. L'ombra sotto si stringe e si schiarisce quando una ruota si alza.
Il cestello sulle molle
Il cestello ha due gradi di libertà, quanto scende sulle molle e quanto si inclina, ognuno su una molla smorzata (SPRING oscillazioni al secondo, DAMPING). La spinta del carrellino lo fa restare indietro e poi oscillare in avanti; le due molle a spirale fra il vassoio e il cestello si ridisegnano a ogni fotogramma fra i loro due capi, e si accorciano e si allungano davvero. Le scatole stanno nel sistema del cestello, quindi oscillano con lui.
Le scatole che cadono
Ogni scatola ha il suo posto nel mucchio (cinque posti, sdraiate e in piedi, una sull'altra) e cade con la gravità (GRAVITY) dall'alto della tela, girando un poco. Quando tocca il suo posto rimbalza perdendo quasi tutta la velocità, e il cestello riceve un colpo proporzionale: scende sulle molle e si inclina dalla parte della scatola. Poi la scatola si assesta sul suo posto con una piccola molla. Ogni scatola prende il suo colore da --box-1 a --box-5 e ha la faccia di sopra più chiara e il fianco più scuro, nella stessa direzione delle pareti del cestello.
Le parole dietro il carrellino
Le parole stanno sotto il canvas, ma il carrellino non le copre mai: hanno una maschera CSS con un bordo sfumato (mask-image, un gradiente lineare) il cui inizio, --cut, lo scrive lo script a ogni fotogramma sul muso del carrellino. Andando avanti le parole spariscono a mano a mano che il muso le raggiunge; in fondo le facce si scambiano di nascosto, e tornando indietro le parole nuove compaiono alle spalle del carrellino. La larghezza della pillola è misurata una volta su tutte le facce (a riposo con la copia larga, Added con un numero a due cifre, e Clear), così non cambia mai.
Gli stati
Il pulsante è un button vero: aria-disabled mentre la scatola cade e il carrellino corre, una zona aria-live dice Adding Linen napkins, Clay, to your cart… e poi Added. 1 in cart., e l'aria-label dice che il clic dopo ne aggiunge un altro, o svuota il carrello quando è pieno. Il giro intero dura circa 2,3 secondi, meno dei 2,8 fra un clic e l'altro dell'anteprima, che così mostra ogni scatola. Quando niente si muove il ciclo non calcola e non disegna più.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Add to cart | La scritta a riposo. Se è troppo lunga per lo spazio, il carattere si rimpicciolisce. |
PRICE | script.js | €24 | Il prezzo, nella sua pillolina accanto alla scritta. |
DONE | script.js | Added | La parola dopo la spunta, quando la scatola è nel cestello. |
UNIT | script.js | in cart | Quello che segue il numero. |
CLEAR | script.js | Clear | La pillolina che compare col cestello pieno: un clic manda via il carrellino pieno e ne porta uno vuoto. |
PRODUCT | script.js | Linen napkins | Il prodotto, per la zona aria-live: in un sito vero è quello della pagina, e l'aggiunta va collegata al tuo carrello. |
VARIANTS | script.js | ['Clay', 'Ink', 'Sage', 'Rose', 'Oat'] | I nomi delle varianti, una per scatola, nell'ordine in cui cadono; i loro colori sono --box-1 … --box-5. |
FULL | script.js | 5 | Quante scatole tiene il cestello prima che compaia Clear, da 1 a 5. |
RUN | script.js | 0.6 | I secondi della corsetta in avanti; il ritorno dura un quarto di più. Più corta, il carrellino si impenna e frena più forte. |
SPRING | script.js | 3.2 | Le oscillazioni al secondo del cestello sulle sue molle: più alto, molle dure e svelte; più basso, un cestello che ondeggia lento. |
DAMPING | script.js | 0.16 | Quanto le molle frenano il cestello: 0,05 oscilla a lungo, 1 si ferma subito. |
TILT | script.js | 1 | Quanto il carrellino si inclina sulle ruote accelerando e frenando, e quanto il cestello resta indietro: 0 resta piatto. |
GRAVITY | script.js | 2400 | Quanto velocemente cadono le scatole, in pixel al secondo al quadrato; più alto, colpi più forti sulle molle. |
Quando usarla
Per il pulsante Aggiungi al carrello di una bottega online, di un negozio di casa, di alimentari o di cose fatte a mano, e per i pulsanti di riordino veloce nelle app di spesa. Il carrellino è il simbolo che tutti riconoscono, qui fatto oggetto: chi aggiunge vede il pezzo entrare e il carrello partire. Va collegato al carrello vero: qui l'aggiunta è simulata.
Sul telefono
La pillola è larga circa 245 pixel: a 390 ci sta con margine, e se la scritta non ci sta il carattere si rimpicciolisce. Il dito sul pulsante prende il manico (il carrellino arretra) e il tocco aggiunge; la corsetta va da un capo all'altro della pillola come al computer.
Con il movimento ridotto
Il carrellino resta fermo al suo posto: niente entrata, niente corsetta, niente inclinazioni, il fondo non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena). Al clic la scatola compare in dissolvenza al suo posto nel mucchio e Added · 1 in cart arriva in dissolvenza; col cestello pieno, Clear fa svanire le scatole.
Trappole
- Il carrellino che corre sopra le parole le copriva per un attimo, e il filo del cestello lascia vedere attraverso. Ora le parole hanno una maschera col bordo sfumato che segue il muso del carrellino: si vede solo quello che sta alla sua destra, e il cambio di scritta avviene quando le parole sono tutte nascoste.
- Ingrandendo il disegno, la costante del muso serviva sia in pixel (per la maschera) sia nelle unità del disegno (per l'angolo del cestello): il cestello si è allungato. Ora l'angolo del cestello è un numero del disegno e il muso è in pixel, già ingrandito.
- Con la pillolina Clear accanto ad Added · 5 in cart la pillola, larga quanto la faccia più lunga, era vuota per metà a riposo. Col cestello pieno Clear prende il posto di Added, e la larghezza si misura su tutte le facce con un numero a due cifre.
- La prima scatola, color salvia su un'etichetta crema, spariva dietro il filo cromato. Le scatole ora sono colorate con l'etichetta crema, e la prima è color terracotta.
- Al ritorno il carrellino faceva un'impennata di quindici gradi: la spinta, ricavata dalle differenze della posizione, ha dei picchi. Ora è filtrata e limitata, e l'inclinazione si ferma a 0,12 radianti.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
