Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il numero appeso alla molla
Nello stile minimal: il numero degli iscritti a una newsletter appeso a una molla sottile disegnata a spirale. Un clic o il puntatore lo tirano giù, lasciato rimbalza con fisica vera, la molla si allunga e si stringe, il numero si assottiglia e si allarga nei suoi assi, e a ogni rimbalzo conta un iscritto in più.
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>Sprung</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole page is the button that plucks the spring; the number can also be grabbed and pulled down -->
<main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A subscriber count hanging from a spring. Press to pull it down and let it bounce.">
<svg class="lines" data-lines aria-hidden="true">
<path class="rule" data-rule d="" />
<path class="dim" data-dim d="" />
<path class="coil coil--back" data-back d="" />
<path class="coil" data-front d="" />
<rect class="mount" data-mount x="0" y="0" width="0" height="3" rx="1" />
</svg>
<div class="body" data-body aria-hidden="true">
<span class="rail" data-rail></span>
<div class="count" data-count></div>
<p class="label" data-label></p>
</div>
<p class="hint" data-hint>Pull the number down and let go. Every bounce is one more reader.</p>
<p class="read" data-readout><span class="read__label">Today</span> <b class="read__value" data-today>+0</b></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.
17 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 numero appeso alla molla» da Animorio e adattala al mio sitoCosa fa
Una pagina bianca calda con una riga sottile in alto, il soffitto, che si disegna dal centro verso i lati. Al centro compare un piccolo morsetto e da lì scende una molla sottile, disegnata a spirale come vista un poco dall’alto: il davanti di ogni spira in nero, il dietro in grigio chiaro. In fondo alla molla una riga nera sottilissima, il binario, e sotto le cifre di 12,480 che arrivano dall’alto una dopo l’altra, partendo dal centro, pesanti e poi più leggere; sotto, piccolo, Sprung subscribers. Poi la mano che lo teneva lascia il numero: la molla si allunga sotto il suo peso, rimbalza qualche volta e si ferma. Un clic (o Invio) tira giù il numero, un poco di lato: la molla si allunga e le spire si aprono, il numero si stringe e si alleggerisce nell’asse della larghezza e del peso, come tirato. Lasciato, risale di colpo, la molla si comprime e le spire si toccano quasi, il numero si allarga e ingrassa, poi ricade, e così via sempre meno. A ogni rimbalzo vero il numero conta di uno: la cifra vecchia esce verso l’alto, la nuova arriva da sotto in vermiglio, pesante, si alleggerisce e resta accesa finché non arriva quella dopo. Il soffitto si piega un pelo sotto lo strappo. Col mouse o col dito il numero si prende e si porta giù o di lato, oltre un certo punto la molla si irrigidisce; lasciato, rimbalza e dondola. A sinistra una quota sottile misura la molla, con una tacca dove sta a riposo; in basso a destra Today dice quanti iscritti sono arrivati.
Come funziona
Un pendolo a molla vero
Il numero è un peso solo con posizione e velocità, mosso a passi fissi di un quattrocentottantesimo di secondo dentro gsap.ticker. La molla ha una sua lunghezza naturale e tira lungo la sua direzione con la legge di Hooke, la gravità tira giù e uno smorzamento frena: in tutto tre forze. La rigidità viene dalla frequenza del rimbalzo (in hertz) e la gravità da quanto il peso allunga la molla, così il numero sta fermo sempre allo stesso punto della pagina e il pendolo non entra in risonanza col rimbalzo.
La spirale vista dall’alto
La molla è un’elica ridisegnata a ogni fotogramma lungo la retta fra il morsetto e il binario: per ogni punto un angolo, uno spostamento di lato (il seno) e uno in giù (il coseno, poco: è la spira vista dall’alto). Il raggio cresce piano all’inizio e cala alla fine, così il filo esce dritto dal morsetto. Il coseno dice anche se il pezzo sta davanti o dietro: i pezzi davanti vanno in un tracciato nero, quelli dietro in uno grigio chiaro. Quando la molla si accorcia, il passo si stringe e le spire si avvicinano da sole.
Il carattere sente la tensione
Quanto la molla è allungata rispetto al riposo guida tre cose: l’asse della larghezza (font-stretch), il peso (font-weight) e un poco di scaleY. Il valore non va dritto al numero: passa per una piccola molla sua, più veloce e meno smorzata, così il carattere arriva un attimo dopo e trema appena prima di assestarsi. Allo stesso modo l’angolo del numero segue la molla con un piccolo ritardo, e il soffitto si piega di qualche pixel solo nel disegno.
Contare i rimbalzi
La velocità lungo la molla dice quando il numero arriva in fondo (cambia da positiva a negativa) e quando arriva in cima (da negativa a positiva). In cima si guarda quanto è risalito dall’ultimo fondo: se supera dodici pixel è un rimbalzo vero e il numero sale di uno. Si conta solo dopo un clic o un lancio, non nell’entrata. Le cifre cambiate rotolano da destra a sinistra in una fessura col clip-path: la vecchia esce in su, la nuova entra da sotto con back.out, in vermiglio e con il peso alto; il peso scende subito, il colore resta finché la cifra dopo non la fa tornare nera.
Il clic, la mano e il riposo
Il clic è una timeline GSAP: il numero scende con power2.inOut fino a tre quarti della molla, resta un attimo e viene lasciato da fermo. Trascinando, una molla rigida e ben smorzata porta il numero verso il puntatore, così il lancio ha una velocità vera; oltre la corsa massima la molla cede sempre meno. Quando tutto è quasi fermo, il numero si mette al punto esatto di riposo e il ciclo si addormenta: la pagina torna sempre identica. Con il movimento ridotto niente si muove e il clic cambia la cifra in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 12480 | Il numero da cui parte il contatore. |
LABEL | script.js | 'Sprung subscribers' | La riga piccola sotto il numero (il nome della newsletter e cosa si conta). |
BOUNCE | script.js | 1.4 | Quante volte al secondo rimbalza, in hertz: 0.8 è una molla morbida e lenta, 3 una molla dura e nervosa. |
DAMPING | script.js | 0.09 | Quanto presto si spengono i rimbalzi: 0.03 rimbalza a lungo (e conta tanti iscritti), 0.3 si ferma quasi subito. |
PULL | script.js | 0.75 | Quanto il clic tira giù il numero, in parte della molla a riposo. |
COILS | script.js | 12 | Quante spire ha la molla. |
PER_BOUNCE | script.js | 1 | Di quanto cresce il numero a ogni rimbalzo (0 = non conta). |
--weight | style.css | 560 | Il peso del carattere del numero a riposo, da 100 a 1000. |
--stretch | style.css | 88 | La larghezza del carattere del numero a riposo: tirato si stringe, compresso si allarga. |
Quando usarla
Per un numero che si lascia toccare: gli iscritti di una newsletter o di un canale, i biglietti venduti, i download di un’app, le firme di una petizione. Va bene nella pagina di iscrizione, nella pagina di grazie dopo l’iscrizione, in una landing page o in un pannello di un’app.
Sul telefono
La stessa fisica con le misure adattate: il numero è più grande rispetto allo schermo, la molla più stretta e lunga quanto la stessa parte della pagina. Un tocco tira giù il numero, col dito lo si prende e lo si lancia.
Con il movimento ridotto
Niente si muove: il soffitto, la molla e il numero compaiono in dissolvenza, già al loro posto. Il clic aggiunge un iscritto e la cifra cambia in dissolvenza.
Trappole
- Con le lettere strette (letter-spacing negativo) il 4 e l’8 si toccavano e la virgola si appoggiava al 4: le cifre hanno un poco di spazio in più, e quando il numero si allarga nel rimbalzo restano staccate.
- La cifra vecchia che esce e la nuova che entra si vedevano sovrapposte, una grigia dietro l’altra rossa: ogni cifra sta in una fessura con clip-path e si sposta di una cifra intera, così sparisce oltre il bordo.
- Trascinato di lato e in giù, il numero ruotava e finiva sotto la riga in fondo alla pagina: la corsa massima tiene conto dell’altezza del numero e del margine, e di lato il puntatore lo porta solo fino a un certo punto.
- Senza una soglia, gli ultimi rimbalzi di mezzo pixel avrebbero contato iscritti all’infinito: conta solo una risalita di almeno dodici pixel.
- Un pendolo a molla con la frequenza di oscillazione metà di quella del rimbalzo passa l’energia dal su e giù al dondolio e comincia a girare in tondo: il peso allunga la molla del 42 per cento, e il rapporto fra le due frequenze resta lontano da due.
- Il video della scheda si ferma quando l’immagine resta uguale per un secondo: senza il riposo esatto (il numero messo al punto preciso quando è quasi fermo) un tremito di un decimo di pixel lo avrebbe fatto andare avanti fino al limite.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
