Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante della gruccia
Il pulsante Add to bag di un negozio di abiti: sopra la pillola color caffè, su una barra d'acciaio, una camicia di lino azzurro appesa a una gruccia di faggio, e nella punta della pillola una borsa di carta kraft. La camicia è stoffa simulata davvero, punto per punto, con le pieghe che prendono luce: il puntatore ci soffia sopra e lei ondeggia. Al clic la gruccia scivola lungo la barra fino alla borsa, dondola per l'inerzia e la camicia ci va dietro; intanto si piega come in negozio, maniche dietro e coda in su, la gruccia si abbassa e la lascia cadere nella borsa, che cede e rimbalza: Added · Size M, con Undo. Un altro clic la tira fuori, la spiega e la riappende.
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 hanger 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 hanger button: the Add to bag of a clothes shop. Over the pill, on a short steel rail, a small linen shirt
hangs on a wooden hanger; the shirt is simulated cloth (a grid of points held by links) drawn on a canvas with
the light on its folds, and a paper bag stands in the round end of the pill. The pointer blows on the cloth;
a click slides the hanger along the rail, folds the shirt and drops it in the bag; another click hangs it up
again -->
<div class="hang" data-hang>
<canvas class="hang__cloth" aria-hidden="true" data-cloth></canvas>
<button class="hang__btn" type="button" data-btn data-autoclic>
<span class="hang__fill" aria-hidden="true"></span>
<span class="hang__faces">
<span class="hang__face" data-face="rest">
<span class="hang__word" data-wide="Add to bag · €89" data-rest-text>Add to bag · €89</span>
</span>
<span class="hang__face hang__face--busy" data-face="busy" aria-hidden="true">
<span class="hang__shine" data-busy-text>Adding…</span>
</span>
<span class="hang__face hang__face--done" data-face="done" aria-hidden="true">
<span class="hang__done">
<svg class="hang__tick" viewBox="0 0 16 16" aria-hidden="true" data-tick><path d="M3.2 8.6l3 3 6.6-7"/></svg>
<span data-done-text>Added · Size M</span>
</span>
<span class="hang__undo" data-undo-text>Undo</span>
</span>
</span>
</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.
24 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 della gruccia» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color caffè, alta 60 pixel, con la scritta Add to bag · €89 in Mona Sans color avorio e, nella punta tonda di destra, una borsa di carta kraft col bordo ripiegato, le pieghe dei soffietti e due manici di carta ritorta, quello dietro più scuro. Sopra la pillola, su una barra d'acciaio con due ghiere alle estremità, è appesa una gruccia di faggio con le venature e il gancio di filo cromato, e sulla gruccia una camicia di lino azzurro a maniche corte arrotolate: il colletto con le due punte che fanno ombra, l'abbottonatura con cinque bottoni di madreperla, il taschino cucito, l'orlo stondato con le sue impunture e la trama del lino. La camicia non è un disegno fermo: è una griglia di punti in 3D tenuta insieme da legami, appesa per le spalle alla gruccia, e cade in pieghe morbide dal petto in giù; ogni pezzetto è chiaro o scuro secondo come guarda la lampada, con un velo di lucentezza sulle pieghe che le stanno di fronte. All'arrivo la gruccia dondola una volta. Col mouse vicino il puntatore soffia: la stoffa si gonfia e ondeggia, a raffiche che partono da lui, più forte se lo muovi in fretta; sopra la pillola la scritta si allarga e il fondo si gonfia con un rimbalzo. Al clic arriva Adding… con un riflesso che lo attraversa, e la gruccia scivola lungo la barra fino sopra la borsa: partendo resta indietro e la camicia svolazza, frenando va avanti e dondola. Intanto la camicia si piega: le maniche e i fianchi girano dietro, poi la coda sale dietro, e resta un pacchetto col colletto e i bottoni davanti. La gruccia si abbassa sopra la borsa e lo lascia: la camicia piegata cade dentro, la borsa cede sotto il colpo e torna su con un piccolo rimbalzo, e la gruccia vuota risale e dondola. La pillola dice Added · Size M, con una spunta verde che si disegna e una piccola pillola Undo. Un altro clic fa scendere la gruccia, tira fuori la camicia ancora piegata, la riaggancia per le spalle, la spiega e la riporta lungo la barra al suo posto. Con la tastiera il fuoco mostra un anello caffè e un soffio muove la stoffa; Invio o Spazio la mettono nella borsa. Al telefono il dito appoggiato vicino alla camicia soffia e il tocco la mette nella borsa.
Come funziona
La camicia ritagliata da una griglia
La camicia piatta è un contorno (colletto, spalle in discesa, maniche corte, fianchi, coda stondata) e una griglia di 20 per 17 punti ogni 2,8 pixel: si tengono solo le celle che toccano il contorno, circa duecento, e i loro punti. Fra i punti ci sono legami lungo le righe, lungo le colonne e sulle due diagonali di ogni cella (così la stoffa non si allunga e non si storce) e un paio più morbido a due punti di distanza, che resiste alle pieghe secche. La lunghezza a riposo di ogni legame si misura sulla camicia già drappeggiata: qualche piega morbida in profondità dal petto in giù, così appesa e ferma non è mai un foglio piatto.
Verlet, a passi fissi
Ogni punto ha la posizione di adesso e quella di prima: la velocità è la loro differenza, frenata appena dall'aria, e le forze (la gravità, il soffio, le molle della piegatura) si aggiungono per il quadrato del passo. Poi i legami si riportano alla loro lunghezza venti volte per passo, a passi fissi di 1/120 di secondo (fotogramma limitato a 1/30). I punti delle spalle sono fissati alla gruccia e la seguono; i limiti sono vincoli anche loro: la stoffa non scende mai sulle parole della pillola, e nella borsa resta fra le pareti e sopra il fondo.
La luce sulle pieghe
La camicia è dipinta una volta su un canvas fuori dallo schermo, quattro volte più fitto: il lino con la sua trama di fili, le cuciture, il taschino, l'abbottonatura e i bottoni, il colletto con la sua ombra; e una seconda volta solo lino, per il rovescio. A ogni fotogramma la normale di ogni punto (il prodotto vettoriale dei suoi vicini) dà una mappa d'ombra e una di lucentezza grandi quanto la griglia: si stendono sul dipinto, ingrandite con lo smussamento, in moltiplica e in scherma. Poi ogni cella si disegna in due triangoli, ciascuno col suo pezzo di dipinto portato dalla trasformazione affine dai tre punti piatti ai tre punti di adesso, ritagliato un poco più largo perché non si vedano le giunture; le celle sono ordinate per profondità e un triangolo girato mostra il rovescio.
La gruccia è un pendolo
La gruccia scivola lungo la barra con un tween di GSAP; la sua accelerazione si legge a ogni fotogramma (differenze finite, filtrate) e spinge l'angolo della gruccia come quello di un pendolo appeso al gancio: θ'' = −ω0² sin θ − 2ζω0 θ' − SWAY · a / L · cos θ. Partendo resta indietro, frenando va avanti, e la stoffa appesa alle spalle ci va dietro per conto suo, con un ritardo in più in fondo alla coda.
Piegarla e farla cadere
Piegare è una molla per punto verso la sua posizione nella camicia piegata, calcolata dalla posizione piatta: oltre due linee verticali le maniche e i fianchi girano dietro (fino a 0,94 di mezzo giro), poi sotto una linea orizzontale la coda sale dietro. Le pieghe secche resistono meno mentre si piega, e intanto le spalle esterne lasciano la gruccia. Quando la gruccia si abbassa, il pacchetto passa a un telaio che cade per conto suo con la gravità e tocca il fondo della borsa con un rimbalzo; le molle restano, più morbide, e i legami e le pareti lo spiegazzano un poco. La borsa si schiaccia dal fondo e torna su con elastic.out.
Le parole e gli stati
Tre facce sovrapposte, larghe quanto le parole: Add to bag · €89 (con una copia larga invisibile che tiene il posto della scritta che si allarga), Adding… con un riflesso che la attraversa, e Added · Size M con la spunta che si disegna col tratteggio e la piccola Undo. Il pulsante è un button vero: aria-disabled mentre lavora, una zona aria-live dice Adding…, Added · Size M. In your bag. e Removed from your bag., e l'aria-label dice cosa farà il prossimo clic. Il ciclo intero sta nei 2,8 secondi fra due clic dell'anteprima.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Add to bag · €89 | La scritta a riposo, col prezzo. |
BUSY | script.js | Adding… | La scritta mentre la camicia va nella borsa; la dice anche la zona aria-live. |
DONE | script.js | Added · Size M | La scritta con la camicia nella borsa. In un negozio vero qui va la taglia scelta. |
UNDO | script.js | Undo | La piccola pillola a destra: un altro clic riappende la camicia. |
SLIDE | script.js | 1 | I secondi che la gruccia impiega a scivolare lungo la barra: più corto, più strattone e più dondolio. |
SWAY | script.js | 1 | Quanto la gruccia dondola alla partenza e all'arrivo: 0 resta dritta (la stoffa ondeggia lo stesso). |
BLOW | script.js | 1 | Quanto forte soffia il puntatore sulla camicia: 0 per niente, 2 una folata. |
DRAPE | script.js | 1 | Quanto sono profonde le pieghe morbide della camicia appesa e ferma: 0 un foglio liscio. |
Quando usarla
Per il pulsante che mette un capo nel carrello: un negozio di abiti, di lino e di cotone, di camicie su misura, di abbigliamento da lavoro o per bambini, una boutique o un negozio dell'usato. La gruccia sta bene dove il prodotto è uno solo per scheda e la taglia è già scelta. Va collegato al tuo carrello vero: qui l'aggiunta è simulata.
Sul telefono
La pillola è larga 296 pixel e il componente alto 130: a 390 pixel ci sta con margine. Il dito appoggiato vicino alla camicia soffia come il puntatore, e il tocco sulla pillola fa tutto il giro: scivolata, piegatura, borsa. Le misure restano quelle del computer.
Con il movimento ridotto
La camicia sta ferma sulla gruccia col suo drappeggio, il puntatore non soffia, la gruccia non scivola e non dondola, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena). Al clic la camicia svanisce in dissolvenza lasciando la gruccia vuota e Added · Size M arriva in dissolvenza; un altro clic la fa ricomparire allo stesso modo.
Trappole
- Con la gravità vera in scala (una camicia di 44 pixel per 70 centimetri) la scivolata lungo la barra faceva volare la camicia quasi in orizzontale: l'accelerazione era pari alla gravità. Una gravità due volte più forte, una scivolata in sine.inOut e un poco d'aria in più la fanno svolazzare senza perdere la forma.
- Con otto ripetizioni dei legami per passo la stoffa appesa si allungava di un quinto e quasi toccava la pillola. Venti ripetizioni la tengono alla sua misura e costano poco: sono circa mille legami.
- La camicia piegata restava ferma sopra la borsa invece di caderci dentro: il limite che tiene la stoffa sopra le parole della pillola valeva anche sopra la bocca della borsa. Ora vale solo a sinistra della borsa.
- In movimento ridotto la camicia in dissolvenza mostrava una griglia: ogni triangolo, ritagliato un poco più largo, si sovrapponeva al vicino e con la trasparenza le sovrapposizioni si vedevano. Mentre svanisce la camicia si disegna intera su un livello a parte, che poi si posa trasparente.
- Il soffio del puntatore all'inizio spingeva tutta la camicia indietro, e dal davanti sembrava risalire piatta verso la barra. Ora la spinta in profondità è per tre quarti un'onda che va avanti e indietro, e la camicia ondeggia invece di alzarsi.
- Undo toccava Size M: la pillola, larga 272 pixel, non bastava per la spunta, le parole e la piccola pillola. È larga 296.
- Con la scivolata più corta e il dondolio al massimo la gruccia faceva il giro completo sopra la barra, camicia compresa. Il gancio ora la ferma a 0,62 radianti e le toglie la velocità con un piccolo rimbalzo, come un gancio vero contro la barra.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 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.
