La transizione dell’interlinea

Transizioni, TestoGSAP, Solo CSSMediaPeso compresso: Demo 7,6 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal: ogni riga della pagina sta sulla sua linea di base sottile. Al clic l’interlinea si chiude, le righe scivolano una dopo l’altra su un’unica linea vermiglia e ci si appiattiscono sopra; dalla stessa linea si riaprono le righe della pagina nuova, composte più larghe, che si assestano a molla. Poi la linea torna al margine sinistro, come un a capo.

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 leading transition</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>
  <main class="stage" data-stage>
    <!-- the bar and the foot stay put: only the lines of the page change -->
    <header class="bar">
      <span class="brand">Reglet</span>
      <nav class="nav" aria-label="Pages">
        <a href="#essays" data-go="a" data-nav="a" aria-current="page">Essays</a>
        <a href="#about" data-go="b" data-nav="b">About</a>
      </nav>
    </header>

    <!-- the first page, set close: every line stands on its own baseline (the script draws the guides) -->
    <section class="page page--a is-on" data-page="a" aria-label="Essays">
      <div class="col" data-col>
        <div class="row row--kicker" data-row><span class="ink">Essays on type</span></div>
        <div class="row row--title" data-row><span class="ink">Set close,</span></div>
        <div class="row row--title" data-row data-anchor><span class="ink">read slow.</span></div>
        <p class="row--text" data-lines>Short pieces on type, paper and the space between the lines.</p>
        <div class="row row--link" data-row>
          <a class="go ink" href="#about" data-go="b" data-autoclic>
            <span class="go__text">Read about Reglet</span>
            <span class="go__arrow" aria-hidden="true"><span class="go__shaft"></span><svg class="go__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
          </a>
        </div>
      </div>
    </section>

    <!-- the second page, set with room: its lines open out of the same baseline -->
    <section class="page page--b" data-page="b" aria-label="About" aria-hidden="true" inert>
      <div class="col" data-col>
        <div class="row row--kicker" data-row><span class="ink">About Reglet</span></div>
        <div class="row row--title" data-row><span class="ink">Room to</span></div>
        <div class="row row--title" data-row data-anchor><span class="ink">breathe.</span></div>
        <p class="row--text" data-lines>A small press for slow readers. Four essays a year, printed on paper that takes the ink well.</p>
        <div class="row row--link" data-row>
          <a class="go go--back ink" href="#essays" data-go="a" data-autoclic>
            <span class="go__arrow" aria-hidden="true"><svg class="go__head" viewBox="0 0 8 12"><path d="M6.5 1.5 1.5 6l5 4.5"/></svg><span class="go__shaft"></span></span>
            <span class="go__text">Back to the essays</span>
          </a>
        </div>
      </div>
    </section>

    <!-- the one baseline every line falls onto -->
    <div class="rule" data-rule aria-hidden="true"></div>

    <footer class="foot">
      <span>A small press</span>
      <span>Printed in short runs</span>
    </footer>
  </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.

29 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 transizione dell’interlinea» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di una piccola casa editrice inventata, Reglet (il regoletto è la striscia di legno che in tipografia si mette fra una riga e l’altra), in due pagine e quasi niente: fondo color carta, un titolo grande su due righe, una riga di testo, un link, e sotto ogni riga la sua linea di base, sottile e grigia. La prima pagina è composta stretta, Set close, read slow.; la seconda larga, Room to breathe. All’apertura una linea vermiglia si allarga dal centro e da lì si aprono le righe della prima pagina. Al clic su Read about Reglet la linea vermiglia parte dal punto del clic e corre fino ai margini, sulla base dell’ultima riga del titolo; le linee di base si scuriscono e l’interlinea si chiude: prima l’ultima riga del titolo si schiaccia sulla sua base, poi le altre scendono o salgono una dopo l’altra, accelerando, e appena prima di toccare la linea si appiattiscono, diventando larghe e sottili. A ogni riga che atterra la linea vermiglia si abbassa di un pixel e torna su, e si fa appena più spessa. Resta un attimo sola. Poi dalla stessa linea si aprono le righe della pagina nuova, la più lontana per prima: corrono al loro posto, lo passano di due pixel e ci tornano, e intanto si alzano da piatte a piene, larghe e leggere, stringendosi a molla fino alla loro larghezza e al loro peso. L’ultima a nascere è la riga del titolo che sta sulla linea, breathe.; poi la linea vermiglia torna al margine sinistro come il carrello di una macchina da scrivere e resta solo la base grigia. Al clic su Back to the essays succede lo stesso al contrario.

Come funziona

Una riga, una base

Ogni riga è un div .row con dentro uno span .ink (il testo) e una linea .guide alta un pixel, messa dallo script proprio all’altezza della linea di base: la base si misura con uno span vuoto allineato alla baseline. Il paragrafo è solo una sorgente: lo script mette ogni parola in uno span, le raggruppa per offsetTop e rifà una .row per ogni riga che il browser ha composto, di nuovo a ogni ridimensionamento. La colonna si sposta in modo che la base dell’ultima riga del titolo cada esattamente su RULE_AT dell’altezza.

Schiacciare sulla base

Lo span .ink è un inline-block col transform-origin sulla sua linea di base (calcolata in pixel per ogni riga): così scaleY verso zero lo schiaccia sulla sua base e non verso il centro. Insieme cambiano due variabili, --w per font-stretch (Roboto Flex va da 25 a 151) e --t per il peso, con font-weight: calc(var(--wt) - (var(--wt) - 110) * var(--t)): piatta, la riga è larga WIDE e sottile.

L’interlinea che si chiude

Per ogni riga lo script conosce dy, la distanza fra la sua base e la linea comune. Le righe partono dalla più vicina, a GAP secondi una dall’altra, e vanno a dy con power3.in, così accelerano fino al colpo; la seconda metà del viaggio le schiaccia con power2.in. Partendo prima, le vicine arrivano prima e nessuna supera l’altra. A ogni arrivo la linea vermiglia scende di KNOCK pixel in 0,05 secondi e torna con elastic.out(1, 0.35), e scaleY la fa un po’ più spessa.

L’interlinea che si apre

La pagina nuova è già sotto, con le righe schiacciate sulla linea. Si aprono dalla più lontana: così chi sale non passa attraverso una riga già in piedi, e la riga del titolo che sta sulla linea nasce per ultima. Ogni riga va OVERSHOOT pixel oltre il suo posto con expo.out e torna con un elastico; scaleY arriva a 1 con back.out(1.5), --w e --t tornano con elastic.out(1, 0.6), e la riga si stringe e prende peso con un piccolo rimbalzo. Le basi grigie si accendono e poi si raffreddano.

Regia, telefono e movimento ridotto

Ogni cambio è una timeline sola: la linea si disegna dal clic con x e scaleX (estremo sinistro e lunghezza), poi fold, poi open, poi il ritorno al margine con expo.inOut; timeScale vale SPEED. Un clic che arriva mentre la pagina cambia aspetta in coda. La pagina nascosta ha inert e aria-hidden. Le misure si rifanno a ogni ridimensionamento e il titolo si adatta alla larghezza. Con il movimento ridotto le pagine si scambiano in dissolvenza, senza linea e senza spostamenti.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RULE_AT`	script.js	`0.56`	Dove corre la linea comune, dall’alto: 0.5 è a metà, 0.45 più in alto, 0.65 più in basso.
`FOLD`	script.js	`0.62`	I secondi che ogni riga impiega a scivolare sulla linea e ad appiattirsi.
`OPEN`	script.js	`0.9`	I secondi che ogni riga della pagina nuova impiega ad aprirsi dalla linea.
`GAP`	script.js	`0.055`	I secondi fra una riga e la successiva, chiudendo e aprendo: 0 = tutte insieme.
`WIDE`	script.js	`140`	Quanto è larga una riga quando è piatta (font-stretch in %): 100 = non cambia larghezza.
`OVERSHOOT`	script.js	`2`	Di quanti pixel una riga passa il suo posto prima di tornarci: 0 = si ferma e basta.
`KNOCK`	script.js	`1`	Di quanti pixel la linea si abbassa a ogni riga che atterra: 0 = resta ferma.
`SPEED`	script.js	`1`	La velocità di tutto: 2 è il doppio, 0.5 la metà.

Provali nel Playground

Quando usarla

Per passare da una pagina all’altra in un sito dove la tipografia fa tutto: una rivista, un blog di saggi, una casa editrice, una fonderia di caratteri, uno studio grafico, un portfolio. Sta bene soprattutto fra pagine fatte di testo, dove le righe stesse diventano la transizione.

Sul telefono

La stessa transizione con le misure adattate: il titolo si stringe fino a stare nella larghezza dello schermo, il testo va a capo su più righe e ogni riga si chiude e si riapre per conto suo. Un tocco sul link manda la pagina avanti e indietro.

Con il movimento ridotto

Niente si sposta e niente si schiaccia: la pagina vecchia svanisce e la nuova compare in dissolvenza con le righe già al loro posto; la linea vermiglia non compare.

Trappole

Aprendo la pagina nuova dalla riga più vicina, le righe che salivano passavano schiacciate attraverso il titolo già in piedi e lasciavano una striscia grigia sulle lettere: si aprono dalla più lontana, e la riga del titolo che sta sulla linea nasce per ultima.
Le linee di base sono posizionate in assoluto e il browser le dipinge sopra il testo che scorre normale, tagliando le discendenti (la p, la virgola): lo span .ink ha position: relative e la linea è il primo figlio della riga, così sta sotto.
Un paragrafo che va a capo non si può schiacciare riga per riga: va spezzato in righe vere misurando dove cade ogni parola, e rifatto a ogni ridimensionamento perché le righe cambiano.
Piatta e larga WIDE, una riga lunga esce dalla colonna e potrebbe allargare la pagina: il palco ha overflow: hidden, e comunque in quel momento la riga è alta meno di un pixel.
Un clic che arriva a metà del cambio (il pilota delle anteprime clicca ogni 2,8 secondi) partirebbe sopra una timeline ancora in corsa: va in coda e parte appena la timeline finisce.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,6 KB; le librerie: GSAP 28 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.