L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il pulsante con la cerniera
Un download che apre il suo stesso pulsante: le parole fanno spazio, lungo il mezzo compaiono i denti di una cerniera e il cursore corre da sinistra a destra con l'avanzamento; dietro di lui i due lati della stoffa si separano sulla fodera arancio, con la percentuale che viaggia nell'apertura, e la linguetta dondola a ogni partenza e fermata. Alla fine i lati cadono aperti sul file salvato, e un clic o un momento richiudono tutto.
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 zipper button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/parkinsans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the zipper button: a download that unzips the button as the file comes in; the pull runs along with the
progress and swings as it starts and stops, and at the end the two sides fall open on the saved file -->
<div class="zip" data-zip data-autoclic>
<button class="zip__btn" type="button" aria-label="Download .zip, 2.4 MB" data-btn>
<svg class="zip__art" aria-hidden="true" data-art></svg>
<span class="zip__label" aria-hidden="true">
<span class="zip__name" data-part>Download .zip</span>
<span class="zip__size" data-part>2.4 MB</span>
</span>
<span class="zip__done" aria-hidden="true" data-done>
<svg class="zip__check" viewBox="0 0 24 24"><path d="M5 12.6l4.3 4.3L19 7.2" pathLength="1" data-check/></svg>
<span class="zip__saved">
<span class="zip__saved-name">Saved to Downloads</span>
<span class="zip__saved-file">animorio.zip</span>
</span>
</span>
</button>
<p class="zip__hint"><span data-hint>14 files, ready to unzip</span></p>
<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.
20 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 con la cerniera» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un pulsante a pillola di stoffa indaco con le cuciture tratteggiate lungo il bordo; a sinistra il cursore d'ottone di una cerniera, con la sua linguetta che pende, e la scritta Download .zip con 2.4 MB; sotto, la riga 14 files, ready to unzip. Col mouse che arriva la linguetta dondola. Cliccando, le parole scivolano via a destra, lungo il mezzo del pulsante compaiono da sinistra i denti d'ottone e il cursore parte verso destra a strappi, come arrivano i pezzi di un file: dietro di lui i due lati della stoffa, ognuno col suo nastro e i suoi denti, si separano a cuneo e sotto si vede la fodera arancio, con la percentuale bianca che lo segue nell'apertura. La linguetta dondola a ogni partenza e a ogni fermata. Arrivato in fondo, i due lati cadono aperti verso l'alto e verso il basso e svaniscono, il cursore sparisce e sulla fodera compaiono una spunta che si disegna, Saved to Downloads e animorio.zip; la riga dice Click to zip it back. Dopo un momento, o con un clic, i lati tornano, il cursore corre indietro a sinistra richiudendo la cerniera, i denti si nascondono e le parole tornano. Cliccando durante il download si richiude subito e la riga dice Download cancelled.
Come funziona
La stoffa ridisegnata
Il pulsante è un SVG ridisegnato a ogni fotogramma da pochi numeri che GSAP fa scorrere (dove sta il cursore, quanto può aprirsi la cerniera, quanto si vedono i denti, quanto sono caduti i lati). Ogni lato è un tracciato: il bordo esterno della pillola, preso fitto attorno alle estremità tonde e ogni 6 pixel in mezzo, poi il bordo della cerniera; la stoffa è un pattern a righe diagonali, e le cuciture corrono a 6 pixel dal bordo.
Il cuneo dietro al cursore
A ogni x, ogni lato si allontana dal mezzo di GAP/2 per smoothstep((cursore − x) / SPREAD): subito dietro al cursore i denti cominciano a staccarsi, SPREAD pixel più indietro sono del tutto aperti, davanti al cursore restano chiusi. I denti, uno ogni 4,6 pixel, sono a turno del lato di sopra e di quello di sotto, e chiusi stanno uno fra l'altro.
Il download a strappi
L'avanzamento finto è una timeline di sei tratti che insieme durano SPEED secondi, ognuno con sine.inOut: il cursore riparte e si ferma come i pezzi di un file che arrivano. La percentuale sta SPREAD + 6 pixel dietro al cursore, dove l'apertura è piena, ed è tagliata dalla forma del pulsante.
La linguetta a pendolo
La linguetta è un pendolo: a ogni fotogramma la sua accelerazione è una molla che la riporta giù, uno smorzamento e la spinta dell'accelerazione del cursore (misurata dalla differenza fra due velocità) per SWING. Così dondola quando il cursore parte e quando si ferma, e quando il mouse arriva sul pulsante.
Fine, richiusura e anteprima
Alla fine i due lati si allontanano di 0,85 volte l'altezza con power3.in e svaniscono sulla fodera, dove la spunta si disegna con stroke-dashoffset. Richiudendo, lo stesso cuneo segue il cursore che torna indietro. Un clic da script (l'anteprima della libreria) scarica e, a file salvato, richiude; non annulla mai a metà.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEED | script.js | 2.6 | I secondi del download finto. |
GAP | script.js | 24 | Di quanto si separano i due lati della cerniera, in pixel. |
SPREAD | script.js | 70 | In quanti pixel dietro al cursore la cerniera si apre del tutto. |
SWING | script.js | 1 | Quanto dondola la linguetta quando il cursore parte e si ferma. |
DONE | script.js | 2.2 | I secondi in cui il pulsante dice Saved prima di richiudersi da solo. |
Quando usarla
Per il pulsante che scarica un archivio, un listino, un kit per la stampa o i file di un progetto: dove l'attesa del download può diventare un piccolo spettacolo, e dove una cerniera c'entra davvero (abbigliamento, borse, viaggi).
Sul telefono
Il pulsante è largo 320 pixel, o lo schermo meno 48, e la cerniera si ridisegna sulla misura vera a ogni cambio di dimensione; al tocco si stringe appena come col mouse, e la linguetta dondola per il mouse che arriva, non per il dito.
Con il movimento ridotto
Il download si vede lo stesso, col cursore che va avanti diritto senza strappi e la percentuale; le parole spariscono senza scivolare, la linguetta non dondola, alla fine il file salvato c'è subito senza la caduta dei lati, e la richiusura è immediata.
Trappole
- A riposo il tratto a sinistra del cursore è comunque dietro di lui: senza un valore che tiene chiusa la cerniera (open a 0) si vedeva uno spicchio di fodera vicino al bordo.
- Un'opacità data nel CSS si perde quando GSAP riporta l'elemento a opacity 1: la scritta 2.4 MB è tenue per il colore (color-mix), non per l'opacità.
- La percentuale deve restare dentro la pillola: ha un clip-path con la forma del pulsante, o all'inizio, quando sta ancora a sinistra del bordo, si vedrebbe fuori.
- I colori del disegno vengono dal CSS (fill e stop-color nelle classi, con le variabili): scritti come attributi dallo script non seguirebbero le variabili cambiate dal vivo.
- La velocità del cursore si misura fra un fotogramma e l'altro: il passo va limitato a 1/30 di secondo, o dopo una scheda rimasta in secondo piano un salto di tempo darebbe alla linguetta una spinta enorme.
Librerie
GSAP 3.15.0, Parkinsans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
