Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Il titolo che riempie la colonna
Un titolo giustificato su tre righe, nello stile minimal: ogni riga arriva strettissima e sottile e respira, più larga e più piena, finché riempie la colonna al pixel; poi l’ultima parola si stringe per fare posto alla successiva, e le due si dividono sempre la colonna intera. Puntando una riga, quella si alleggerisce senza uscire dalla misura.
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 headline that fills the column</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>
<main class="stage" data-stage>
<!-- the column: two hairlines mark its edges; the script builds the headline inside, letter by letter, and
stretches every line on the width and weight axes until it fills the column exactly -->
<div class="measure" data-measure>
<i class="guide" data-guide aria-hidden="true"></i>
<i class="guide" data-guide aria-hidden="true"></i>
<h1 class="head" data-head></h1>
<p class="foot" data-foot>
<span class="foot__brand">Kerf Foundry</span>
<span class="foot__axes" aria-hidden="true"><span>wdth <b data-wd>100</b></span><span>wght <b data-wg>800</b></span></span>
</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.
22 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 titolo che riempie la colonna» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio due righe sottilissime si disegnano dall’alto e segnano i bordi di una colonna. Dentro arriva il titolo «Give it room to breathe», una riga alla volta: le lettere spuntano dal centro verso i lati strettissime e con il tratto di un capello, poi la riga respira, si allarga e prende corpo lettera dopo lettera, passa il bordo della colonna di un soffio e ci torna, ferma esattamente da un filo all’altro. Mentre tocca i bordi, due trattini spuntano sui fili all’altezza della riga, con un piccolo rimbalzo. L’ultima riga è rossa e cambia: «breathe» si stringe e si fa sottile contro il bordo sinistro per lasciare entrare «stretch» da destra, che cresce nello spazio liberato; per tutto il cambio le due parole insieme sono larghe esattamente quanto la colonna. Poi arrivano «wander», «settle» e di nuovo «breathe». Sotto il titolo, a destra, i valori degli assi della parola rossa (wdth e wght) contano mentre cambia. Alla fine un respiro scende per il titolo: le righe, una dopo l’altra, diventano leggere e più larghe senza cambiare misura e tornano piene; poi il titolo espira, ogni riga si stringe dai lati e svanisce, i fili si ritirano e tutto ricomincia. Puntando una riga col mouse (o tenendoci il dito sul telefono) la riga fa lo stesso respiro: si alleggerisce e si allarga, sempre dentro la colonna.
Come funziona
Un carattere che si stringe davvero
Roboto Flex ha l’asse della larghezza da 25 a 151 e quello del peso da 100 a 1000, ma la versione «wdth» di Fontsource ha l’asse della grandezza ottica fermo a 14, dove la larghezza cambia appena (una riga stretta è larga l’80% di una larga). Con il file «standard», che tiene l’asse opsz, e «opsz» 144 scritto in font-variation-settings, a larghezza 25 e peso 100 la stessa riga diventa una lamina: un quinto della sua larghezza piena. Ogni lettera è uno span inline-block con i suoi valori, scritti a ogni fotogramma solo se cambiano.
La misura giusta, cercata
La colonna è larga il 56% della finestra (al telefono tutta, meno i margini). La grandezza del carattere si sceglie misurando ogni riga a 100 px: abbastanza grande che ogni riga, alla larghezza massima, arrivi alla colonna; abbastanza piccola che ognuna ci stia alla minima; il più vicino possibile a quella che riempie la colonna a larghezza normale. Poi per ogni riga e ogni parola una ricerca binaria sull’asse wdth (quindici passi, misurando il getBoundingClientRect vero) trova la larghezza che la fa lunga quanto la colonna. Se l’asse non basta, il resto lo fa lo spazio fra le lettere.
Il respiro
Ogni lettera ha due numeri da 0 a 1: b (la larghezza, da SQUEEZE a quella che riempie) e g (il peso, da 100 a WEIGHT). Entrando, il peso arriva prima con power2.out e la larghezza dopo con una molla smorzata scritta come funzione di easing (BOUNCE decide lo smorzamento e la molla finisce esattamente su 1), sfalsate dal centro verso i lati: così la riga passa la colonna di qualche pixel e ci torna. All’uscita il contrario, dai lati verso il centro, con power3.in.
Due parole, una colonna
Per ogni parola dell’ultima riga si misura in anticipo una tabella di 41 larghezze, dalla parola stretta e sottile a quella piena. Durante il cambio un numero p va da 0 a 1 con expo.inOut: la parola vecchia riceve (1 − p) della colonna, la nuova p, meno uno spazio fra le due che si apre e si chiude con un seno. Dalla tabella si ricava, per interpolazione, quanto ognuna deve essere larga e pesante; quando lo spazio è meno della parola più stretta possibile, scaleX la schiaccia del resto. La somma resta sempre la colonna.
Leggera senza uscire
Per ogni riga la larghezza che riempie la colonna si cerca anche a undici pesi fra WEIGHT e il peso leggero (260, o 900 se WEIGHT è leggero): un numero h da 0 a 1 sceglie il peso e la larghezza giusta si interpola fra quelle cercate. Il puntatore sulla riga porta h a 1 con una molla morbida, uscendo torna a 0; al telefono lo fa il dito tenuto sulla riga. Lo stesso numero, mosso dalla timeline con yoyo e sfalsato riga per riga, è il respiro alla fine del giro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINES | script.js | ['Give it', 'room to'] | Le prime righe del titolo: ognuna si allarga finché riempie la colonna. Righe di lunghezza simile respirano meglio. |
WORDS | script.js | ['breathe', 'stretch', 'wander', 'settle'] | Le parole dell’ultima riga, una alla volta: ognuna si stringe per fare posto alla successiva, l’ultima riporta la prima. |
WEIGHT | script.js | 800 | Il peso delle righe piene, da 100 (un capello) a 1000 (nerissimo). |
SQUEEZE | script.js | 25 | La larghezza da cui le lettere partono e a cui tornano, sull’asse wdth: 25 è la più stretta del carattere. |
BOUNCE | script.js | 0.4 | Quanto una riga passa la colonna prima di fermarsi: 0 si ferma secca, 1 rimbalza molto. |
HOLD | script.js | 1.8 | Quanti secondi resta una parola prima che la successiva la stringa via. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se il titolo alla fine espira e ricomincia. Con false resta, dopo il respiro finale. |
Quando usarla
Per il titolo d’apertura di un sito dove la tipografia è la protagonista: una fonderia di caratteri, uno studio grafico, una rivista, un portfolio, la pagina di un evento o di un prodotto con un motto. Funziona con frasi brevi, poche parole per riga di lunghezza simile; l’ultima riga che cambia è buona per dire più cose in poco spazio (servizi, aggettivi, città).
Sul telefono
La stessa animazione: la colonna è larga quanto lo schermo meno i margini e il carattere si rimisura per riempirla. Tenendo il dito su una riga, quella si alleggerisce come col mouse; staccandolo torna piena.
Con il movimento ridotto
Niente si allarga né si muove: i fili e le righe compaiono in dissolvenza già piene, ferme da bordo a bordo; il cambio della parola è una dissolvenza (la vecchia svanisce, la nuova compare al suo posto). Niente respiro finale e niente respiro al passaggio del puntatore; alla fine tutto svanisce e ricomincia.
Trappole
- Con il file «wdth» di Fontsource Roboto Flex quasi non si stringeva: quel file ha la grandezza ottica fissa a 14, dove l’asse della larghezza cambia una riga solo del 20%. Serve il file «standard» con «opsz» 144 scritto a mano: lì la stessa riga va da un quinto alla larghezza piena.
- Anche il peso cambia la larghezza: la larghezza che riempie la colonna va cercata al peso finale, e per il respiro a ogni peso intermedio (undici pesi, e in mezzo si interpola: la riga resta nella colonna entro un paio di pixel).
- La riga non passava mai la colonna, anche con la molla: il peso arrivava dopo la larghezza e il suo aumento copriva il rimbalzo. Con il peso che arriva prima (power2.out, più corto) il rimbalzo della larghezza si vede: qualche pixel oltre i bordi e ritorno.
- Le tween fromTo di una timeline scrivono i loro valori iniziali appena create: costruita la timeline, quelle dell’uscita lasciavano il titolo pieno per un fotogramma. Alla fine della costruzione un reset() rimette tutto vuoto.
- In una fromTo una proprietà scritta solo nei valori di partenza viene ignorata: nella versione per il movimento ridotto i fili restavano invisibili perché scaleY: 1 stava solo nel from. Va scritta in tutti e due.
- Una parola più stretta del suo minimo (nell’attimo in cui entra o esce) non può dare la sua misura con gli assi: lì la parola ha larghezza esplicita e scaleX dal bordo sinistro, quando è già una lamina sottile e lo schiacciamento non si nota.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi opsz, wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 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.
