La linea degli anni

Scroll, TestoGSAP, Solo CSSMediaPeso compresso: Demo 8,3 KBGSAP + ScrollTrigger 45 KBGratisScarica lo zip

Scorri dentro l’anteprima

La storia di una torrefazione su una sola linea verticale sottile: scendendo, l’inchiostro corre lungo un righello di tacche, l’anno grande conta ogni anno che passa e, a ogni anno importante, la linea fa una tacca vermiglia e una frase si stende di lato, per ritirarsi quando arriva l’anno dopo. 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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The line of years</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 story of a made-up coffee roaster on a single thin vertical line. Scrolling down, the ink runs down the line
       like the hand of a ruler: the big year counts every year it passes, and at every year that matters the line
       makes a notch and a sentence unrolls beside it, then rolls back in when the next year comes -->
  <main>
    <section class="apertura">
      <p class="piccolo">Ashby Coffee Roasters</p>
      <h1 class="titolo">Sixty-seven years,<br>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">Ashby</p>
          <p class="piccolo piccolo--tenue">Roasting since 1958</p>
        </header>

        <div class="scena" data-scena>
          <div class="guida" data-guida aria-hidden="true"></div>
          <div class="traccia" data-traccia aria-hidden="true"></div>
          <div class="righello" data-righello aria-hidden="true"></div>

          <ol class="tappe">
            <li class="tappa" data-tappa data-anno="1958">
              <i class="tappa__segno" aria-hidden="true"></i>
              <i class="tappa__filo" aria-hidden="true"></i>
              <span class="tappa__anno" aria-hidden="true">1958</span>
              <p class="tappa__frase"><span class="nascosto">1958. </span>A second-hand drum roaster in a garage on Mill Lane.</p>
            </li>
            <li class="tappa" data-tappa data-anno="1971">
              <i class="tappa__segno" aria-hidden="true"></i>
              <i class="tappa__filo" aria-hidden="true"></i>
              <span class="tappa__anno" aria-hidden="true">1971</span>
              <p class="tappa__frase"><span class="nascosto">1971. </span>The corner shop opens. Twelve seats, one grinder.</p>
            </li>
            <li class="tappa" data-tappa data-anno="1986">
              <i class="tappa__segno" aria-hidden="true"></i>
              <i class="tappa__filo" aria-hidden="true"></i>
              <span class="tappa__anno" aria-hidden="true">1986</span>
              <p class="tappa__frase"><span class="nascosto">1986. </span>Nora takes the drum over from her father.</p>
            </li>
            <li class="tappa" data-tappa data-anno="2004">
              <i class="tappa__segno" aria-hidden="true"></i>
              <i class="tappa__filo" aria-hidden="true"></i>
              <span class="tappa__anno" aria-hidden="true">2004</span>
              <p class="tappa__frase"><span class="nascosto">2004. </span>The first beans bought straight from a farm.</p>
            </li>
            <li class="tappa" data-tappa data-anno="2025">
              <i class="tappa__segno" aria-hidden="true"></i>
              <i class="tappa__filo" aria-hidden="true"></i>
              <span class="tappa__anno" aria-hidden="true">2025</span>
              <p class="tappa__frase"><span class="nascosto">2025. </span>A new roastery by the river. The old drum came too.</p>
            </li>
          </ol>

          <i class="ago" data-ago aria-hidden="true"></i>
          <p class="anno" data-grande aria-hidden="true">1958</p>
        </div>
      </div>
    </section>

    <section class="apertura apertura--fine">
      <h2 class="titolo titolo--medio">The drum is<br>still turning.</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.

37 valori da cambiare

Apri il Playground

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 linea degli anni» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina «chi siamo» di una torrefazione inventata, Ashby, su un bianco caldo con l’inchiostro nero e un solo vermiglio. Lo schermo si ferma e una linea sottilissima si disegna dall’alto in basso; accanto cade un righello di tacche piccole, una per anno, più lunga ogni dieci. Un ago vermiglio si apre sulla linea, l’inchiostro scende fino al 1958 e l’anno grande entra cifra dopo cifra. Poi, scorrendo, l’inchiostro corre giù come la lancetta di uno strumento: l’anno grande lo segue e conta ogni anno che passa, stretto e sottile mentre corre (gli assi di larghezza e di peso di Archivo), con ogni cifra che scatta quando cambia; le tacche vicine alla punta si allungano in una piccola onda. A ogni anno importante l’inchiostro si ferma, le tacche intorno sentono il colpo e vibrano, l’anno si posa largo e pesante con un elastico, dalla linea esce a molla una tacca vermiglia, un filo la prolunga e una frase si stende di lato, una parola dopo l’altra. Quando arriva l’anno dopo, la frase si ritira dentro la tacca, la tacca si accorcia e diventa nera, e accanto resta scritto l’anno, piccolo e grigio. Alla fine un’ultima onda corre lungo tutto il righello. Al telefono la linea sta a sinistra, l’anno pende sotto la tacca e la frase va sotto l’anno. Tutto segue lo scorrimento, avanti e indietro.

Come funziona

Gli anni dalla pagina

Ogni anno importante è una voce di un elenco con data-anno e la sua frase: lo script li legge, li mette in ordine e ne ricava il primo e l’ultimo anno. Da lì nasce la scala: una funzione trasforma un anno in un’altezza sulla linea, e tutto (tacche, punta, frasi) si piazza con quella. Le tacche del righello sono una per anno, da quattro anni prima del primo a quattro dopo l’ultimo.

Numeri al posto delle proprietà

La timeline, legata allo scorrimento con scrub SCRUB, muove soprattutto numeri: l’anno raggiunto dall’inchiostro, l’ago, il colpo sulle tacche, e per ogni anno la tacca, il filo, la frase, il ritorno e l’anno piccolo. A ogni aggiornamento della timeline una funzione sola ridisegna tutto da quei numeri: altezza dell’inchiostro con scaleY, lunghezza delle tacche con scaleX, taglio della frase con clip-path.

L’anno che conta

Il numero grande è l’anno raggiunto arrotondato: quando una cifra cambia, il suo riquadro interno fa un piccolo salto con un tween a tempo (back.out), nel verso del conteggio. Due variabili CSS, --wd e --wg, sono gli assi wdth e wght di Archivo: all’inizio di ogni corsa scendono a NARROW e THIN, all’arrivo tornano a WIDE e HEAVY con la curva LAND. Le cifre tabellari non fanno ballare il numero mentre conta.

L’onda sulle tacche

Ogni tacca del righello si allunga secondo la sua distanza dalla punta, con una campana (Math.exp del quadrato della distanza) alta WAVE. All’arrivo su un anno la variabile colpo sale di colpo e torna a zero con un elastico: la campana si gonfia e vibra. Le tacche già passate diventano nere, quelle da venire restano chiare. L’onda finale è un’altra campana che corre dall’alto in basso.

La frase che si stende

La frase sta accanto alla tacca, centrata sulla sua altezza (al telefono sotto l’anno), ed è tagliata con clip-path: inset da destra al 100%, che si apre a 0 con power3.out mentre le parole, una per riquadro, entrano scivolando con uno stagger. Per ritirarla un secondo numero richiude il taglio, le parole escono dall’ultima, e la tacca torna corta passando dal vermiglio al nero con gsap.utils.interpolate.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NARROW`	script.js	`64`	La larghezza dell’anno grande mentre conta (62 è la più stretta).
`WIDE`	script.js	`100`	La larghezza su cui si posa (125 è la più larga).
`THIN`	script.js	`260`	Il peso dell’anno mentre conta.
`HEAVY`	script.js	`780`	Il peso su cui si posa.
`NOTCH`	script.js	`30`	Quanto esce dalla linea la tacca vermiglia, in pixel.
`WAVE`	script.js	`1.6`	Quanto si allungano le tacche vicine alla punta.
`LAND`	script.js	`'elastic.out(1, 0.55)'`	La curva dell’anno che si posa e della tacca che esce: il secondo numero più piccolo vuol dire più vibrazione.
`SCRUB`	script.js	`0.8`	Quanti secondi ci mette il disegno a raggiungere lo scorrimento.

Provali nel Playground

Quando usarla

Per la storia di un’azienda, di un locale, di uno studio o di una famiglia nella pagina «chi siamo»: quattro-sei anni importanti, una frase corta per ognuno. Gli anni si cambiano nell’HTML (data-anno e la frase): la scala si rifà da sola. Con più di sei anni la sezione va allungata.

Sul telefono

Le stesse animazioni: la linea passa a sinistra, l’anno grande pende sotto la tacca invece di stare a sinistra della linea, e la frase va sotto l’anno, su due righe se serve. Così l’anno che scende non passa mai sopra gli anni piccoli già scritti.

Con il movimento ridotto

Niente spostamenti: linea e righello sono già disegnati. Scorrendo si passa da un anno all’altro a scatti: l’anno grande e la frase spariscono in dissolvenza e ricompaiono al loro nuovo posto, gli anni già raccontati restano scritti in piccolo, quelli da venire non ci sono ancora.

Trappole

Il numero grande aveva data-anno come le voci dell’elenco: querySelector('[data-anno]') prendeva la prima voce, ne svuotava il contenuto e il numero vero restava fermo in alto. Gli elementi che lo script cerca hanno attributi che non si ripetono (qui data-grande).
Al telefono, con l’anno sopra la tacca, scendendo l’anno grande passava sopra gli anni piccoli già scritti accanto alle tacche. Messo sotto la tacca, l’anno sta sempre nella parte di linea ancora vuota.
Le parole che entravano da 14 pixel a sinistra si sovrapponevano alla parola prima mentre arrivavano: il taglio della frase già scopre lo spazio, quindi bastano 6 pixel.
Con molti fromTo sulle stesse variabili (--wd, --wg, colpo, filo) la timeline usa immediateRender: false in tutti i tween e i valori di partenza si mettono a mano prima: altrimenti l’ultimo tween costruito impone il suo inizio fin dal primo fotogramma.
Leggere offsetHeight della frase dentro la funzione che ridisegna obbliga il browser a ricalcolare la pagina a ogni fotogramma: le altezze si misurano una volta, al refresh di ScrollTrigger.

Librerie

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile, asse wdth) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,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.