Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
L'archivio sul righello
L'archivio di uno studio, un progetto all'anno, su un righello sottile: sotto il puntatore le tacche si alzano in un'onda, ognuna su una sua molla, l'ago arancio scatta sull'anno più vicino col nome del progetto appeso, e il grande anno gira come un contachilometri, sottile mentre corre e pieno quando si posa. 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 ruler archive</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>
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Studio Kesten</span>
<span class="top__note">Archive, one project a year</span>
</header>
<!-- the year: four columns of digits that roll like an odometer, thin while they fly and heavy when they land -->
<p class="year" aria-hidden="true" data-year></p>
<!-- the ruler: one tall tick a year and thin ones between; under the pointer the ticks rise in a wave, each on its
own spring, and the needle snaps from year to year carrying the name of the project -->
<div class="ruler" role="slider" tabindex="0" aria-label="Archive year" data-ruler>
<div class="ruler__ticks" data-ticks></div>
<div class="needle" data-needle>
<span class="needle__line" data-needle-line></span>
<span class="caption" data-caption><span class="caption__mask" data-caption-mask></span></span>
</div>
<div class="ruler__labels" aria-hidden="true" data-labels></div>
</div>
<p class="hint">Move along the ruler</p>
</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.
18 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'archivio sul righello» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome dello studio, Studio Kesten, e a destra Archive, one project a year; in mezzo un anno enorme, in basso un righello sottile dal 1996 al 2026, con una tacca alta per ogni anno, più alta ogni cinque e ogni dieci, tacche corte in mezzo e sotto le scritte 2000, 2010 e 2020. All'apertura le tacche crescono da sinistra con un piccolo rimbalzo, l'ago arancio cade dall'alto su una molla e corre una volta per i trent'anni con l'onda sotto, mentre l'anno gira veloce fino al 2026. Poi, dovunque vada il puntatore sulla pagina, le tacche sotto di lui si alzano in un'onda morbida, più alta vicino al righello e più bassa lontano; ogni tacca la insegue su una sua molla, così un puntatore veloce si lascia dietro un'increspatura. L'ago scatta sull'anno più vicino con una molla che va un filo oltre e torna, la tacca su cui atterra riceve un colpetto e l'ago si allunga e si assesta. Appeso in cima all'ago, il nome del progetto di quell'anno (Kiln & Co, Identity) esce dalla sua maschera dal verso in cui si va, spingendo via il vecchio come un nastro, e verso la fine del righello passa a sinistra dell'ago. Il grande anno è un contachilometri mosso dalla stessa molla dell'ago: ogni cifra gira solo quando quella alla sua destra passa da 9 a 0, e le cifre si fanno sottilissime mentre corrono e tornano piene quando si posano. Quando nessuno punta, dopo un momento l'ago vaga piano da solo. Con le frecce si va di un anno, con Pagina su e giù di dieci, con Home e Fine agli estremi.
Come funziona
Un righello di tacche
Il righello è una fila di elementi i larghi un pixel e alti cento, messi in posizione con left in percentuale: una tacca per anno e STEPS spazi fra due anni. Ognuno ha la sua altezza di riposo (più alta ogni cinque e ogni dieci anni) e a ogni fotogramma riceve solo transform: scaleY dal piede, così restano linee nitide e niente ricalcola il layout. L'intensità va dal grigio al nero con l'opacità, in base a quanto la tacca è alzata.
L'onda su una molla per tacca
Ogni tacca vuole alzarsi di LIFT per una campana di Gauss, exp(−d²/2R²), con d la distanza orizzontale dal puntatore e R uguale a REACH (più stretta su un righello corto). Non la prende subito: la insegue su una molla (TICK_SPRING) integrata a mano sul ticker di GSAP col passo limitato a 1/30 di secondo. Dietro un puntatore veloce le tacche scendono un po' sotto la loro misura, mai sotto un terzo.
L'ago e il contachilometri
L'anno voluto è quello più vicino al puntatore; l'ago ci arriva su una molla sua (NEEDLE_SPRING) e la stessa posizione, un numero con la virgola, muove le cifre. Ogni colonna è una striscia con le cifre da 0 a 9 e uno 0 in più; la colonna delle unità sta a y mod 10, le altre girano solo mentre la colonna alla loro destra passa da 9 a 10, come le rotelle di un contatore. Il peso dell'anno va da WEIGHT[0] a WEIGHT[1] con la velocità della molla.
Il nome appeso all'ago
Ad ogni anno nuovo il nome del progetto entra nella maschera dal basso se si va avanti e dall'alto se si torna indietro, e il vecchio esce dall'altra parte con la stessa curva, così non si sovrappongono; il tipo di lavoro segue con un piccolo ritardo. Il cambio si fa al massimo ogni decimo di secondo. Verso la fine del righello la didascalia passa a sinistra dell'ago, scivolando, e non esce mai dalla pagina.
Le mani, i tasti e il pilota
Il mouse guida l'onda su tutta la pagina, il dito solo mentre tocca (la pagina ha touch-action: pan-y, così si può ancora scorrere in verticale). Il righello è un role=slider con aria-valuetext: le frecce, Pagina su e giù, Home e Fine portano l'ago con un puntatore fantasma che scivola. All'apertura una timeline fa crescere le tacche e fa correre l'ago; se nessuno punta, dopo 2,4 secondi l'ago vaga su un seno lento.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
REACH | script.js | 70 | Quanto è larga l'onda di tacche intorno al puntatore, in pixel. |
LIFT | script.js | 64 | Di quanti pixel si alza la tacca proprio sotto il puntatore. |
TICK_SPRING | script.js | [300, 17] | La molla di ogni tacca: quanto è rigida e quanto è frenata (meno freno, più ondeggia). |
NEEDLE_SPRING | script.js | [150, 16] | La molla dell'ago e dell'anno che gira: quanto è rigida e quanto è frenata. |
WEIGHT | script.js | [720, 180] | Il peso dell'anno fermo e mentre gira veloce (da 100 a 900). |
STEPS | script.js | 5 | Gli spazi fra due anni sul righello (al telefono la metà). |
WANDER | script.js | true | L'ago vaga da solo quando nessuno punta. |
Quando usarla
Per l'archivio o la cronologia di uno studio, di un fotografo, di un'azienda di famiglia, di un festival con molte edizioni: una cosa per anno, da sfogliare passando. Funziona finché gli anni sono una trentina o una cinquantina; con molti di più le tacche si fanno troppo fitte e l'onda prende troppi anni insieme.
Sul telefono
Le stesse animazioni a misure adattate: il righello è largo quanto lo schermo con metà delle tacche fra un anno e l'altro, l'onda è più stretta, l'anno è grande un terzo della larghezza. L'onda e l'ago seguono il dito mentre tocca e si posano quando si alza; la pagina scorre ancora in verticale. La didascalia non esce mai dallo schermo.
Con il movimento ridotto
Niente onda, niente molle e niente cifre che girano: l'ago va subito sull'anno, l'anno nuovo compare con una breve dissolvenza e il nome del progetto si scambia in dissolvenza, senza scivolare. All'apertura tutto compare in dissolvenza già al suo posto, sul 2026.
Trappole
- Le scritte della didascalia erano span in linea e il transform non le muoveva: i nomi restavano tutti fermi uno sopra l'altro. Servono display: inline-block.
- Con l'uscita in power3.in il nome vecchio restava fermo mentre il nuovo arrivava in fretta, e per un attimo si leggevano tutti e due. Entrata e uscita con la stessa curva e la stessa durata scorrono come un nastro e non si toccano.
- Passando veloce su trent'anni, un cambio di nome a ogni anno ne metteva sette o otto nella maschera insieme: il cambio si fa al massimo ogni decimo di secondo, sempre con l'ultimo anno.
- Molle poco frenate dietro un puntatore veloce facevano scendere le tacche sotto lo zero, e il righello sembrava bucato: l'altezza non scende mai sotto un terzo di quella di riposo.
- A peso 720 lo zero di Inter Tight è più largo di 0,6 em e la colonna gli tagliava il fianco: colonne larghe 0,7 em con un piccolo margine negativo.
- Il pilota delle anteprime manda pointerleave che risalgono dalla pagina a ogni elemento che lascia: l'uscita vera si riconosce da un pointerout senza relatedTarget e fuori dalla finestra.
- Un mouse fermo sulla pagina non deve far partire l'ago che vaga: si ricorda se il mouse è dentro, anche se si è mosso durante l'apertura, e alla fine dell'apertura l'ago va dove sta lui.
Librerie
GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,6 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.
