L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il pulsante dello yo-yo
Il Load more di una rivista, con uno yo-yo laccato rosso nella punta tonda della pillola, dove starebbe la freccia. Al clic lo yo-yo viene lanciato: esce dalla pillola srotolando lo spago, dorme in fondo girando su sé stesso mentre le storie arrivano (oltre una certa velocità il disegno sul tappo si sfuma in anelli, come lo vede l'occhio), e quando sono arrivate la pillola dà uno strattone e lo yo-yo risale arrotolando lo spago fino al suo posto. Discesa, sonno e risalita sono la fisica vera di un rocchetto che rotola sul suo filo.
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 yo-yo button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the yo-yo button: the Load more of a magazine, with a lacquered yo-yo in the round right end of the pill, where
the arrow would be. A click throws it: it drops out of the pill unwinding its string, sleeps at the bottom,
spinning, while the stories load, and when they arrive the pill gives a tug and it climbs back into its place -->
<div class="yoyo" data-yoyo>
<div class="yoyo__unit">
<button class="yoyo__btn" type="button" data-btn data-autoclic>
<span class="yoyo__fill" aria-hidden="true"></span>
<span class="yoyo__faces">
<span class="yoyo__face" data-face="rest">
<span class="yoyo__word" data-wide="Load more stories" data-rest-text>Load more stories</span>
</span>
<span class="yoyo__face yoyo__face--two" data-face="busy" aria-hidden="true">
<span class="yoyo__small" data-busy-small>The Sunday Read</span>
<span class="yoyo__big" data-busy-text>Fetching stories</span>
</span>
<span class="yoyo__face yoyo__face--two" data-face="done" aria-hidden="true">
<span class="yoyo__big" data-done-text>12 more stories</span>
<span class="yoyo__small" data-done-small>24 on the page now</span>
</span>
</span>
</button>
<!-- the yo-yo and its string, drawn by script.js; the pointer goes through them to the button -->
<svg class="yoyo__art" viewBox="-50 -40 100 250" aria-hidden="true" data-art></svg>
</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.
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 dello yo-yo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color inchiostro alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto; a sinistra Load more stories in Instrument Sans stretta color crema. Nella punta tonda di destra, al posto della freccia, uno yo-yo laccato rosso largo 42 pixel, appoggiato nel suo incavo: il bordo lucido con un riflesso, una gola scura e il tappo d'avorio con due lame curve stampate in nero. Passando sopra la pillola la scritta si allarga, il fondo si gonfia con un rimbalzo e lo yo-yo scivola fuori di qualche pixel girando un poco, come sotto un pollice. Al clic la pillola dice The Sunday Read e Fetching stories e lo yo-yo cade sotto la pillola srotolando lo spago color panna, sempre più veloce e girando sempre più forte, finché lo spago finisce: lì rimbalza appena e dorme, girando su sé stesso, mentre lo spago vibra e lui dondola un poco; il disegno sul tappo, troppo veloce per l'occhio, diventa una serie di anelli grigi. Quando le storie arrivano la pillola dà uno strattone verso l'alto e lo yo-yo risale lungo lo spago, sempre più piano, fino a rientrare nel suo incavo con un piccolo colpo che fa sobbalzare la pillola, che dice 12 more stories · 24 on the page now. Il clic dopo lo rilancia e il conto sale. Con la tastiera il fuoco mostra un anello rosso e fa scivolare fuori lo yo-yo; Invio o Spazio lo lanciano. Al telefono il tocco lo lancia.
Come funziona
Lo yo-yo in un SVG
Un solo SVG sta sopra la punta destra della pillola e scende sotto di lei (pointer-events: none, così il clic arriva al pulsante); la sua origine è il centro della punta, dove è legato lo spago. Le parti dello yo-yo sono disegnate una volta: il disco laccato con un gradiente radiale, la gola, il tappo d'avorio con le due lame stampate, i riflessi che non girano perché la luce non gira. A ogni fotogramma cambiano solo la posizione dello yo-yo, la rotazione del tappo, l'opacità della sua versione sfumata e il tracciato dello spago.
Un rocchetto che rotola sul suo filo
Lo yo-yo cade con una parte sola della gravità, perché quasi tutta la caduta va nella rotazione: a = g / (1 + I / m r²), e con lo spago avvolto su un perno molto più sottile del disco viene un'accelerazione di 340 pixel al secondo al secondo invece di 2200. La rotazione è la velocità dello spago sul perno: ω = v / r, con r = 2,6 pixel. Il lancio dà una velocità iniziale (THROW); quando lo spago finisce lo yo-yo rimbalza sull'elasticità dello spago e dorme, e la rotazione cala piano (SPIN_LOSS).
La risalita
Allo strattone lo spago morde il perno e la rotazione fa risalire lo yo-yo: la velocità di salita è quella che lo porta in cima con un poco di avanzo, √(2 · a · lunghezza), e rallenta con la stessa accelerazione; intanto la rotazione segue la velocità, ω = v / r. In cima lo yo-yo rientra nel suo incavo con un piccolo colpo, e il fondo della pillola si schiaccia e torna con un elastico.
Il pendolo e lo spago
Lo yo-yo dondola anche, come un pendolo lungo quanto lo spago srotolato: θ'' = −(g / L) sin θ, smorzato; il lancio lo lascia un po' fuori dalla verticale, così mentre dorme oscilla piano. Lo spago è una curva quadratica dal nodo al perno; mentre lo yo-yo dorme il punto di controllo trema con la rotazione. Sopra le 14 rotazioni al secondo il tappo con le lame lascia il posto a un tappo sfumato in anelli grigi, come si vede un oggetto che gira troppo in fretta.
Gli stati
Tre facce sovrapposte larghe quanto le parole (a riposo, mentre carica, aggiunte); la pillola si misura una volta sulla più larga, col numero più alto che può dire. Il pulsante è un button vero con aria-disabled mentre lo yo-yo è fuori, una zona aria-live che dice Fetching stories… e poi 12 more stories. 24 on the page now., e un aria-label che dice cosa fa il clic. Il ciclo intero dura circa 2,3 secondi, meno dei 2,8 fra due clic dell'anteprima: ogni clic carica una pagina.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Load more stories | La scritta a riposo. |
SECTION | script.js | The Sunday Read | La riga piccola mentre le storie arrivano: la sezione da cui vengono. |
LOADING | script.js | Fetching stories | La scritta mentre lo yo-yo dorme; la dice anche la zona aria-live. |
PER_PAGE | script.js | 12 | Quante storie aggiunge ogni clic: la pillola dice il numero e il totale sulla pagina. |
WAIT | script.js | 1.4 | I secondi che le storie impiegano ad arrivare: lo yo-yo dorme nel frattempo. In un sito vero è il tempo della risposta del server. |
HOLD | script.js | 2.2 | I secondi che la pillola dice quante storie sono arrivate prima di tornare a Load more stories. |
DROP | script.js | 118 | Quanto spago c'è, cioè quanto scende lo yo-yo sotto la pillola, in pixel. |
THROW | script.js | 260 | Quanto forte viene lanciato lo yo-yo, in pixel al secondo: più forte, scende prima e gira di più. |
SPIN_LOSS | script.js | 0.3 | Quanto in fretta rallenta lo yo-yo che dorme: 0 gira per sempre. |
Quando usarla
Per il Load more di una rivista, di un blog, di un archivio di articoli, di una galleria di progetti o di un catalogo, e per ogni pulsante che chiede altro al server e aspetta (Refresh, Sync, Fetch). Il pulsante finge il caricamento: in un sito vero il clic chiama la pagina dopo, lo yo-yo dorme finché il server non risponde e risale quando le storie sono nella pagina.
Sul telefono
La pillola è larga circa 250 pixel e lo yo-yo scende di 120 sotto la sua punta destra: a 390 pixel ci sta, con lo spago sempre dentro lo schermo. Il tocco lo lancia; lo yo-yo resta della sua misura.
Con il movimento ridotto
Lo yo-yo non cade e non gira: mentre le storie arrivano si sbiadisce nel suo incavo, e torna pieno quando sono arrivate. Le scritte arrivano in dissolvenza, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena).
Trappole
- Le tre lame stampate sul tappo sembravano una ventola. Ora sono due lame curve che girano nello stesso verso, come la stampa di uno yo-yo.
- Il nodo dello spago disegnato come un anellino chiaro sulla pillola sembrava un pallino. Ora lo spago esce dal centro dell'incavo scuro dove riposa lo yo-yo.
- Il tappo sfumato di quando lo yo-yo gira veloce aveva l'anello scuro stretto e il centro chiaro, e lo yo-yo addormentato sembrava un occhio. Ora l'anello è più largo e più leggero, e il tappo resta color avorio con un velo grigio, come un disegno che gira.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
