Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La riga che si piega nel grafico
Scorri dentro l’anteprima
Un anno di vendite di un laboratorio di ceramica disegnato da una sola riga sottile: scendendo, la riga piatta si piega punto per punto nel grafico dei dodici mesi, le tacche dei mesi cadono sotto, i tre numeri che contano salgono sopra i loro picchi e prendono peso su una molla, e l’ultimo punto si accende nel 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>The line that bends into a chart</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 year of a made-up ceramics studio drawn by a single thin line. Scrolling down, the flat line bends point
by point into the chart of the twelve months, the month ticks drop out from under it, the three figures that
matter rise above their peaks gaining weight on a spring, and the last point lights up in the accent -->
<main>
<section class="apertura">
<p class="piccolo">Kilnworth ceramics</p>
<h1 class="titolo">A whole year<br>on one line.</h1>
<p class="piccolo piccolo--tenue">Scroll down</p>
</section>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Kilnworth</p>
<p class="piccolo piccolo--tenue">Pieces sold in 2025</p>
</header>
<div class="scena" data-scena>
<svg class="tela" data-tela aria-hidden="true">
<path class="tela__base" data-base />
<g data-tacche></g>
<path class="tela__riga" data-riga />
<path class="tela__accento" data-ultima />
<circle class="tela__punto" data-punto r="0" />
</svg>
<div class="mesi" data-mesi aria-hidden="true"></div>
<figure class="cima" data-cima data-mese="4">
<i class="cima__quota" aria-hidden="true"></i>
<div class="cima__corpo">
<figcaption class="cima__dida"><span data-dida>Spring fair</span></figcaption>
<p class="cima__numero" data-numero></p>
</div>
</figure>
<figure class="cima" data-cima data-mese="8">
<i class="cima__quota" aria-hidden="true"></i>
<div class="cima__corpo">
<figcaption class="cima__dida"><span data-dida>New glaze</span></figcaption>
<p class="cima__numero" data-numero></p>
</div>
</figure>
<figure class="cima cima--ultima" data-cima data-mese="11">
<i class="cima__quota" aria-hidden="true"></i>
<div class="cima__corpo">
<figcaption class="cima__dida"><span data-dida>Best month yet</span></figcaption>
<p class="cima__numero" data-numero></p>
</div>
</figure>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Thank you for<br>a good year.</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.
35 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 riga che si piega nel grafico» da Animorio e adattala al mio sitoCosa fa
La pagina dei numeri di un laboratorio di ceramica inventato, Kilnworth, su un bianco caldo con l’inchiostro nero e un solo blu elettrico. Lo schermo si ferma e una riga orizzontale sottilissima si disegna da sinistra a destra. Scorrendo, la riga si piega un punto alla volta, da gennaio a dicembre: ogni punto sale alla sua altezza su una molla misurata, passa oltre di un soffio e si assesta, e dove la riga stava resta una traccia chiara, la linea di base. Appena un punto si stacca, la tacca del suo mese cade da sotto la riga con un piccolo rimbalzo e sotto compare il nome del mese. Sopra i tre picchi che contano (la fiera di primavera, il nuovo smalto, il mese migliore) cresce una quota sottile, sale la didascalia e il numero arriva cifra dopo cifra, ognuna dalla sua finestra, sottile e stretto, poi prende peso e larghezza con un elastico (gli assi di peso e di larghezza di Roboto Flex). Alla fine l’ultimo tratto, da novembre a dicembre, si ripassa in blu, l’ultimo punto si accende e il suo numero diventa blu. Al telefono i mesi diventano iniziali e i numeri vicini al bordo si spostano per restare dentro. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
I dodici numeri
Le vendite di ogni mese sono un elenco, SALES, in cima allo script: il valore più alto decide la scala. Ogni mese diventa un punto con la sua x (i dodici punti divisi in parti uguali fra i due margini) e una y che va dalla linea di base all’altezza del suo valore. I tre numeri sopra i picchi sono nell’HTML con data-mese, la posizione del mese da 0 a 11: la cifra la scrive lo script prendendola dall’elenco.
Numeri al posto delle proprietà
La timeline, legata allo scorrimento con scrub SCRUB, muove numeri da 0 a 1: quanto della riga è disegnato, quanto è salito ogni punto, quanto è caduta ogni tacca, l’accento finale. A ogni aggiornamento una funzione sola ridisegna tutto: l’attributo d del path della riga (una spezzata tagliata dove è arrivata la penna), quello della traccia chiara sotto, le tacche e la posizione dei nomi dei mesi e dei numeri.
La molla di ogni punto
Il tween di ogni punto è lineare, e la curva BEND (back.out) si applica quando si disegna, con gsap.parseEase: così il punto supera la sua altezza di un soffio e torna giù sempre allo stesso modo, sia scendendo sia risalendo. Ogni punto parte STAGGER dopo quello prima, quindi la piega corre da gennaio a dicembre come un’onda.
Le tacche che cadono
Ogni tacca è un piccolo path verticale che parte dalla linea di base e scende di DROP pixel con la curva bounce.out, un attimo dopo che il suo punto si è staccato; il nome del mese sotto arriva in dissolvenza scendendo di sei pixel. Al telefono i nomi diventano l’iniziale.
Il numero che prende peso
Ogni cifra sta in una finestra con overflow: hidden e sale da sotto con uno stagger. Il numero intero ha due variabili CSS, --wg (font-weight) e --wd (l’asse wdth in font-variation-settings): partono da LIGHT e 70 e arrivano a HEAVY e 100 con la curva LAND, un elastico che le porta oltre e le fa tornare. Il colore dell’ultimo numero passa dal nero al blu con gsap.utils.interpolate insieme al punto finale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SALES | script.js | [84, 102, 96, 148, 212, 176, 131, 158, 264, 221, 238, 341] | Le vendite di ogni mese, da gennaio a dicembre: il più alto decide la scala. |
BEND | script.js | 'back.out(1)' | La curva di ogni punto che sale: il numero è quanto va oltre prima di assestarsi. |
STAGGER | script.js | 0.45 | Quanto aspetta ogni punto dopo che è partito quello prima. |
DROP | script.js | 9 | Di quanti pixel cadono le tacche dei mesi sotto la riga. |
LIGHT | script.js | 200 | Il peso di un numero mentre sale. |
HEAVY | script.js | 680 | Il peso su cui si posa. |
LAND | script.js | 'elastic.out(1, 0.5)' | La molla del numero che prende peso: il secondo numero più piccolo vuol dire più vibrazione. |
SCRUB | script.js | 0.8 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per i numeri di un anno in una pagina «chi siamo», in un resoconto annuale, nella pagina di un’app o di un negozio che vuole mostrare come è andata: dodici valori e due o tre momenti da raccontare. I valori si cambiano in SALES e i numeri sopra i picchi nell’HTML (data-mese e la didascalia).
Sul telefono
Le stesse animazioni a misure adattate: il grafico occupa tutta la larghezza con margini di 26 pixel, i nomi dei mesi diventano l’iniziale, i numeri sono più piccoli e quelli vicini al bordo si spostano verso l’interno per non uscire dallo schermo (la quota resta sul punto).
Con il movimento ridotto
Niente spostamenti: il grafico è già disegnato, con le tacche e i mesi. Scorrendo i tre numeri compaiono in dissolvenza uno dopo l’altro, poi l’ultimo tratto, l’ultimo punto e il suo numero si accendono nel blu.
Trappole
- Il transform in linea di GSAP cancella quello della classe: il blocco del numero è centrato sul punto dal CSS (translateX(-50%) più --sposta), quindi GSAP non lo tocca mai. Il punto lo porta il suo genitore, che lo script sposta a mano, e GSAP muove solo le cifre dentro e la didascalia.
- Una riga di un pixel su una coordinata intera cade a cavallo di due file di pixel e si vede grigia e sfocata: la linea di base sta su mezzo pixel (y arrotondata più 0,5), e il viewBox dell’SVG è grande quanto il palco, un’unità per pixel.
- Il numero di dicembre, centrato sul suo punto, usciva dallo schermo a destra (al telefono anche la didascalia). Ogni numero si misura una volta al refresh di ScrollTrigger, già al suo peso finale, e una variabile CSS --sposta lo fa rientrare nei margini; la quota resta sul punto.
- Il peso del numero cambia la sua larghezza mentre arriva: misurandolo al peso leggero di partenza, alla fine sforava lo stesso. Prima di misurarlo lo script mette per un attimo --wg e --wd ai valori finali e poi rimette quelli che c’erano.
- Le cifre salgono da finestre con overflow: hidden e la molla le porta un po’ oltre: senza qualche centesimo di em di spazio nella finestra (padding con margine negativo uguale) la cima delle cifre veniva tagliata durante il rimbalzo.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Roboto Flex (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 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.
