Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Le barre che diventano cifre
Scorri dentro l’anteprima
Il bilancio di uno studio in tre numeri enormi, uno alla volta: ogni numero arriva come una barra rossa sottile che si allunga fino alla sua misura, si spezza in un pezzo per cifra e ogni pezzo sale lungo la sua cifra come una tendina, disegnandola. Stile minimal.
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>Bars that fold into figures</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the year of a made-up architecture studio in three figures, one at a time. Each figure arrives as a thin bar that
grows along a line to its measure, breaks into one piece per digit, and every piece rises up its digit like a
blind, drawing it; then the digits gain weight and the label slides out beside them -->
<main>
<section class="apertura">
<p class="piccolo">Norrow, annual report</p>
<h1 class="titolo">Our year,<br>measured.</h1>
<p class="piccolo piccolo--tenue">Three figures. Scroll.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Norrow</p>
<p class="piccolo piccolo--tenue">Annual report 2025</p>
</header>
<div class="scena" data-scena>
<div class="cifre">
<figure class="cifra" data-cifra>
<p class="cifra__numero" data-numero>148</p>
<figcaption class="cifra__dida">
<span class="cifra__riga"><span class="cifra__nome" data-scivola>Projects delivered</span></span>
<span class="cifra__riga"><span class="cifra__nota" data-scivola>Up from 112 the year before</span></span>
</figcaption>
</figure>
<figure class="cifra" data-cifra>
<p class="cifra__numero" data-numero>23</p>
<figcaption class="cifra__dida">
<span class="cifra__riga"><span class="cifra__nome" data-scivola>Countries we built in</span></span>
<span class="cifra__riga"><span class="cifra__nota" data-scivola>Six of them for the first time</span></span>
</figcaption>
</figure>
<figure class="cifra" data-cifra>
<p class="cifra__numero" data-numero>96%</p>
<figcaption class="cifra__dida">
<span class="cifra__riga"><span class="cifra__nome" data-scivola>Clients who came back</span></span>
<span class="cifra__riga"><span class="cifra__nota" data-scivola>And most of them brought a friend</span></span>
</figcaption>
</figure>
</div>
<div class="linea" data-linea aria-hidden="true">
<i class="tacca" data-tacca></i><i class="tacca" data-tacca></i><i class="tacca" data-tacca></i><i class="tacca" data-tacca></i><i class="tacca" data-tacca></i>
</div>
<div class="pezzi" data-pezzi aria-hidden="true"></div>
</div>
<nav class="voci" aria-label="The three figures">
<span class="voce" data-voce>Projects</span>
<span class="voce" data-voce>Countries</span>
<span class="voce" data-voce>Clients</span>
</nav>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Thank you for<br>building with us.</h2>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.
34 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 «Le barre che diventano cifre» da Animorio e adattala al mio sitoCosa fa
Il resoconto dell’anno di uno studio di architettura inventato, Norrow, su un bianco caldo con l’inchiostro nero e un solo rosso. Lo schermo si ferma e prima una riga sottilissima si disegna da un lato all’altro, con cinque tacche che cadono una dopo l’altra. Poi, per ogni numero, una barra rossa di due pixel cresce lungo la riga fino alla sua misura, con il conteggio che corre sulla punta. Arrivata, la barra si spezza in tanti pezzi quante sono le cifre, e sulla riga resta una tacca rossa dove era arrivata. I pezzi volano ai piedi delle loro cifre stringendosi alla loro larghezza, uno dopo l’altro, e salgono: sotto ogni pezzo compare la cifra, sottile come la barra, come quando si alza una tendina. In cima il pezzo va un poco oltre, torna giù sulla cifra e si chiude nel nulla. Allora le cifre prendono peso con un rimbalzo elastico e l’etichetta esce da dietro il numero. Prima del numero dopo, l’etichetta rientra e le cifre scendono dietro la riga. In basso i nomi dei tre numeri si accendono a turno. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Le cifre e la loro copia
Lo script divide ogni numero in un elemento per cifra e ne fa una copia invisibile, sempre sottile (peso THIN), nello stesso posto. Le misure si prendono sulla copia: così non cambiano mentre le cifre vere prendono peso. In fondo alla copia c’è un elemento alto zero allineato alla linea di base: il suo bordo dà l’altezza della riga.
L’inchiostro dal canvas
Il riquadro di una cifra è più largo del suo disegno. Con measureText di un canvas, scritto nello stesso carattere, si leggono dove comincia e dove finisce l’inchiostro di ogni cifra e quanto sale sopra la linea di base: ogni pezzo di barra si stringe proprio alla larghezza della sua cifra e si ferma proprio in cima.
Numeri al posto delle proprietà
La timeline, legata allo scorrimento con scrub SCRUB, non muove elementi: muove numeri da 0 a 1 (la barra che cresce, che si rompe, e per ogni cifra il volo, la salita, la chiusura, la discesa), tutti con fromTo. A ogni cambio una funzione ridisegna la figura da quei numeri: posizione e scaleX dei pezzi, testo del conteggio, taglio delle cifre.
La tendina
Ogni cifra ha un clip-path a poligono il cui bordo alto segue il bordo alto del suo pezzo di barra: sotto il pezzo la cifra si vede, sopra no. Prima di partire il taglio sta sotto l’inchiostro più basso, così le pance del 3 e dell’8 non spuntano; la curva della salita è RISE, un back.out che fa andare il pezzo un poco oltre la cima prima di posarsi.
Il peso e l’etichetta
Quando i pezzi si sono chiusi, una variabile CSS --w passa da THIN a BOLD con elastic.out ed è il font-weight del numero (Inter Tight è un carattere variabile). L’etichetta sta accanto al numero con left: 100%, quindi lo segue mentre si allarga, ed esce da una finestra con overflow hidden con xPercent da -104 a 0. Al telefono va sotto la riga.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MEASURES | script.js | [0.74, 0.46, 0.96] | Fin dove cresce la barra di ogni numero, da 0 a 1 della riga (uno per numero). |
THIN | script.js | 200 | Il peso delle cifre mentre la barra le disegna. |
BOLD | script.js | 640 | Il peso su cui si posano alla fine. |
LINE | script.js | 2 | Lo spessore della barra, in pixel. |
RISE | script.js | 'back.out(1.3)' | La curva di ogni pezzo che sale lungo la sua cifra: il numero fra parentesi è quanto va oltre la cima. |
STAGGER | script.js | 0.3 | Il ritardo fra una cifra e l’altra, in passi del racconto. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per i numeri di un bilancio, di un rapporto annuale, della pagina «chi siamo» di uno studio o di un’azienda: pochi numeri importanti, raccontati uno alla volta. Funziona con numeri corti (fino a quattro o cinque caratteri); con più di tre numeri la sezione va allungata.
Sul telefono
Uguale, con il numero più grande in proporzione allo schermo e l’etichetta sotto la riga invece che accanto.
Con il movimento ridotto
Niente barre né spostamenti: i numeri sono già pieni con la loro etichetta e scorrendo si danno il cambio con una dissolvenza; i nomi in basso si accendono a turno.
Trappole
- Con invalidateOnRefresh e i tween to(), una timeline che si aggiorna a metà scorrimento riparte dai valori che trova, non da zero: le cifre restavano grasse fin dall’inizio. Qui ogni tween è un fromTo, e quelli che riprendono una proprietà già mossa hanno immediateRender: false.
- Il clip-path in basso non può fermarsi alla linea di base: il 3, l’8 e il segno di percentuale scendono di qualche pixel sotto la riga e spuntavano come un’ombra. Il taglio di partenza sta sotto l’inchiostro più basso più un margine.
- Un’etichetta in position absolute con left: 100% dentro un elemento largo quanto il numero ha zero spazio e si stringe a niente; con le righe in overflow hidden in una griglia sparisce del tutto. Serve width: max-content.
- Le misure vanno prese su una copia sottile e ferma: prese sul numero vero, dopo un ridimensionamento a metà racconto, darebbero le larghezze delle cifre grasse e i pezzi non tornerebbero più ai piedi giusti.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP + ScrollTrigger 45 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.
