La transizione col pollice

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

Un cambio di pagina nello stile minimal: al clic la pagina si stacca dal tavolo e si scopre che è il primo foglio di un blocco, coi fogli sotto appena sfalsati. Un pollice lo sfoglia di lato velocissimo e ogni foglio è un fotogramma: il titolo vecchio affonda, quello nuovo sale e prende peso. Il blocco si ferma con un piccolo colpo sulla pagina segnata dal nastrino rosso.

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 thumb riffle transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the pad: the two real pages are its top and its bottom sheet; the thin sheets in between are added by the script -->
    <div class="deck" data-deck>
      <div class="pan" data-pan>
        <section class="sheet page page--a" data-page="a" aria-label="Notebooks">
          <header class="bar" data-bar>
            <span class="brand">Quire</span>
            <nav class="nav" aria-label="Pages">
              <a href="#notebooks" aria-current="page">Notebooks</a>
              <a href="#archive" data-go="b">Archive</a>
            </nav>
          </header>
          <div class="hero">
            <p class="kicker" data-rise>Notebooks, sewn by hand</p>
            <h1 class="big big--a" data-big>Blank pages.</h1>
            <a class="go" href="#archive" data-go="b" data-autoclic data-rise>
              <span class="go__text">Open the archive</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>
          <footer class="foot" data-foot>
            <span>Bound in small runs</span>
            <span>Since 2011</span>
          </footer>
          <span class="sheet__shade" aria-hidden="true"></span>
        </section>

        <section class="sheet page page--b" data-page="b" aria-label="Archive" aria-hidden="true">
          <header class="bar" data-bar>
            <span class="brand">Quire</span>
            <nav class="nav" aria-label="Pages">
              <a href="#notebooks" data-go="a">Notebooks</a>
              <a href="#archive" aria-current="page">Archive</a>
            </nav>
          </header>
          <div class="hero">
            <h2 class="big big--b" data-big>Archive</h2>
            <div class="below">
              <p class="lede" data-rise>Every notebook we have bound since the first one, kept on a shelf and still open to read.</p>
              <a class="go go--back" href="#notebooks" data-go="a" data-autoclic data-rise>
                <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 notebooks</span>
              </a>
            </div>
          </div>
          <footer class="foot" data-foot>
            <span>Open on Saturdays</span>
            <span>Since 2011</span>
          </footer>
          <!-- the ribbon marker: it hangs out of the pad at the page the thumb will stop on -->
          <span class="ribbon" data-ribbon aria-hidden="true"></span>
          <span class="sheet__shade" aria-hidden="true"></span>
        </section>
      </div>
    </div>
  </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.

28 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 col pollice» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di una piccola legatoria inventata, Quire, che cuce quaderni a mano, in due pagine e quasi niente: fondo color carta, un titolo enorme in Fraunces, una riga di testo, un solo accento rosso. All’apertura il blocco viene posato sul tavolo un po’ più piccolo dello schermo: i fogli sotto si aprono a ventaglio di pochi pixel e sul bordo si vede la loro sfumatura, dalla carta al nero; dal fondo esce il nastrino rosso che segna una pagina, con un piccolo elastico. Il titolo, Blank pages., sale lettera per lettera prendendo peso. Il pollice prova l’angolo una volta: il primo foglio si alza appena e ricade con un colpo che fa tremare i bordi e dondolare il nastrino; poi il blocco si distende e riempie lo schermo. Al clic su Open the archive la pagina si stacca di nuovo, il pollice prende l’angolo e il blocco si sfoglia di lato: i fogli girano attorno al bordo sinistro uno dopo l’altro, in meno di un secondo, e si vede il ventaglio delle pagine in volo. Ogni foglio è un fotogramma di un flip book: le lettere di Blank pages. affondano sotto la loro riga e si assottigliano, poi le lettere di Archive salgono, sorpassano di un capello e diventano più nere, mentre la carta passa dal chiaro allo scuro. Il blocco intanto scivola perché il foglio in cima resti fermo dove stava la pagina. Si ferma sulla pagina col nastrino con un piccolo colpo: il blocco si schiaccia di un pelo, i fogli sotto si stringono e tornano, il nastrino dondola. Poi si distende, riempie lo schermo e salgono il testo e il link per tornare. Al clic su Back to notebooks il pollice sfoglia all’indietro: i fogli ricadono sul blocco uno sopra l’altro, il titolo si smonta, e la prima pagina atterra in cima con il suo colpo.

Come funziona

Un blocco di fogli veri

Le due pagine sono il primo e l’ultimo foglio di una pila di elementi uno sopra l’altro, ognuno grande come lo schermo, con lo z-index che scende. Lo script aggiunge in mezzo SHEETS fogli finti e tre fogli sotto l’ultima pagina, il resto del blocco. Ogni foglio ha un bordo di un pixel fatto con box-shadow: 0 0 0 1px, che non cambia le misure. Quando il blocco è a tutto schermo i fogli stanno tutti a zero e si vede solo il primo.

I fotogrammi del flip book

Il foglio k è il fotogramma f = k / (SHEETS + 1). Il suo colore è un miscuglio fra la carta e il nero in proporzione f, e la scritta passa da nera a chiara a metà. Le lettere del titolo vecchio sono spostate in giù di q² × 1,3 em e alleggerite, quelle del titolo nuovo arrivano dal basso con una curva back.out calcolata a mano (sorpassano di un capello) e passano da 130 a 600 di peso. Ogni lettera ha il suo ritardo, quindi le parole si smontano e si montano da sinistra a destra. Le lettere stanno in una maschera con overflow: hidden, così spariscono sotto la riga.

Il pollice

Il blocco rimpicciolisce a LIFT e i fogli si spostano di i × SPREAD pixel a destra e un po’ meno in basso, con mezzo pixel di disordine. Poi ogni foglio gira attorno al bordo sinistro fino a rotateY(90°), di taglio, con transformPerspective di 1,4 volte la larghezza e un’ombra che si scurisce mentre gira; arrivato a 90 gradi sparisce. Le partenze sono distribuite su RIFFLE secondi con una curva che rallenta appena verso la fine. Il contenitore dei fogli segue la somma delle rotazioni, così il foglio in cima resta fermo dove stava la pagina.

Il colpo e il nastrino

Quando l’ultimo foglio è andato, il blocco si schiaccia dell’1,4 % in 0,07 secondi e torna con elastic.out(1, 0.35); i fogli sotto si avvicinano a quello in cima e si riallargano con un elastico, il nastrino dà un colpo di lato e dondola con elastic.out(1, 0.2). Il nastrino è dentro la seconda pagina, appeso sotto il suo bordo: con il blocco a tutto schermo resta fuori dal palco, quando il blocco si stacca esce da solo e segna dove il pollice si fermerà. KNOCK regola la forza di tutto il colpo.

Regia, telefono e movimento ridotto

Ogni passaggio è una timeline sola con le etichette lift, catch, riffle, knock e close, e timeScale per SPEED. Le partenze dei fogli si calcolano in numeri e non con etichette annidate. Un clic che arriva mentre il blocco si sfoglia aspetta in coda. I due titoli si adattano alla larghezza dello schermo e lo spostamento dei fogli si riduce sugli schermi stretti. Con il movimento ridotto i fogli in mezzo non si vedono mai e le due pagine si scambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SHEETS`	script.js	`12`	Quanti fogli ci sono fra le due pagine: ognuno è un fotogramma del flip book. Più fogli, sfogliata più fitta e titolo più morbido.
`RIFFLE`	script.js	`0.8`	I secondi che il pollice impiega a passare tutto il blocco.
`LIFT`	script.js	`0.84`	Quanto resta grande il blocco mentre si sfoglia: 1 = non si stacca mai dallo schermo.
`SPREAD`	script.js	`3`	Di quanti pixel ogni foglio sporge da quello sopra: il bordo a ventaglio del blocco. 0 = fogli pari.
`KNOCK`	script.js	`1`	La forza del colpo quando il blocco si ferma: 0 = si ferma e basta, 2 = un colpo deciso.
`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 che parla di carta e di libri: una casa editrice, una rivista, una cartoleria o una legatoria, il portfolio di un illustratore, l’archivio di un giornale, il passaggio fra un elenco e la scheda di un libro. Funziona bene fra una pagina chiara e una scura.

Sul telefono

La stessa sfogliata con le misure adattate: il blocco diventa un quaderno alto e stretto, i fogli sporgono un po’ meno e i titoli si stringono fino a stare nella larghezza dello schermo. Un tocco sul link lo sfoglia e lo risfoglia indietro.

Con il movimento ridotto

Niente si sposta e niente gira: i fogli in mezzo non si vedono, la prima pagina svanisce mentre sotto c’è già la seconda col titolo al suo posto, poi compaiono il testo e il link; al ritorno la prima pagina torna in dissolvenza.

Trappole

Le partenze dei fogli erano scritte come etichette annidate (riffle+=0.12 e poi +=0.34): GSAP legge solo il primo spostamento, e il comando che nasconde il foglio a fine giro partiva insieme al giro. Ogni foglio spariva appena cominciava a girare e la sfogliata sembrava una dissolvenza. Le posizioni ora si calcolano in numeri.
Girando verso chi guarda, con la prospettiva i fogli diventavano più alti dello schermo e uscivano dal blocco: girano all’indietro, col bordo destro che si allontana, e restano dentro il blocco come le pagine di un libro aperto.
Con 0,2 secondi per foglio e un easing che parte piano, i fogli restavano quasi fermi e poi sparivano: con 0,34 secondi ce ne sono cinque o sei in volo insieme e il ventaglio si vede.
Il nastrino aveva un margine negativo di due pixel per attaccarsi al foglio, e con il blocco a tutto schermo ne restava una punta rossa in fondo al palco: ora parte esattamente dal bordo del foglio.
Con il movimento ridotto la prima pagina svaniva sul primo foglio finto, grigio chiaro, invece che sulla seconda pagina: i fogli in mezzo vanno nascosti fin dall’inizio.
Il titolo con il blocco interno a display: block era largo quanto la colonna, e il calcolo della misura del carattere non vedeva la parola: il titolo ha width: max-content.

Librerie

GSAP 3.15.0, Fraunces (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.