Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante del nastro della cassa
Il Checkout di un negozio di alimentari come il nastro della cassa: la pillola è il bancone, lungo il suo bordo corre il nastro di gomma a coste, sopra stanno quattro piccoli prodotti disegnati (una baguette, un vasetto di miele col coperchio a quadretti, una mela, un cartone di latte) e sopra il nastro pende il lettore. Al clic il nastro parte: i prodotti avanzano e sentono la spinta come le cose vere, il latte e il miele si inclinano indietro sulla partenza e in avanti sulla frenata, la mela rotola un poco indietro e recupera. Passando sotto il lettore una linea rossa li attraversa, il lettore lampeggia e il totale sale a ogni prodotto con le cifre che girano su tamburi; alla fine Paid · €18.70. Un altro clic riporta i prodotti all'inizio del nastro, uno dopo l'altro con un saltello.
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 checkout belt 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 checkout belt button: the Checkout of a grocery shop, as the belt at the till. The pill is the counter, and
along its top runs the rubber belt; on it stand four small groceries (a baguette, a jar of honey, an apple, a
carton of milk) and over it hangs the reader. A click starts the belt: the groceries ride along, tipping with
the belt's push as real things do, and pass under the reader, where a red scan line crosses each one; the total
rolls up on its digits with every item, then Paid. Another click puts the groceries back on the belt -->
<div class="till" data-till>
<canvas class="till__art" aria-hidden="true" data-art></canvas>
<button class="till__btn" type="button" data-btn data-autoclic>
<span class="till__faces">
<span class="till__face" data-face="rest">
<span class="till__word" data-label-text>Checkout</span>
<span class="till__items" data-items-text>4 items</span>
</span>
<span class="till__face till__face--sum" data-face="sum" aria-hidden="true">
<span class="till__state">
<svg class="till__tick" viewBox="0 0 16 16" aria-hidden="true" data-tick><path d="M3.2 8.4l3 3 6.6-6.8"/></svg>
<span class="till__says" data-says>
<span class="till__say" data-scan-text>Scanning</span>
<span class="till__say till__say--paid" data-paid-text>Paid</span>
</span>
</span>
<span class="till__dot">·</span>
<span class="till__sum" aria-hidden="true" data-sum></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.
27 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 nastro della cassa» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color grafite, alta 60 pixel, con un'ombra morbida sotto: è il bancone della cassa. Lungo il suo bordo di sopra corre una fascia di gomma nera a coste sottili, con la luce sul filo e l'ombra dove entra nel bancone; vicino alle punte tonde le coste si stringono come girando sul rullo, e sotto la fascia c'è il filo d'acciaio del bancone. Sulla gomma, a sinistra, stanno in fila una baguette dorata coi tagli chiari, un vasetto di miele ambrato con l'etichetta e il coperchio di stoffa rossa a quadretti bianchi, una mela rossa col picciolo e la foglia, un cartone di latte bianco col tetto blu, la fascia blu e una goccia; ognuno ha la sua ombra sul nastro. A destra, su un palo sottile dietro il nastro, pende il lettore: una testa scura con la finestrella di vetro. Nella faccia del bancone, in Mona Sans color avorio, Checkout · 4 items. All'arrivo i prodotti cadono sul nastro uno dopo l'altro con un rimbalzo. Col mouse sopra la pillola il bancone si gonfia con un rimbalzo, la parola si allarga e il nastro fa un piccolo scatto in avanti: i prodotti dondolano. Al clic la scritta diventa Scanning · €0.00, sotto il lettore si accende una linea rossa sottile con un ventaglio di luce, e il nastro parte: le coste scorrono e i prodotti avanzano. Sulla partenza il latte e il miele si inclinano indietro sul loro spigolo, la mela rotola un poco indietro e la baguette scivola appena; sulla frenata si inclinano in avanti e tornano diritti oscillando. Ogni prodotto, passando, è attraversato dalla linea rossa, che sul prodotto si fa più viva; quando il suo centro la passa la finestrella lampeggia e il totale sale: €2.40, €3.60, €15.50, €18.70, ogni cifra su un tamburo che gira sempre in avanti, e la cifra delle decine entra allargandosi quando serve. Fermo il nastro, Scanning lascia il posto a Paid con una spunta verde che si disegna, e la linea si spegne. Un altro clic solleva i prodotti e li riporta all'inizio del nastro in arco, uno dopo l'altro, e ognuno atterra con un piccolo schiacciamento; la scritta torna Checkout · 4 items. Con la tastiera il fuoco mostra un anello, il bancone si gonfia e il nastro fa il suo scatto; Invio o Spazio pagano. Al telefono il tocco schiaccia il bancone e i prodotti ci si abbassano sopra.
Come funziona
Il bancone e il nastro su un canvas
Tutto quello che si muove è disegnato su un canvas più largo del componente di 12 pixel per parte, per il rigonfiamento e l'ombra. La pillola è un rettangolo arrotondato col suo gradiente; dentro, ritagliata dalla pillola, la fascia di gomma con le coste ogni 5,5 pixel, spostate della corsa del nastro modulo il passo. Vicino alle punte la posizione di una costa passa per un seno, x = punta ± r · sin(...), così le coste si stringono come sul rullo. Il rigonfiamento e lo schiacciamento sono due numeri tweenati da GSAP, e i prodotti stanno sempre sul filo di sopra della pillola di quel momento: premendo si abbassano con lei.
La spinta del nastro
La corsa del nastro è un tween power2.inOut di RUN secondi. A ogni fotogramma se ne leggono la velocità e l'accelerazione (differenze finite, filtrate), e l'accelerazione spinge ogni prodotto all'indietro. Il latte e il miele hanno un angolo su una molla smorzata (φ'' = −ω²φ − 2ζωφ' − k·a), e girano intorno allo spigolo di dietro quando si inclinano indietro e a quello davanti quando si inclinano in avanti; la mela e la baguette hanno uno scivolamento sulla loro molla, e la mela ruota di scivolamento diviso raggio, cioè rotola. Passi di 1/240 di secondo; l'inclinazione non va oltre 0,3 radianti.
La linea di scansione
Mentre il nastro corre, sotto il lettore si disegna in modalità lighter un ventaglio di luce rossa che si stringe e sopra una linea di un pixel con la sua ombra luminosa. Su un prodotto che la attraversa si disegna di nuovo, più chiara, per l'altezza del prodotto: la linea sembra posarsi sopra. Quando il centro di un prodotto passa la linea il prodotto è letto: un tween porta il lampo da 1 a 0 (la finestrella e la linea si accendono di più) e il totale sale del suo prezzo.
Le cifre sui tamburi
Il totale ha quattro tamburi (decine, unità, decimi, centesimi), ognuno una colonna con le cifre da 0 a 9 due volte. Un tamburo gira sempre in avanti: da 7 a 2 va a 12, cioè passa per 8, 9, 0, 1, e alla fine si rimette sul 2 del primo giro senza che si veda. I tamburi a destra girano un poco più svelti. Il tamburo delle decine è largo zero finché non serve e si allarga con back.out quando il totale passa i dieci euro.
Il ritorno sul nastro
Al secondo clic ogni prodotto passa su un percorso suo: x dal punto dove sta a quello d'inizio, altezza 4 · h · t · (1 − t), cioè una parabola, e una piccola rotazione (la mela gira di più). Sotto di loro il nastro viene rimesso a zero in un colpo solo, perché finché un prodotto è in volo la sua posizione non dipende dal nastro. Atterrando ognuno si schiaccia e torna su con tre fotogrammi chiave.
Le parole e gli stati
Due facce sovrapposte: a riposo, e Scanning o Paid col totale. La casella di Scanning e Paid prende la larghezza della parola che si vede, così la spunta, la parola e il totale restano vicini. Il pulsante è un button vero, aria-disabled mentre il nastro corre; la zona aria-live dice il totale a ogni prodotto e poi Paid. €18.70., e da pagato l'aria-label dice anche Put the items back. Il nastro corre 2,6 secondi, poco meno dei 2,8 fra un clic e l'altro dell'anteprima: il secondo clic cade nell'attesa e Paid resta in vista un giro intero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Checkout | La parola a riposo; si allarga sotto il puntatore. |
SCANNING | script.js | Scanning | La parola mentre il nastro corre. |
PAID | script.js | Paid | La parola alla fine, con la spunta. |
CURRENCY | script.js | € | Il segno davanti al totale. |
PRICES | script.js | [3.2, 11.9, 1.2, 2.4] | I prezzi della baguette, del miele, della mela e del latte: il totale è la loro somma (sotto i cento euro). |
RUN | script.js | 2.6 | I secondi che il nastro corre. |
TIP | script.js | 1 | Quanto i prodotti si inclinano e rotolano con la spinta del nastro: 0 stanno fermi, 2 ondeggiano molto. |
JOG | script.js | 8 | Di quanti pixel il nastro scatta in avanti sotto il puntatore: 0 resta fermo. |
Quando usarla
Per il pulsante che chiude l'ordine di un supermercato online, di una spesa a domicilio, di una gastronomia o di un mercato di quartiere: il nastro e il totale che sale dicono «sto facendo il conto» meglio di una rotellina. I prodotti si possono ridisegnare con quelli del negozio. Il pagamento qui è simulato: in un sito vero il totale e la conferma arrivano dal tuo server o dal servizio di pagamento.
Sul telefono
Il bancone è largo 330 pixel e si stringe se lo schermo è più stretto: i prodotti, il lettore e la corsa del nastro si ricalcolano sulla larghezza. Il tocco schiaccia il bancone, i prodotti si abbassano con lui, e paga.
Con il movimento ridotto
Il nastro non corre e i prodotti non si inclinano; il bancone non si gonfia e la parola non si allarga. Al clic i prodotti svaniscono all'inizio del nastro e riappaiono già oltre il lettore, e Paid · €18.70 arriva in dissolvenza, senza linea rossa né cifre che girano. Un altro clic li fa svanire e riapparire all'inizio.
Trappole
- Con la spinta calcolata alla buona i prodotti non si muovevano affatto: un tween power2.inOut di 2,6 secondi su 140 pixel accelera solo di circa 80 pixel al secondo al quadrato, e la molla del latte (2,4 oscillazioni al secondo) ne faceva un'inclinazione di un quarto di grado. La forza è stata tarata guardando le foto, e l'inclinazione limitata a 0,3 radianti.
- La mela, rotolando indietro, entrava nel vasetto di miele: lo scivolamento è limitato a 3,5 pixel, meno dello spazio fra i due.
- Paid stava lontano dal totale con un buco in mezzo: Scanning e Paid sono sovrapposti nella stessa cella di una griglia, e la cella era larga quanto la parola più lunga. Ora la casella prende con un tween la larghezza della parola che si vede.
- Con le cifre tabulari di Mona Sans lo zero ha il puntino dentro e €0.00 sembrava scritto con delle Ø: le cifre normali vanno bene, perché ogni tamburo è largo quanto la sua cifra più larga.
- I prodotti alla misura del disegno erano troppo piccoli accanto alla pillola: sono disegnati alla misura di partenza e ingranditi di 1,3 col canvas, e il componente è cresciuto a 108 pixel perché il latte passi sotto il lettore.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
