Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola che cade in riga
Animazione di testo in stile minimal: le lettere di una parola arrivano impilate in colonna su una linea sottile e, dall’alto, una alla volta si sporgono, cadono di lato al loro posto con una molla misurata e prendono peso cadendo. Un clic le rimette in colonna.
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 word that tips into line</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 data-autoclic role="button" tabindex="0" aria-label="Baseline. Click to stack the letters again or to set them back in line.">
<!-- the thin line and the letters: one SVG, built by the script -->
<svg class="scene" data-scene aria-hidden="true">
<g data-world>
<path class="rule" data-rule d="" />
<path class="tick" data-tick-l d="" />
<path class="tick" data-tick-r d="" />
<g data-letters></g>
</g>
</svg>
<h1 class="sr-only" data-word>baseline</h1>
<p class="hint" aria-hidden="true">
<span class="hint__track" data-hint>
<span class="hint__line" data-hint-row>Click to restack</span>
<span class="hint__line" data-hint-col>Click to set the line</span>
</span>
</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.
14 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 parola che cade in riga» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo, vuota. Dal centro si disegna una linea sottile color vermiglio, con due piccole tacche ai capi, e dall’alto cadono una dopo l’altra le lettere della parola «baseline», sottili e leggere: ognuna si posa sulla precedente con un piccolo schiacciamento e la colonna ondeggia appena, finché resta una torre di lettere in piedi sulla linea. Poi la torre si smonta dall’alto: la lettera in cima si sporge oltre lo spigolo di quella sotto, ruotando su un angolo, si stacca e cade di lato in un arco, verso il suo posto nella parola. Cadendo diventa più nera e più piena, atterra su un angolo, si rimette in piano con una molla che oscilla una volta e mezza, si schiaccia di un niente e scivola di un pixel prima di fermarsi; sotto di lei la linea cede come un filo teso e torna dritta, e le lettere vicine ondeggiano con lei. Escono prima le lettere ai due capi, a destra e a sinistra, e la linea si allunga per andarle a prendere; quando il posto di una lettera è dove sta la colonna, la colonna fa un passo di lato. L’ultima lettera, rimasta sola in fondo, scivola al suo posto con la cima che resta un po’ indietro. A parola composta un’onda di peso la percorre da sinistra a destra, le tacche della linea fanno un piccolo cenno e in basso compare «Click to restack». Un clic (o un tocco, o Invio) rimette le lettere in colonna: quella del centro torna scivolando, le altre saltano in arco sopra la torre, perdono peso e ci si posano sopra, mentre la linea ritira i suoi capi; un altro clic le fa ricadere in riga. Col puntatore sopra una lettera in riga, la lettera fa un saltello e la linea sobbalza.
Come funziona
Le misure dell’inchiostro
Ogni lettera è un text di un SVG che ha il viewBox grande quanto la finestra. Su una canvas con lo stesso carattere (Fraunces variabile) measureText dà, per ogni lettera e per i due pesi, dove sta l’inchiostro rispetto al punto di partenza (actualBoundingBoxLeft e Right), quanto sale e quanto scende sotto la linea di base. Il text si sposta dentro il suo gruppo in modo che l’origine del gruppo sia il centro del fondo dell’inchiostro: così le lettere si impilano inchiostro su inchiostro, ruotano su un angolo e stanno sulla linea con le discendenti sotto. La grandezza del carattere è quella che fa stare sia la colonna in altezza sia la parola in larghezza.
L’ordine della caduta
I posti nella riga si misurano con la larghezza dei pezzi di parola (measureText di text.slice(0, i)), quindi tengono anche la crenatura. Le lettere si ordinano per distanza dal centro: le più lontane stanno in cima alla colonna e cadono prima, quella più vicina al centro sta in fondo e alla fine scivola soltanto. Prima di ogni caduta lo script controlla se il posto della lettera tocca la colonna rimasta e, se serve, sposta la colonna di lato quanto basta.
Sporgersi e cadere
La lettera in cima ruota intorno allo spigolo di quella sotto: un tween su un numero solo (l’angolo, power2.in) e in onUpdate la posizione si calcola dal perno con seno e coseno. Poi parte una parabola: x con ease none, y con power2.in, la durata dalla radice dell’altezza diviso la gravità; intanto il peso va da LIGHT a HEAVY. All’arrivo un tween elastic.out porta la rotazione a zero, e una regola sola nel disegno fa il resto: una lettera sulla linea poggia sempre sul suo angolo più basso, quindi oscillando si dondola da un angolo all’altro.
La linea che cede
La linea è un path ridisegnato a ogni fotogramma con un punto ogni cinque pixel. Ogni atterraggio aggiunge un avvallamento a campana (exp di meno x al quadrato) la cui profondità scende con elastic.out; le lettere sulla linea si spostano con lei, così i vicini ondeggiano. I due capi si allungano con expo.out appena prima che arrivi una lettera che sta più in là, e le tacche crescono dai capi. Tutto quello che si muove è un oggetto di numeri animato da GSAP; una funzione sola sul ticker di GSAP li trasforma in transform e font-weight.
Il clic e la regia
Ogni sequenza è una timeline costruita al momento del clic a partire da dove sono davvero le lettere: un clic a metà ferma la timeline e ne parte una nuova, che sa chi è in colonna, chi è in volo e chi è già sulla linea. Le lettere in colonna sono sempre il fondo della pila, quindi rimetterle a posto vuol dire solo aggiungere in cima quelle che mancano. Una camera (una traslazione del gruppo) tiene al centro la colonna o la parola. Con il movimento ridotto le lettere passano da una forma all’altra in dissolvenza, senza spostarsi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'baseline' | La parola: arriva impilata e cade in riga (fino a 14 lettere; gli spazi lasciano solo il posto). |
SPRING | script.js | 1 | Quanto è elastico ogni atterraggio: 0.4 si posa secco, 2 dondola e trema più a lungo. |
LEAN | script.js | 24 | Di quanti gradi una lettera si sporge oltre lo spigolo della colonna prima di staccarsi. |
GAP | script.js | 0.28 | I secondi fra la caduta di una lettera e quella dopo (al ritorno in colonna vanno quasi al doppio della velocità). |
GRAVITY | script.js | 1 | Quanto in fretta cadono le lettere: 2 è un mondo più pesante, 0.5 uno più leggero. |
LIGHT | script.js | 240 | Il peso del carattere nella colonna (da 100 a 900). |
HEAVY | script.js | 560 | Il peso che le lettere prendono cadendo in riga (da 100 a 900). |
Quando usarla
Per un titolo o un marchio che deve arrivare con eleganza e senza rumore: l’apertura del sito di uno studio di grafica o di una fonderia di caratteri, una rivista, un portfolio, una pagina di presentazione in bianco e nero, il caricamento di un marchio fatto di una parola sola.
Sul telefono
La stessa animazione con le misure adattate: il carattere si sceglie perché la parola stia nella larghezza dello schermo, la colonna ci sta di sicuro in altezza e la linea non esce mai dai bordi. Un tocco rimette le lettere in colonna e un altro le fa ricadere.
Con il movimento ridotto
Niente si muove: la parola compare già in riga sulla linea, in dissolvenza. Un clic la fa svanire e al suo posto compare la colonna, e viceversa.
Trappole
- Il centro dell’inchiostro non è il centro della lettera: text-anchor middle centra la larghezza di avanzamento, e le lettere impilate sembravano storte. Si sposta il text di (actualBoundingBoxRight meno actualBoundingBoxLeft) diviso due, misurato per ogni peso, e durante il passaggio fra i due pesi lo spostamento si interpola.
- Il primo onUpdate del tween dello sporgersi arrivava prima che onStart avesse letto la posizione della lettera in colonna, e la lettera partiva da terra: la posizione di partenza si legge al primo dei due che arriva.
- Con le lettere che cadevano dal centro verso l’esterno, quelle vicine al centro atterravano sulla colonna ancora in piedi: si fanno cadere prima le più lontane, e la colonna si sposta di lato quando il posto della lettera che sta per cadere la tocca.
- Una lettera ruotata, con la sola y portata sulla linea, entrava nella linea con l’angolo: nel disegno la y di una lettera a terra si alza di metà larghezza per il seno dell’angolo, così poggia sempre sull’angolo più basso e oscillando si dondola invece di affondare.
- Sul telefono la linea, larga quanto la parola più un margine, usciva dallo schermo: il margine si accorcia quanto serve per restare a 16 pixel dal bordo.
- Tornando in colonna le lettere più alte uscivano dallo schermo, perché la camera saliva più lenta di loro: la camera finisce il suo viaggio prima che arrivino le ultime.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
