Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
La molla giù per le scale
Una molla giocattolo arcobaleno scende le righe di una piccola pagina come una scala: la cima si solleva e si inarca, le spire si allungano e si ammucchiano sul gradino sotto, vibrano a ogni atterraggio. In fondo cade, rimbalza e si assesta; una gru giocattolo la riprende e la riporta in cima. Il puntatore la spinge, un clic chiama subito la gru.
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>Spring down the stairs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the whole page is the button: a click sends the crane to bring the spring back to the top -->
<button class="catch" type="button" aria-label="Send the crane to bring the spring back to the top" data-catch></button>
<!-- the rows of a little toy shop page: each row is a step of the stairs -->
<ol class="stairs" data-stairs>
<li class="step step--brand"><span class="step__name">Tumble & Twirl</span></li>
<li class="step"><span class="step__name">New in</span><span class="step__note">this week</span></li>
<li class="step"><span class="step__name">Spinning tops</span><span class="step__note">from $4</span></li>
<li class="step"><span class="step__name">Wind-up robots</span><span class="step__note">from $12</span></li>
<li class="step"><span class="step__name">Marbles by the jar</span><span class="step__note">from $6</span></li>
<li class="step"><span class="step__name">Rainbow springs</span><span class="step__note">back in stock</span></li>
<li class="step"><span class="step__name">Paper kites</span><span class="step__note">from $9</span></li>
<li class="step"><span class="step__name">Puzzles and board games</span><span class="step__note">from $15</span></li>
</ol>
<div class="floor" data-floor><span class="floor__text">Free gift wrap on every order</span></div>
<canvas class="spring" aria-hidden="true" data-canvas></canvas>
<p class="hint" data-hint>Click to send the crane. Push the spring with the pointer.</p>
</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.
39 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 molla giù per le scale» da Animorio e adattala al mio sitoCosa fa
La pagina di un negozio di giocattoli inventato, Tumble & Twirl: le righe (il nome del negozio, New in, Spinning tops, Wind-up robots e le altre, con qualche prezzo) sono strisce color pastello una sotto l’altra, ognuna un po’ più larga di quella sopra, così il loro bordo destro fa una scala che scende fino al pavimento scuro in fondo («Free gift wrap on every order»). Le righe entrano da sinistra con un piccolo rimbalzo. Dall’alto scende una gru giocattolo arancione che tiene una molla arcobaleno per la spira di cima: appesa, la molla è allungata, più in alto che in basso, come una vera. La gru la posa sul primo gradino, apre la pinza e risale; la molla si accuccia un attimo e parte. La cima si solleva, si inarca in avanti e atterra sul gradino sotto; le spire passano dall’arco e si ammucchiano davanti mentre il mucchio dietro si accorcia; poi la coda si stacca, si ribalta sopra e la molla è di nuovo tutta in piedi, un gradino più giù, con i colori in ordine rovesciato. A ogni atterraggio le spire vibrano e il gradino si abbassa un poco con un elastico. Dall’ultimo gradino il salto sul pavimento è più lungo: la molla atterra, si schiaccia, rimbalza due volte allungandosi e si assesta tremando. Dopo un momento torna la gru, la prende per la spira di cima, la solleva (prima si stira, poi si stacca da terra), la porta in cima dondolando come un pendolo e la posa: si ricomincia. Il puntatore spinge le spire, che si scostano e tornano al loro posto con un’onda che corre lungo la molla. Un clic manda subito la gru: aspetta che la molla finisca il passo e la riporta in cima.
Come funziona
La pagina è la scala
Le righe sono elementi veri della pagina, posizionati dallo script: la prima è larga quanto il nome del negozio (misurato col suo carattere), ogni riga sotto è più larga di un passo, e il passo dipende dalla larghezza dello schermo e dal numero di gradini. La molla è larga un po’ meno del passo, così sta sul pezzo di riga che resta scoperto. Una funzione dice a che altezza c’è una riga sotto un punto: serve a non far passare le spire attraverso i gradini.
Dove dovrebbero stare le spire
Un passo va da 0 a 1 ed è fatto di tre parti. Nel volo la cima si stacca dal mucchio e segue un arco fino al gradino sotto, girando la direzione da su a giù; nel travaso il mucchio dietro si accorcia e quello davanti cresce, con un numero fisso di spire sull’arco; nel ribaltamento la coda si stacca, passa sopra e si posa in cima al mucchio nuovo. L’arco è una curva cubica fra le due cime dei mucchi, campionata per lunghezza: ogni spira ha un numero (anche con la virgola) e cade nel mucchio dietro, sull’arco o nel mucchio davanti. Dopo ogni passo l’ordine si rovescia, come in una molla vera.
Le molle sotto le molle
Ogni spira insegue il suo posto con una molla smorzata poco (STIFFNESS ne dà la forza) e tira anche le vicine: lo spostamento di una passa alle altre e corre lungo la molla come un’onda. Così la cima resta indietro quando parte, va oltre quando atterra e il mucchio vibra. A ogni atterraggio le spire vicine all’estremità ricevono una spinta all’ingiù, e il gradino si abbassa di qualche pixel con elastic.out. Il puntatore spinge via le spire che tocca, nella direzione in cui si muove.
Il nastro iridescente
La molla è disegnata su una canvas: ogni spira è un’ellisse girata perpendicolare all’asse, prima tutte le metà di dietro (più scure), poi quelle davanti, poi un riflesso corto a sinistra. Il colore va da una tinta all’altra lungo la molla (cinque colori in :root) e, dove la spira è inclinata, schiarisce verso un riflesso perlato: sull’arco la molla cambia colore come un nastro di metallo.
Il pavimento e la gru
La regia è una timeline GSAP per giro: la gru posa la molla, i passi uno dopo l’altro, il rimbalzo sul pavimento (schiacciamento e salto con le tween, poi elastic.out), la pausa, la gru che torna. Appesa, la spira numero r sta a r volte il passo più l’allungamento per 1 − (1 − r/N)²: in cima le spire reggono il peso di tutte le altre e si allargano di più. Finché la molla tocca terra l’allungamento è limitato dal gradino, quindi si stira prima di staccarsi. Mentre la gru viaggia, la molla dondola come un pendolo spinto dall’accelerazione della gru.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
COILS | script.js | 48 | Quante spire ha la molla: con più spire il nastro è più fitto e l’arco più pieno. |
STEPS | script.js | 6 | Quante righe della pagina scende (fino a otto): le righe in più si nascondono. |
STIFFNESS | script.js | 1 | Quanto sono rigide le spire: basso è molle e tremolante, alto è teso e pronto. |
SPEED | script.js | 1 | La velocità di tutto: i passi, il rimbalzo e la gru. 2 è il doppio. |
PUSH | script.js | 1 | Quanto forte il puntatore spinge le spire (0 = non le tocca). |
REST | script.js | 1 | Quanti secondi la molla resta sul pavimento prima che arrivi la gru. |
--coil-1 | style.css | #ff4f81 | Il primo colore dell’arcobaleno della molla (gli altri sono --coil-2 … --coil-5, il riflesso perlato è --sheen). |
--crane | style.css | #ff6a3d | Il colore della pinza della gru. |
Quando usarla
Per il sito di un negozio di giocattoli o di un marchio per bambini, una pagina 404 o «in arrivo» che si fa guardare, un elenco di categorie che diventa un gioco, un caricamento lungo: ovunque una pagina può diventare un piccolo parco giochi.
Sul telefono
La stessa scena con le misure adattate: le righe sono più alte e i passi più stretti, quindi la molla è più piccola e i gradini più ripidi, e il salto finale sul pavimento è più corto in larghezza. Col dito si spingono le spire (la pagina non scorre) e un tocco manda la gru.
Con il movimento ridotto
Niente si muove: le righe e la molla compaiono in dissolvenza, con la molla ferma a metà di un passo, inarcata fra due gradini. Un clic la fa sparire e ricomparire in dissolvenza sul gradino dopo. Niente gru, niente vibrazioni, e il puntatore non la spinge.
Trappole
- Le spire sono numerate dal fondo del mucchio dietro; alla fine di un passo quella che era in fondo è in cima al mucchio nuovo. Senza rovesciare l’ordine a ogni passo, i colori saltavano di colpo da un capo all’altro.
- Con una molla fisica vera (masse e molle libere) la camminata dipende da tutto: dal numero di spire, dall’altezza dei gradini, dal passo. Qui la forma la decide una curva, e la fisica sta sopra, nelle spire che la inseguono: la molla scende sempre e vibra lo stesso.
- L’ultima spira del mucchio, al centro esatto sul gradino, ha il suo posto mezzo passo sopra la riga: il controllo «non passare sotto il gradino» la saltava quando il mucchio era schiacciato dal rimbalzo, e la spinta del puntatore la mandava dentro la riga. Il controllo vale per ogni spira il cui posto è sopra la riga.
- La pinza della gru, se risale lenta, si incrocia con la cima della molla che parte verso l’alto: la gru risale svelta e il primo passo parte poco dopo.
- Il pendolo spinto da tutta l’accelerazione della gru faceva girare la molla di quasi novanta gradi fuori dallo schermo: l’accelerazione conta meno e l’angolo ha un limite.
- Ogni riga è mossa da GSAP sull’asse y per l’abbassamento a ogni atterraggio, mentre la posizione la danno left e top: col transform per tutte e due, l’abbassamento cancellava il posto.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
