Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
L’indice che segue la lettura
Scorri dentro l’anteprima
L’indice di un lungo racconto su un diario personale, nello stile minimal: scendendo, il capitolo che stai leggendo sta in cima, grande e pesante, con un segnalibro blu sottile; finito, si rimpicciolisce, si scosta e scende in fondo fra quelli già letti, grigio e stretto con l’asse wdth, mentre gli altri salgono di una riga uno dopo l’altro su una molla e il successivo cresce al suo posto. In alto i minuti che restano contano all’indietro.
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 index that follows the reading</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the index of a long essay on a made-up personal journal. Scrolling, the chapter being read climbs to the top of
the index and grows; when it is done it steps aside, shrinks, narrows and goes to the bottom with the chapters
already read, while the next one rises in its place -->
<main>
<section class="apertura">
<p class="piccolo">Odalo, a journal</p>
<h1 class="titolo">A year<br>on foot.</h1>
<p class="piccolo piccolo--tenue">Scroll to read along.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Odalo</p>
<p class="piccolo piccolo--tenue"><span class="resto" data-resto>25</span> min left</p>
</header>
<nav class="indice" aria-label="Chapters" data-indice>
<ol class="voci" data-voci></ol>
<i class="filo filo--sopra" data-filo-sopra aria-hidden="true"></i>
<i class="filo filo--letti" data-filo-letti aria-hidden="true"></i>
<i class="nastro" data-nastro aria-hidden="true"></i>
</nav>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Thanks for<br>walking along.</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.
29 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 «L’indice che segue la lettura» da Animorio e adattala al mio sitoCosa fa
Un diario personale inventato, Odalo, su un bianco caldo con l’inchiostro nero e un solo blu oltremare. Dopo l’apertura (A year on foot) lo schermo si ferma sull’indice del racconto: in cima il capitolo che si sta leggendo, Leaving, grande e in nero pesante, con sotto i suoi minuti di lettura e a sinistra un segnalibro, una riga blu verticale sottile; sotto una riga grigia sottile, gli altri quattro capitoli in fila, più piccoli, ognuno con i suoi minuti allineati a destra. In alto a destra i minuti che restano, 25. Scendendo, alla fine di ogni capitolo l’indice si riordina: il segnalibro si chiude verso l’alto, il capitolo appena letto si rimpicciolisce, si scosta di lato su un arco e scende in fondo, diventando grigio e stretto (l’asse wdth del carattere passa da 100 a 76); intanto gli altri salgono di una riga, uno dopo l’altro, e si posano andando un filo oltre; il capitolo successivo sale in cima e cresce con un piccolo rimbalzo, i suoi minuti passano sotto il titolo e il segnalibro si riapre accanto a lui. La prima volta, sopra i capitoli già letti si disegna una seconda riga sottile, che poi li segue; quando non resta niente da leggere si ritira. I minuti in alto calano a ogni capitolo passato. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Posti numerati, non elementi che si spostano nel DOM
I capitoli sono li assoluti dentro un palco fissato (position: sticky, alto 100lvh) e non cambiano mai ordine nel DOM. Al capitolo k ogni voce j sta nel posto (j − k + N) mod N: il posto 0 è la cima, poi quelli da leggere, poi quelli letti, staccati da un piccolo vuoto. Una funzione dà la y di ogni posto, e il disegno mette solo transform, font-size e font-variation-settings.
Un numero solo legato allo scorrimento
La timeline, con scrub SCRUB, porta un numero p da 0 al numero dei capitoli meno uno. La parte intera è il capitolo che si legge, il resto il cambio: per la prima parte (HOLD) l’indice sta fermo, nel resto ogni voce passa dal suo posto a quello del capitolo dopo. Tutto si calcola da p, quindi andando indietro l’indice si rimette in ordine da solo.
Tre coreografie nello stesso cambio
Il capitolo appena letto si rimpicciolisce nella prima metà (power3.inOut), poi scende su un arco: x = sen(π·t) per una distanza, così passa di lato alle altre voci, e arriva per ultimo. Le altre salgono di una riga con la curva SETTLE, ognuna STAGGER più tardi di quella sopra, e lasciano libero il posto prima che arrivi. Il successivo sale e cresce con la stessa curva: la cima va un filo oltre e torna.
Peso, larghezza e grigio
Instrument Sans è variabile in peso (400–700) e in larghezza (75–100). Le tre specie di voce hanno ognuna il suo aspetto (in lettura 640 e 100, da leggere 470 e 100, lette 420 e 76 in grigio) e nel cambio i valori si mescolano: la voce letta si stringe e ingrigisce mentre scende. Il colore si mescola con gsap.utils.interpolate fra le due variabili CSS.
Segnalibro, righe e minuti
Il segnalibro è un elemento largo 2 pixel scalato in altezza: si chiude con power2.in e si riapre con la curva SETTLE. La riga sopra i capitoli letti si disegna con scaleX la prima volta e poi sta a metà del vuoto sopra il primo letto. I minuti che restano tolgono quelli di ogni capitolo mentre lo si passa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CHAPTERS | script.js | [['Leaving', 4], ['The coast road', 7], …] | I capitoli: titolo e minuti di lettura. |
BIG | script.js | 1 | Quanto è grande il capitolo che si legge, rispetto alla pagina (da 0,6 a 1,4). |
SETTLE | script.js | 'back.out(1.5)' | La curva con cui i capitoli si posano nelle righe: il numero fra parentesi è quanto vanno oltre. |
STAGGER | script.js | 0.07 | Quanto partono distanti le voci che salgono, come parte del cambio. |
HOLD | script.js | 0.35 | La parte di ogni capitolo in cui l’indice resta fermo, da 0 a 0,8. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette l’indice a raggiungere lo scorrimento. |
Quando usarla
Per un articolo lungo, un racconto a capitoli, una guida o un manuale: accanto al testo vero, come indice fisso che dice dove sei e quanto manca. Va bene da tre a sette capitoli con titoli corti; con di più l’elenco non sta in uno schermo.
Sul telefono
Uguale, con misure adattate: l’indice prende tutta la larghezza, il titolo in cima è più piccolo, le righe più strette e l’arco del capitolo che scende più largo, per passare di lato alle altre voci.
Con il movimento ridotto
Niente voli né rimbalzi: alla fine di ogni capitolo l’indice si dissolve e ricompare già nell’ordine nuovo, col segnalibro accanto al capitolo dopo; i minuti contano lo stesso.
Trappole
- Con le voci che salivano tutte nello stesso intervallo, l’ultima già letta partiva troppo tardi e il capitolo appena letto atterrava sopra di lei, due titoli sulla stessa riga. Le voci che salgono finiscono prima (entro il 60% del cambio più il ritardo) e quella che scende arriva per ultima.
- Quando non resta niente da leggere, la riga sopra i capitoli letti finiva a un passo da quella sotto il titolo e si vedevano due righe parallele: nell’ultimo cambio si dissolve.
- I minuti cambiano posto (sotto il titolo grande, a destra nelle righe): spostarli insieme al titolo li faceva volare in diagonale sopra le altre voci. Si dissolvono a metà cambio e ricompaiono nel posto nuovo.
- Il palco va misurato di nuovo a ogni refresh di ScrollTrigger e dopo che il carattere è arrivato: col carattere di riserva i titoli grandi erano più larghi.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,1 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 19 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.
