Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il pulsante dello scontrino
Il pulsante è una piccola stampante: premuto, ronza e lo scontrino esce dalla fessura una riga alla volta, a partire dalla cima; alla fine viene strappato con un bordo a denti, fa un piccolo salto e resta lì, inclinato. Premuto di nuovo, il vecchio scontrino vola via e ne esce uno nuovo, con il numero d'ordine dopo.
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 receipt button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/wix-madefor-display@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/victor-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the receipt button: the button is a little printer; pressed, the receipt feeds out of its slot line by line,
then it is torn off with a jagged edge and stays there, leaning -->
<div class="printer" data-printer data-autoclic>
<div class="printer__out">
<div class="paper" data-paper>
<div class="paper__sheet" data-sheet>
<div class="paper__body" data-body>
<p class="r__shop">Corner Café</p>
<p class="r__meta">Table 4, order <span data-order>#0042</span></p>
<div class="r__rule"></div>
<p class="r__row"><span>1 Flat white</span><span>3.40</span></p>
<p class="r__row"><span>1 Croissant</span><span>2.20</span></p>
<p class="r__row"><span>1 Sparkling water</span><span>1.80</span></p>
<div class="r__rule"></div>
<p class="r__row r__total"><span>Total</span><span>€7.40</span></p>
<p class="r__meta">Paid by card</p>
<svg class="r__code" viewBox="0 0 120 26" preserveAspectRatio="none" aria-hidden="true" data-code></svg>
<p class="r__thanks">Thank you, see you soon</p>
</div>
</div>
</div>
</div>
<button class="printer__btn" type="button" data-btn>
<span class="printer__slot" aria-hidden="true"></span>
<span class="printer__face">
<svg class="printer__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z"/></svg>
<span class="printer__label"><span data-label>Print receipt</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.
25 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 dello scontrino» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante grafite con una fessura in alto, il disegno di una stampante e Print receipt. Premendo, il pulsante si stringe appena, la scritta diventa Printing e il pulsante vibra di lato mentre dalla fessura sale uno scontrino bianco, un tratto alla volta con una piccola pausa fra l'uno e l'altro: prima Corner Café, poi Table 4, order #0042, le righe Flat white, Croissant e Sparkling water coi prezzi, il totale €7.40, Paid by card, un codice a barre e Thank you, see you soon. Alla fine lo scontrino dà uno strappo verso il basso, il suo bordo inferiore diventa a denti, e salta su inclinandosi un poco, con un'ombra sotto; la scritta diventa Print again. Premendo ancora, lo scontrino vola via in alto a sinistra girando e svanendo, e ne esce uno nuovo con l'ordine #0043.
Come funziona
Tre scatole per un foglio
Lo scontrino è fatto di tre scatole: quella esterna si sposta, si inclina e porta l'ombra; dentro, il foglio cresce in altezza dal basso, sopra la fessura, e ha il suo clip-path per il bordo a denti; dentro ancora, quello che è stampato è attaccato alla cima del foglio, così la prima riga esce per prima.
Una riga alla volta
L'altezza da raggiungere è quella di ciò che è stampato più 14 pixel. La timeline ha un tween per ogni tratto di 18 pixel, di LINE secondi con power1.inOut, seguito da una pausa vuota di 0,04 secondi: il foglio avanza e si ferma, come in una stampante termica. Intanto un tween infinito avanti e indietro sposta il pulsante di SHAKE pixel ogni 0,045 secondi: il ronzio.
Lo strappo
Alla fine il ronzio si ferma, lo scontrino scende di 5 pixel in 0,07 secondi, il foglio prende un clip-path a poligono con un dente ogni 8 pixel, profondo 5, e salta su di 14 pixel inclinandosi di TILT gradi con back.out(2.4), mentre arriva un'ombra (drop-shadow).
Il prossimo
Premuto di nuovo, lo scontrino vola via (in su di 150 pixel, a sinistra di 50, girando di 16 gradi e svanendo in 0,45 secondi con power2.in), il numero d'ordine sale di uno, scritto sempre a quattro cifre, e il nuovo si stampa da capo: altezza zero, nessun taglio, nessuna inclinazione.
Parole, tasti e anteprima
La scritta del pulsante rotola (esce in alto ed entra dal basso); le pressioni durante la stampa e mentre lo scontrino vola via si ignorano. È un vero button, quindi Invio e Spazio stampano, e una regione aria-live dice Printing the receipt e poi Receipt printed, order #0042. Un clic da script (l'anteprima della libreria) stampa, e a scontrino stampato stampa il successivo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINE | script.js | 0.12 | I secondi che la stampante impiega a far avanzare un tratto di carta. |
SHAKE | script.js | 0.6 | Quanto vibra la stampante mentre stampa, in pixel. |
TILT | script.js | -2.5 | Quanto si inclina lo scontrino strappato, in gradi. |
Quando usarla
Per confermare un ordine o un pagamento in un modo che si ricorda: la cassa di un bar o di un ristorante, un ordine al tavolo, una donazione, la ricevuta di un abbonamento, un biglietto, il riepilogo di una spesa.
Sul telefono
La stampante è larga 280 pixel, o lo schermo meno 48, lo scontrino 212, e lo spazio sopra la stampante resta fisso, così lo scontrino che esce non sposta la pagina; il tocco non aspetta il doppio tocco (touch-action manipulation).
Con il movimento ridotto
Lo scontrino compare intero di colpo, già strappato e inclinato, senza ronzio, senza lo strappo e senza l'ombra; il vecchio sparisce sul posto invece di volare via, le parole del pulsante cambiano senza rotolare e il pulsante non si stringe e non sale all'arrivo.
Trappole
- Il foglio cresce in altezza, non con una scala: con scaleY le lettere si schiaccerebbero. E cresce verso l'alto perché la scatola è attaccata in basso, sopra la fessura.
- Il bordo a denti è un clip-path calcolato sulla misura vera del foglio alla fine della stampa: messo prima, taglierebbe le righe ancora da stampare.
- Il ronzio è un tween infinito (repeat -1): va fermato a mano con kill() e il pulsante rimesso a x 0, o resterebbe spostato di mezzo pixel.
- Lo spazio sopra la stampante è fisso (300 pixel) e lascia passare il puntatore: lo scontrino che esce non spinge giù la pagina e non copre il pulsante.
- Le pressioni durante la stampa e mentre lo scontrino vola via si ignorano: due stampe insieme metterebbero due timeline sullo stesso foglio.
Librerie
GSAP 3.15.0, Wix Madefor Display (font variabile) 5.3.0, Victor Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
