Il pulsante accartocciato

Pulsanti, SVG, TransizioniGSAPImpegnativaPeso compresso: Demo 6,2 KBGSAP 28 KBGratisScarica lo zip

Premuto, il pulsante si accartoccia in una pallina di carta: il bordo si stringe verso il centro a bozzi, compaiono le pieghe e le parole spariscono. Accanto sale un cestino col coperchio aperto, la pallina ci finisce dentro con un arco, il coperchio sbatte e il cestino se ne va; al suo posto Draft deleted e Undo, che ripesca la pallina e la distende di nuovo nel pulsante.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The crumpling button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/red-hat-text@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the crumpling button: pressed, it crumples into a ball of paper, which is thrown into a bin that comes up for
         it; Undo fishes the ball out and smooths it back into the button -->
    <div class="crumple" data-crumple data-autoclic>
      <div class="crumple__spot" data-spot>
        <svg class="crumple__art" aria-hidden="true" data-art></svg>
        <button class="crumple__btn" type="button" data-btn>
          <svg class="crumple__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3"/></svg>
          <span data-label>Delete draft</span>
        </button>
        <div class="crumple__gone" data-gone hidden>
          <span>Draft deleted</span>
          <button class="crumple__undo" type="button" data-undo>Undo</button>
        </div>
      </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.

14 valori da cambiare

Apri il Playground

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 accartocciato» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un pulsante a pillola rosa chiaro con il bordo rosso, il disegno di un cestino e Delete draft. Premendo, la carta si stringe appena e torna con un rimbalzo; al clic il disegno e le parole si rimpiccioliscono e svaniscono, e il bordo della pillola si tira verso il centro tremando un poco, a bozzi, fino a una pallina girata, con la luce in alto a sinistra, l'ombra sul bordo e delle pieghe rosse spezzate. A metà, alla destra del pulsante sale dal basso un cestino grigio scuro e il suo coperchio si alza. La pallina fa un piccolo salto, vola in un arco sopra il cestino facendo un giro su sé stessa e ci cade dentro, dietro il bordo; il coperchio si chiude, il cestino dondola e scende sparendo. Al posto del pulsante restano Draft deleted e il pulsante Undo. Con Undo il cestino risale, la pallina esce dalla bocca, vola indietro al suo posto girando e lì si distende di nuovo nella pillola con un rimbalzo, mentre il disegno e le parole tornano.

Come funziona

Un bordo, due forme

Il bordo della carta è fatto di 64 punti, uno per ogni direzione dal centro: nel pulsante piatto ognuno è dove quel raggio incontra il bordo della pillola (un lato dritto o un'estremità tonda), nella pallina è un raggio di 23 pixel per 1 più ROUGH volte tre onde a fasi casuali e un po' di rumore. Accartocciare è passare dall'uno all'altro (da 0 a 1), con un tremito che è massimo a metà strada.

Luce, ombra e pieghe

Lo stesso contorno si riempie una seconda volta con una sfumatura radiale, bianca in alto a sinistra, trasparente al centro e del colore del bordo al 38% sul margine, la cui opacità è il quadrato dell'accartocciamento; sette linee spezzate di tre tratti ciascuna, dal centro verso fuori, compaiono nella seconda metà. Il caso viene da un generatore con seme fisso, così la carta si accartoccia ogni volta allo stesso modo.

Il cestino

Il cestino è nello stesso SVG, alla destra del pulsante: il fondo, un gruppo per ciò che ci finisce dentro, il davanti con tre righe e il coperchio nel suo gruppo, che gira attorno alla cerniera di sinistra (svgOrigin). Sale da 46 pixel più in basso con back.out e il coperchio si apre di 72 gradi; su uno schermo molto stretto si avvicina al pulsante per restare nella finestra.

Il lancio

Un piccolo salto di 12 pixel, poi una curva di Bézier quadratica fino a 14 pixel sopra la bocca, con il punto di controllo TOSS pixel più su, mentre la pallina fa un giro intero. Alla bocca il suo gruppo passa dentro il cestino, dietro il davanti, e scende 30 pixel sotto la bocca; il coperchio si chiude, il cestino dondola (rotazione a fotogrammi chiave 0, −5, 4, −2, 0) e scende.

Undo, tasti e anteprima

Undo racconta la storia al contrario: il cestino risale, la pallina esce, vola a casa e si distende con elastic.out(1, 0.6). Con i tasti il fuoco passa a Undo quando la bozza è cancellata e torna al pulsante quando ritorna; una regione aria-live dice Deleting the draft, Draft deleted e Draft back. Un clic da script (l'anteprima della libreria) cancella, quello dopo annulla.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`CRUSH`	script.js	`0.55`	I secondi che il pulsante impiega ad accartocciarsi.
`TOSS`	script.js	`90`	Quanto in alto vola la pallina prima di cadere nel cestino, in pixel.
`ROUGH`	script.js	`0.16`	Quanto è bitorzoluta la pallina: quanto il suo bordo va in dentro e in fuori.

Provali nel Playground

Quando usarla

Per cancellare con un gesto che si capisce al volo e che si può annullare: una bozza, una nota, un elemento del carrello, una foto, un messaggio, un file in una lista.

Sul telefono

Il pulsante è di 220 per 56 pixel; sotto i 520 pixel di larghezza si sposta a sinistra quanto serve perché il cestino, che sale alla sua destra, stia nello schermo, e su uno schermo ancora più stretto il cestino gli si avvicina. Il tocco non aspetta il doppio tocco (touch-action manipulation).

Con il movimento ridotto

Niente accartocciamento né lancio: la carta svanisce sul posto in 0,2 secondi, il cestino non compare, e con Undo il pulsante torna subito intero; la pressione non stringe la carta e all'arrivo il pulsante non sale.

Trappole

Le due forme devono avere gli stessi punti nelle stesse direzioni: per questo la pillola si misura per raggi dal centro (dove il raggio incontra un lato o un'estremità tonda) invece di prenderne il contorno così com'è.
Il caso va fermato con un seme: con Math.random la pallina cambierebbe forma a ogni nuova misura della finestra.
La pallina passa dietro il davanti del cestino spostando il suo gruppo dentro quello del cestino (appendChild) al momento giusto, e torna fuori con Undo: disegnata due volte, si vedrebbero due palline.
Il disegno va oltre il pulsante, in su per il lancio e a destra per il cestino: senza quel margine nel viewBox l'arco e il cestino verrebbero tagliati.
Il cestino deve stare nello schermo: su un telefono il pulsante si sposta a sinistra (margin-right in una media query) e la posizione del cestino si calcola dallo spazio che resta davvero a destra.

Librerie

GSAP 3.15.0, Red Hat Text (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,2 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.