Gli oggetti senza peso
Fisica, 3D, Hover
NuovaGratis
Torna alla libreria
La trottola
Una trottola di faggio dipinta a mano, lanciata da una cordicella che si srotola: dorme dritta, rallenta, il suo asse comincia a girare in tondo, vaga sul tavolo, oscilla sempre di più, tocca col bordo, rotola e si ferma su un fianco dondolando. Quando gira veloce le fasce dipinte si fondono in cerchi colorati (il turchese e la senape diventano verde). Un clic la rilancia.
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 spinning top</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the wall and the oak table, drawn once in perspective -->
<canvas class="room" aria-hidden="true" data-room></canvas>
<header class="shop">
<p class="shop__name" data-name>Birch & Bobbin <span>wooden toys</span></p>
<h1 class="shop__title" data-title>Tops that hum.</h1>
<p class="shop__line" data-line>Turned from beech, painted by hand. Spin it fast and the stripes melt into rings of colour, even green, which is not painted on.</p>
</header>
<!-- the top, its shadow and the string: a solid of revolution drawn every frame -->
<canvas class="toy" aria-hidden="true" data-toy></canvas>
<div class="meter" data-meter aria-hidden="true">
<span class="meter__value" data-rpm>0</span>
<span class="meter__unit">rpm</span>
</div>
<p class="hint"><span class="hint__pill" data-hint>Click to spin it again</span></p>
<!-- the whole table is the button: a click winds the string and throws the top again -->
<button class="catch" type="button" aria-label="Throw the spinning top again" data-catch data-autoclic></button>
</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.
26 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 «La trottola» da Animorio e adattala al mio sitoCosa fa
La pagina di un negozio di giocattoli di legno inventato, Birch & Bobbin: una parete a righe color crema, un tavolo di quercia visto un po’ dall’alto, il titolo «Tops that hum.» e, in alto a destra, i giri al minuto della trottola. Le lettere del titolo cadono come cubetti di legno e si posano con un elastico. La trottola scende appesa alla sua cordicella, avvolta intorno al cono, dondolando un poco; poi la cordicella viene tirata verso destra, si srotola (si vedono i giri che spariscono e i segni che corrono sul filo) e la trottola cade sulla punta d’acciaio con due saltelli, già lanciata. All’inizio dorme: è dritta, quasi ferma sul posto, e il suo disegno (petali rossi su senape, denti blu, settori turchesi e senape, righe a spirale) si è fuso in cerchi di colore, con un anello verde che sulla trottola non è dipinto. Poi rallenta: i giri al minuto scendono, l’asse si inclina e comincia a girare in tondo, la punta disegna piccoli anelli e la trottola vaga sul tavolo; l’oscillazione cresce, i cerchi si sciolgono e il disegno torna a vedersi, prima a strisce poi fermo. Alla fine il bordo tocca il tavolo con un colpo (le lettere del titolo fanno un saltello), la trottola rimbalza, rotola sul bordo intorno alla punta sempre più piano, dondola avanti e indietro e si ferma su un fianco. Compare la scritta per rilanciarla: un clic la solleva, la porta via dall’alto e la fa scendere di nuovo con la cordicella avvolta, per un altro lancio diverso dal primo.
Come funziona
Una trottola fatta di anelli
La forma è un profilo: una lista di anelli dalla punta al manico, ognuno con la sua altezza e il suo raggio. Girando il profilo su 64 spicchi nasce una griglia di quadrilateri. A ogni fotogramma i vertici si inclinano e si ruotano con l’asse della trottola, si proiettano con una prospettiva leggera e si disegnano sul canvas dal più lontano al più vicino, saltando quelli girati dall’altra parte. La luce è una luce diffusa più un riflesso stretto di vernice, calcolati dalla normale di ogni quadrilatero.
Il disegno che si fonde in cerchi
Il colore di ogni fascia è una funzione dell’angolo intorno all’asse (petali, denti, settori, spirali). Per ogni fascia si preparano le somme progressive del colore, così la media su qualunque arco costa due letture. Ogni quadrilatero prende la media del colore che gli è passato sotto mentre l’otturatore era aperto: da fermo è il disegno, piano diventa una striscia mossa, veloce (oltre un giro per fotogramma) è la media di tutto l’anello. Per questo il turchese e la senape, mescolati dall’occhio, diventano verde.
La cordicella
La cordicella avvolta è un’elica sul cono: i giri si contano da quanto resta da srotolare e si disegnano solo dove la superficie guarda verso di noi. Il pezzo libero va dalla fine dell’elica alla mano, fuori dallo schermo a destra: è una curva che si tende quando parte il tiro, con una tratteggiatura che scorre per far vedere il filo che corre; quando la trottola è partita, la cordicella frusta via e sparisce.
Una timeline per tutta la storia
Il lancio è una timeline GSAP che porta da un valore all’altro velocità di rotazione, inclinazione, velocità di precessione, ampiezza dell’oscillazione e quanto vaga: dorme, rallenta e precessa, oscilla, cade. A ogni fotogramma questi valori diventano angoli: la rotazione e la precessione si sommano nel tempo, l’oscillazione è un seno, e la punta scivola di lato all’inclinazione (piccoli anelli) più una deriva che curva e torna indietro prima del bordo della sua zona.
Cadere, rotolare, dondolare
L’angolo a cui la trottola sta su un fianco si calcola dal profilo: è il primo anello che tocca il tavolo inclinandola. Quando ci arriva c’è un colpo con un rimbalzo, poi la precessione rallenta fino a zero: la trottola rotola sul bordo intorno alla punta e, perché il bordo non strisci, gira su se stessa di quanto vuole il rotolamento (diviso il coseno dell’inclinazione). Il dondolio finale è un tween a fotogrammi chiave sullo stesso angolo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPIN | script.js | 1 | Quanto forte tira la cordicella: la velocità con cui parte la trottola (con meno velocità i cerchi colorati non si formano del tutto). |
SPIN_TIME | script.js | 6 | Quanti secondi gira prima di cadere. |
WOBBLE | script.js | 1 | Quanto si inclina l’asse mentre gira in tondo e quanto oscilla. |
WANDER | script.js | 1 | Quanto vaga sul tavolo. |
SIZE | script.js | 1 | Quanto è grande la trottola. |
BLUR | script.js | 1 | Quanto resta aperto l’otturatore: più alto, il disegno si fonde in cerchi già a velocità più bassa. |
--paint-teal | style.css | #1c8c86 | Il turchese della trottola: insieme alla senape, girando, fa il verde. |
--table | style.css | #c58c55 | Il colore del tavolo di quercia. |
Quando usarla
Per la pagina di un negozio di giocattoli o di un artigiano del legno, una scheda prodotto da toccare, un sito per bambini, una pagina 404 o di attesa che si fa guardare, o per spiegare un po’ di fisica (precessione, mescolanza dei colori) con un gioco.
Sul telefono
La stessa storia con le misure adattate: il testo sta sopra, il tavolo occupa la parte bassa e la trottola è al centro, un po’ più grande rispetto allo schermo; vaga in una zona più stretta, così non esce dai lati. I giri al minuto stanno in basso a destra e un tocco la rilancia.
Con il movimento ridotto
Niente si muove: la trottola è già sulla punta, dritta, con il disegno fuso nei suoi cerchi colorati (l’immagine di quando gira veloce), e la stanza e il titolo compaiono in dissolvenza. Niente lancio, niente cordicella, niente giri al minuto né scritta per rilanciarla.
Trappole
- Disegnare la trottola più volte con un po’ di trasparenza per fare il mosso non funziona: le copie si sommano una sull’altra e i bordi diventano trasparenti. La sagoma di un solido di rotazione non cambia quando gira su se stesso, quindi la geometria si disegna una volta sola e si mescola solo il colore, con le somme progressive di ogni fascia.
- Con un pattern di colori opposti (blu e senape, rosso e verde) la media diventa un grigio sporco: le coppie di ogni fascia sono scelte vicine (rosso su senape fa arancio, blu su crema fa celeste), e una sola coppia, turchese e senape, è lì apposta per fare un verde che non c’è.
- Con un cono dritto dalla punta al bordo, la trottola caduta stava appoggiata su tutto il fianco del cono e non sul bordo: il profilo del cono è incavato (sta sotto la retta dalla punta al bordo), e l’angolo di riposo si calcola cercando il primo anello che tocca.
- Rotolando sul bordo senza girare su se stessa, la trottola sembrava strisciare: perché il punto che tocca il tavolo stia fermo, la rotazione propria deve valere meno la precessione divisa il coseno dell’inclinazione.
- Un fromTo dentro la timeline del rilancio, appena creato, rimetteva subito la trottola in alto, prima che fosse sollevata: i fromTo e il set iniziale hanno immediateRender: false.
- Il video dell’anteprima si ferma quando nessuna animazione GSAP è in programma: tutta la storia, dondolio compreso, è nella timeline, e il disegno a ogni fotogramma legge solo i suoi valori; da ferma l’immagine non cambia più.
- Le lettere del titolo hanno due span: quello fuori lo muove GSAP per l’entrata e per il saltello del colpo, quello dentro ronza mentre la trottola gira. Su un elemento solo un transform cancellava l’altro.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
