Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante del tritadocumenti
Il pulsante Delete file diventa un tritadocumenti: il foglio sopra di lui scende nella fessura ed esce sotto tagliato in strisce, con le righe tagliate davvero; le strisce pendono, si arricciano in fondo, girano mostrando il retro, poi cadono e svaniscono. Undo riavvolge tutto al contrario e il foglio risale intero.
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 shredder delete button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the shredder: the page above is drawn in a canvas; pressed, the button turns into a shredder, the page goes
into its slot and comes out underneath cut into strips (slices of the same drawing) that curl, fall and fade.
Undo plays the whole thing backwards -->
<div class="shred" data-shred data-autoclic>
<canvas class="shred__canvas" aria-hidden="true" data-canvas></canvas>
<div class="shred__sheet" role="img" data-sheet>
<span class="shred__ghost" data-ghost></span>
</div>
<div class="shred__box" data-box>
<button class="shred__btn" type="button" data-btn>
<span class="shred__face shred__face--delete" data-face="delete"></span>
<span class="shred__face shred__face--machine" data-face="machine">
<span class="shred__slot"></span>
<span class="shred__teeth"></span>
<span class="shred__state">
<span data-busy>Shredding</span>
</span>
</span>
<span class="shred__face shred__face--undo" data-face="undo">
<span class="shred__timer" data-timer></span>
</span>
<span class="shred__label" data-label="delete" aria-hidden="true">
<svg class="shred__icon" viewBox="0 0 24 24"><g class="shred__lid"><path d="M4 6.5h16"/><path d="M9.5 6.5V4.25h5V6.5"/></g><path d="M6.2 6.5l.9 13.25h9.8l.9-13.25"/><path d="M10.25 10.5v5.5M13.75 10.5v5.5"/></svg>
<span>Delete file</span>
</span>
<span class="shred__label shred__label--undo" data-label="undo" aria-hidden="true">
<svg class="shred__icon" viewBox="0 0 24 24"><path d="M9 14.5L4.5 10 9 5.5"/><path d="M4.75 10h9.5a5 5 0 0 1 0 10H11"/></svg>
<span>Undo</span>
</span>
</button>
</div>
<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.
33 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 tritadocumenti» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco c'è un foglio bianco con un filo grigio sul bordo e la sua ombra: una fattura senza parole, con le righe del testo disegnate come barrette grigie, le voci con gli importi, il riquadro verde chiaro del totale e una fascia verde in fondo. Sotto, un pulsante rosso con il cestino e Delete file. Col mouse sopra il pulsante il coperchio del cestino si alza e il foglio si piega un poco verso di lui. Cliccando, la scritta scende e sparisce, il pulsante si allarga in un tritadocumenti di grafite con la fessura in alto, le lame in basso e la scritta Shredding; il foglio scivola fino alla fessura e ci entra a passo costante, e sotto escono tredici strisce, ognuna col suo pezzo di foglio e un filo grigio sui due bordi del taglio: le righe sono tagliate a pezzi. Le strisce escono un po' sfalsate, pendono, si arricciano in punta e ruotano mostrando il retro grigio; dalle lame cade un po' di polvere di carta. Quando l'ultimo bordo è passato le strisce si staccano, cadono ondeggiando e svaniscono, dove c'era il foglio resta un contorno tratteggiato e il pulsante torna una pillola scura con Undo e una linea sottile che si accorcia. Cliccando Undo la macchina dice Restoring e tutto torna indietro: le strisce risalgono da dove sono cadute, rientrano nella macchina e il foglio risale intero, poi il pulsante torna rosso. Lasciato stare per cinque secondi, il file se ne va per sempre e al posto del contorno scende il foglio dopo: una lettera, poi una relazione con un grafico a barre.
Come funziona
Il foglio disegnato una volta
Ogni foglio (una fattura, una lettera, una relazione) è disegnato una volta sola in un canvas fuori dallo schermo, con roundRect e i colori presi dalle variabili CSS, alla densità dello schermo: le righe del testo sono barrette arrotondate, la forma delle parole senza le parole. Sullo schermo c'è un solo canvas fisso grande quanto la finestra: sopra la fessura disegna il foglio intero, con un filo sul bordo perché la carta bianca si veda sul fondo bianco, tagliato da un clip all'altezza della fessura mentre entra.
Le strisce sono catene di punti
Ogni striscia è una catena di 51 punti a 5,4 pixel l'uno dall'altro, mossa a mano col metodo di Verlet a passi di 1/120 di secondo: gravità, l'aria che frena, un'oscillazione di lato e tre giri di vincoli che tengono la lunghezza di ogni pezzo. I punti ancora dentro la macchina seguono il foglio dritti in giù; quelli usciti sono liberi. Un secondo vincolo piega ogni giunto verso la punta di CURL radianti: la striscia si arriccia in fondo, e quando si stacca la piega risale lungo tutta la striscia.
Ogni pezzo è una fetta del foglio
Ogni pezzo di striscia si disegna con drawImage dalla sua fetta del canvas del foglio (colonna i, riga j), con una setTransform che mette l'asse lungo il pezzo e schiaccia l'asse di traverso per il coseno della torsione: così le righe del foglio sono tagliate davvero e la striscia sembra girare in 3D. Quando il coseno è negativo si vede il retro (un rettangolo grigio), e un velo scuro cresce col taglio di sbieco. Due fili grigi lungo i bordi di ogni pezzo fanno vedere il taglio sul fondo bianco.
Undo è la registrazione al contrario
A ogni fotogramma del taglio e della caduta lo stato intero (il foglio, ogni punto di ogni striscia con la sua torsione, la polvere) si copia in un Float32Array. Undo non rifà la fisica all'indietro: un tween di GSAP scorre il tempo da fine a zero con power2.inOut in un tempo diviso per REWIND, e il disegno prende il fotogramma interpolato fra i due registrati più vicini.
Il pulsante e i suoi stati
Il pulsante vero ha tre facce sovrapposte (rossa, macchina, Undo) che si scambiano in dissolvenza, mentre GSAP ne cambia larghezza, altezza e raggio. Il tempo per annullare è una timeline di UNDO secondi che accorcia una linea; finita, il file se ne va e si disegna il prossimo. aria-label e una regione aria-live dicono ogni passaggio; Ctrl+Z o Cmd+Z annullano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STRIPS | script.js | 13 | In quante strisce si taglia il foglio. |
FEED | script.js | 1.5 | I secondi che il foglio impiega a passare nella macchina. |
CURL | script.js | 0.2 | Quanto si arriccia la punta di ogni striscia: la piega di ogni giunto vicino alla punta, in radianti. |
TWIST | script.js | 1.5 | Quanto girano le strisce mostrando il retro della carta. |
FALL | script.js | [1100, 3.6] | La caduta delle strisce: la gravità, in pixel al secondo al quadrato, e quanto le frena l'aria. |
UNDO | script.js | 5 | I secondi in cui si può annullare prima che il file se ne vada per sempre. |
REWIND | script.js | 1.7 | Quante volte più veloce del taglio va il riavvolgimento di Undo. |
FILES | script.js | [['Invoice.pdf', '84 KB', 'invoice'], …] | I file da cancellare uno dopo l'altro: nome e peso (li legge chi usa un lettore di schermo) e disegno (invoice, letter o report). |
Quando usarla
Per l'azione che cancella un documento, una bozza, un allegato o una conversazione, dove un gesto un po' teatrale rende chiaro che cosa succede e Undo resta lì per qualche secondo. Meglio su un'azione singola e voluta che in una lista dove si cancella spesso.
Sul telefono
Il foglio e la macchina hanno le stesse misure e stanno in uno schermo da 390 pixel; il canvas segue la densità dello schermo (fino a 2) e le righe tagliate restano nitide. Il tocco fa quello che fa il mouse sopra: il coperchio si alza e il foglio si piega verso il pulsante.
Con il movimento ridotto
Niente taglio e niente caduta: il foglio svanisce in dissolvenza, al suo posto resta il contorno tratteggiato e il pulsante diventa subito Undo; annullando, il foglio ricompare in dissolvenza al suo posto. Il coperchio del cestino non si muove.
Trappole
- Il primo arricciamento piegava tutta la striscia: appena staccate le strisce diventavano anelli e spirali. La piega va solo sugli ultimi giunti mentre pende, e da staccata si allarga piano a tutta la striscia con un angolo piccolo.
- Un'oscillazione di lato diversa per ogni punto (sin del tempo più l'indice) faceva serpeggiare le strisce a S: deve cambiare poco lungo la striscia, così ondeggia tutta insieme come la carta.
- Rifare la fisica all'indietro non torna mai al punto di partenza (lo smorzamento perde l'informazione): Undo funziona solo registrando ogni fotogramma e rileggendolo al contrario.
- Con le facce del pulsante in dissolvenza incrociata, a metà si vedeva il rosso sotto attraverso le due facce mezze trasparenti: la faccia nuova entra sopra a piena opacità e solo dopo se ne va quella vecchia, e anche il rosso sparisce, o il suo bordo resta intorno agli angoli.
- Il passo di tempo è limitato a 1/30 di secondo e diviso in passi da 1/120: dopo una scheda rimasta in secondo piano un salto di tempo spezzava i vincoli e le strisce schizzavano via.
Librerie
GSAP 3.15.0, Onest (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 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.
