L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il biglietto da strappare
Il biglietto di un concerto col suo tagliando: tirando il tagliando la perforazione cede dall'alto, più forte si tira e più in fretta si strappa, e la linguetta strappata si apre attorno al punto in cui la carta tiene ancora, coi bordi sfrangiati. Lasciata a metà resta aperta; strappata fino in fondo vola via dalla mano e cade girando, e sul biglietto arriva il timbro.
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 ticket to tear</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/league-gothic@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/azeret-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the ticket to tear: pulling the stub, the perforation gives way from the top and the stub opens round the
tear; torn off, it flies out of the hand and falls, and the ticket is stamped -->
<section class="entry" aria-label="Concert ticket" data-entry data-autoclic>
<div class="ticket" data-ticket>
<div class="ticket__body" data-body>
<svg class="paper" aria-hidden="true" data-paper-body></svg>
<div class="ticket__main">
<p class="ticket__kind">Open-air concert</p>
<h2 class="ticket__title">Stars over the vineyard</h2>
<dl class="ticket__facts">
<div><dt>Date</dt><dd>Sat 12 July</dd></div>
<div><dt>Doors</dt><dd>21:30</dd></div>
<div><dt>Gate</dt><dd>B</dd></div>
<div><dt>Seat</dt><dd>F 14</dd></div>
</dl>
</div>
<p class="stamp" aria-hidden="true" data-stamp>Admitted</p>
</div>
<!-- the stub in two layers: what still holds, and the flap already torn, which opens round the tear -->
<div class="ticket__stub" data-stub>
<div class="stub__layer" data-rest>
<svg class="paper" aria-hidden="true" data-paper-rest></svg>
<div class="ticket__side">
<p class="ticket__admit">Admit one</p>
<p class="ticket__seat">F14</p>
<svg class="ticket__code" viewBox="0 0 60 22" preserveAspectRatio="none" aria-hidden="true" data-code></svg>
</div>
</div>
<div class="stub__layer" aria-hidden="true" data-flap></div>
</div>
</div>
<div class="entry__row">
<p class="entry__hint" data-hint>Pull the stub to tear it off</p>
<button class="entry__act" type="button" data-act>Tear the stub</button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
24 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 biglietto da strappare» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un biglietto di carta color crema: a sinistra una fascia rosso vino, Open-air concert, STARS OVER THE VINEYARD, data, apertura, ingresso e posto, e un vigneto stampato appena; a destra, oltre una perforazione tratteggiata con due mezzelune alle estremità, il tagliando con Admit one, F14 e un codice a barre. Sotto, una riga e il pulsante Tear the stub. Afferrando il tagliando e tirandolo in fuori o in giù, la carta in cima comincia a cedere: il punto dello strappo scende lungo la perforazione, tanto più in fretta quanto più si tira, i bordi strappati del biglietto e del tagliando sono sfrangiati e la parte già strappata si apre a cuneo attorno a quel punto, mentre quella che tiene resta al suo posto. Lasciando a metà la linguetta torna indietro con un rimbalzo e resta un poco aperta (la carta non si ricuce) e la riga dice Keep pulling to tear it off. Strappato fino in fondo, il tagliando vola via con la velocità della mano, cade girando e sparisce; sul biglietto cala il timbro ADMITTED e il biglietto cede appena sotto il colpo. New ticket fa uscire il biglietto a sinistra e ne fa entrare uno nuovo da destra.
Come funziona
La carta disegnata
Ogni pezzo ha la sua carta in un SVG dietro alle parole: un tracciato con gli angoli tondi, le mezzelune della perforazione e il bordo dello strappo, ricostruito a ogni fotogramma, con un'ombra feDropShadow che segue la forma vera. Il bordo strappato ha un dente ogni 5 pixel, gli stessi denti per il biglietto e per il tagliando, così i due bordi combaciano.
Il tagliando in due strati
Il tagliando c'è due volte: lo strato di sotto mostra solo quello che tiene ancora (clip-path inset tagliato sotto lo strappo) e resta fermo, lo strato di sopra mostra solo la linguetta strappata e ruota attorno al punto dello strappo (transform-origin su quel punto). Così si apre solo la parte strappata, come carta che si piega.
Il tiro e lo strappo
Il tiro è quanto la mano ha girato attorno al punto dello strappo, in gradi, più quanto si è allontanata verso destra. Oltre HOLD gradi la carta cede: il punto dello strappo scende di RATE pixel al secondo per ogni grado in più, calcolato sul ticker di GSAP finché la mano tiene. La linguetta si apre fino a OPEN gradi; oltre cede appena. Lasciata a metà, un tween con elastic.out la riporta a pendere aperta.
Il volo e il timbro
Strappato fino in fondo, la rotazione attorno al punto dello strappo diventa uno spostamento più una rotazione attorno al centro, così il tagliando può volare libero: parte con la velocità della mano, cade con la gravità FALL, gira e svanisce. Il timbro arriva grande e storto e si posa in un lampo (power4.in), e il biglietto cede di 3 pixel e torna con un rimbalzo.
Il pulsante, i tasti e l'anteprima
Tear the stub fa un tiro finto: lo stesso strappo, mosso da un numero invece che dalla mano; poi diventa New ticket. Un clic da script (l'anteprima della libreria) è una mano finta che strappa a metà e lascia, poi strappa del tutto, poi prende un biglietto nuovo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HOLD | script.js | 8 | I gradi di cui il tagliando va tirato prima che la carta cominci a cedere. |
RATE | script.js | 9 | Quanto in fretta si strappa la carta: pixel al secondo per ogni grado tirato oltre HOLD. |
OPEN | script.js | 30 | I gradi di cui la linguetta strappata si può aprire. |
FALL | script.js | 1600 | La gravità sul tagliando strappato, in pixel al secondo ogni secondo. |
Quando usarla
Per la conferma di una prenotazione o di un acquisto, la pagina di un evento, un buono da usare, un invito, il biglietto di un museo o di una visita in cantina: ovunque un gesto deve dire «usato».
Sul telefono
Il dito tira il tagliando senza far scorrere la pagina (touch-action none sul tagliando); sotto i 520 pixel i dati vanno su due colonne e il timbro si fa più piccolo, e il pulsante resta per chi preferisce toccare.
Con il movimento ridotto
La mano strappa ancora la carta, ma la linguetta lasciata pende senza dondolare; strappato, il tagliando svanisce dov'è invece di cadere, il timbro c'è senza colpo, il biglietto nuovo arriva subito e il pulsante strappa in un attimo.
Trappole
- Un tagliando rigido girato attorno al punto dello strappo fa scivolare dentro il biglietto la parte ancora attaccata: servono due strati, tagliati sopra e sotto lo strappo, e gira solo la linguetta.
- clip-path taglia anche le ombre: con gli inset negativi (inset(t -30px -40px -30px)) l'ombra può uscire ai lati e in fondo.
- box-shadow e drop-shadow non seguono un bordo strappato disegnato: la carta è un tracciato SVG con feDropShadow, rifatto a ogni fotogramma.
- Cambiare transform-origin a un elemento ruotato lo sposta: allo strappo la rotazione attorno al punto dello strappo va trasformata in spostamento più rotazione attorno al centro, prima di farlo volare.
- Il tiro finto finisce con un delayedCall: se il tagliando si stacca prima, va annullato, o il pulsante resta bloccato fino alla sua scadenza.
Librerie
GSAP 3.15.0, League Gothic (font variabile) 5.3.0, Azeret Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 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.
