Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La somma in colonna
Scorri dentro l’anteprima
Il trimestre di un piccolo laboratorio in una colonna di cifre allineate a destra: scorrendo, ogni riga si scrive e una copia della sua cifra scende lungo la colonna e sprofonda nella riga del totale come in una fessura; il totale conta, prende peso e alla fine si sottolinea due volte e si accende in blu. 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>A column that adds itself up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the quarter of a made-up ceramics studio, as a column of figures aligned on the right. Scrolling, every line is
written in, then a copy of its figure drops down the column and sinks through the rule into the total, which
counts up and gains weight. At the end the total is underlined twice and lights up -->
<main>
<section class="apertura">
<p class="piccolo">Wendle Ceramics</p>
<h1 class="titolo">The quarter,<br>added up.</h1>
<p class="piccolo piccolo--tenue">Five lines and a total. Scroll.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Wendle</p>
<p class="piccolo piccolo--tenue">Third quarter, in euros</p>
</header>
<div class="conto" data-conto>
<div class="righe">
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Commissions</span></span><span class="riga__cifra" data-cifra>12,400.00</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Workshops</span></span><span class="riga__cifra" data-cifra>3,180.50</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Online shop</span></span><span class="riga__cifra" data-cifra>2,960.00</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Gallery sales</span></span><span class="riga__cifra" data-cifra>5,215.75</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Licensing</span></span><span class="riga__cifra" data-cifra>845.00</span></p>
</div>
<div class="tratto" data-tratto aria-hidden="true"><i class="tratto__linea" data-linea></i></div>
<p class="totale">
<span class="totale__nome" data-totale-nome>Total</span>
<span class="totale__cifra" data-totale>0.00</span>
</p>
<div class="doppia" data-doppia aria-hidden="true"><i class="doppia__linea" data-sotto></i><i class="doppia__linea" data-sotto></i></div>
<div class="pozzo" data-pozzo aria-hidden="true"></div>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Every line<br>counted.</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.
32 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 somma in colonna» da Animorio e adattala al mio sitoCosa fa
Il conto del terzo trimestre di un laboratorio di ceramica inventato, Wendle, su un bianco caldo con l’inchiostro nero e un solo blu tenuto per la fine. Lo schermo si ferma: sotto una colonna ancora vuota una riga sottile si tira da destra a sinistra, e sotto la riga il totale aspetta a zero, sottile e pallido. Poi, una riga alla volta, il nome sale al suo posto e le cifre lo seguono da destra, una dopo l’altra, atterrando con un pixel di slancio e prendendo un po’ di peso. Una copia della cifra si stacca di un capello dalla riga, che si fa pallida, e scende lungo la colonna vuota stringendosi mentre prende velocità, finché sprofonda nella riga come in una fessura. La riga trema col colpo, il totale si abbassa appena e conta fino alla somma nuova, e a ogni riga aggiunta diventa più pesante. Quando sono arrivate tutte e cinque, sotto il totale si tirano due righe blu da destra a sinistra, una dopo l’altra, e il totale si accende in blu con un ultimo colpo di peso. Le cifre sono tabulari, quindi restano incolonnate mentre contano. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
La colonna
Ogni riga è un paragrafo in flex: il nome a sinistra, la cifra a destra. Le cifre si leggono dalla pagina, si arrotondano ai DECIMALS mostrati (così il totale è sempre la somma di quello che si vede) e si riscrivono con toLocaleString. font-variant-numeric: tabular-nums dà a tutte le cifre la stessa larghezza: allineate a destra, le colonne di unità, decine e centesimi restano dritte anche mentre il totale conta. Il carattere è Archivo, variabile nel peso e nella larghezza.
Le cifre che salgono
Lo script mette ogni carattere della cifra in una finestrella con overflow hidden. Il nome e i caratteri partono con yPercent 110, sotto la finestra, e salgono a 0: il nome con power3.out, le cifre con la curva LAND (un back.out, il pixel di slancio) e uno stagger di STAGGER che parte dall’ultima, cioè da destra, come si scrivono i numeri in colonna. Intanto la variabile --w, che è il font-weight della cifra, passa da 260 a 430.
La copia e la fessura
Per ogni riga c’è una copia della cifra dentro un pozzo: un riquadro in position absolute con overflow hidden che finisce proprio sulla riga del totale. La timeline non muove la copia: muove numeri da 0 a 1 (si stacca, cade, affonda) e una funzione la ridisegna. Cadendo con power2.in la copia arriva al punto in cui tocca la riga, misurato con offsetTop; poi scende ancora di tutta la sua altezza e il bordo del pozzo la taglia, come se passasse in una fessura. Mentre accelera, font-stretch va da 100% a NARROW: la cifra che corre si stringe.
Il totale
Quando la copia tocca la riga partono tre numeri della stessa riga: conta, che con power3.out porta il testo del totale alla somma nuova; peso, che con un back.out alza il font-weight da THIN verso BOLD in proporzione alla parte del totale già sommata; colpo, che fa scendere il totale di qualche pixel e fa tremare la riga con un seno che si spegne. La riga è fatta di due elementi: quello fuori lo muove lo script col tremito, quello dentro lo disegna GSAP con scaleX e transform-origin a destra.
Le due righe e il blu
Alla fine due righe da un pixel, larghe quanto il totale finale (misurato su una copia nascosta già al suo peso), si disegnano con scaleX da destra a sinistra, una dopo l’altra. Il totale passa dall’inchiostro al blu con un fromTo e immediateRender: false (il colore era già stato mosso alla prima riga) e prende ancora 40 di peso con elastic.out. Col movimento ridotto le righe compaiono in dissolvenza e il totale passa da una somma all’altra senza contare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
THIN | script.js | 200 | Il peso del totale quando è ancora a zero. |
BOLD | script.js | 720 | Il peso che raggiunge quando tutte le righe sono sommate. |
NARROW | script.js | 68 | Quanto si stringe una cifra mentre cade (l’asse della larghezza, da 62 a 100; 100 = non si stringe). |
DECIMALS | script.js | 2 | Quanti decimali mostrano le cifre (0 per i numeri interi). |
LAND | script.js | 'back.out(1.6)' | La curva delle cifre che atterrano nella riga: il numero fra parentesi è quanto vanno oltre. |
STAGGER | script.js | 0.08 | Il ritardo fra una cifra e l’altra mentre salgono, in passi del racconto. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per un conto da raccontare: il riepilogo di un ordine o di un preventivo, il bilancio di un trimestre nella pagina di un’azienda, il resoconto di una raccolta fondi, le spese di un viaggio, il totale di un abbonamento con le sue voci. Le righe e le cifre si cambiano nella pagina: funziona con tre-sei righe e cifre fino a una decina di caratteri.
Sul telefono
Uguale: la colonna prende tutta la larghezza meno i margini, le righe sono un poco più piccole e il totale si misura sulla larghezza dello schermo, così il totale finale ci sta anche nel suo peso più grosso.
Con il movimento ridotto
Niente si muove: la riga è già disegnata, le righe compaiono in dissolvenza una dopo l’altra e il totale passa alla somma nuova a ogni riga, senza contare; alla fine le due righe e il blu compaiono in dissolvenza.
Trappole
- Senza cifre tabulari ogni passo del conteggio cambiava la larghezza del totale e, allineato a destra, il numero ballava a sinistra: serve font-variant-numeric: tabular-nums e un carattere che le abbia (Archivo sì).
- Una finestrella in inline-block con overflow hidden ha la linea di base sul suo bordo basso, non su quella del testo: le cifre si spostavano rispetto al nome. Qui le finestre hanno vertical-align: top e il nome ha la stessa finestra con lo stesso padding, e la riga è allineata con flex-end.
- Arrotondando solo il totale, con DECIMALS a 0 la somma di 3,180.50 e 5,215.75 dava un euro in più delle cifre scritte sopra: ogni riga si arrotonda prima di sommare.
- La riga trema e GSAP la disegna con scaleX: sullo stesso elemento il transform dello script avrebbe cancellato quello di GSAP. Fuori l’elemento del tremito, dentro quello di GSAP.
- Il pozzo che taglia le copie deve cominciare un po’ sopra la colonna: la copia della prima riga, staccandosi di un capello verso l’alto, perdeva la cima delle cifre.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,2 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 16 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.
