La transizione sul retro

Transizioni, 3DGSAP, Solo CSSMediaPeso compresso: Demo 7,3 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal: la pagina è un foglio stampato sui due lati, appoggiato sul tavolo. Al clic si alza dall'angolo, si gira in 3D e la pagina nuova è quella stampata sul retro; scende su un velo d'aria, scivola gli ultimi pixel al suo posto e si posa con un piccolo rimbalzo, mentre il titolo prende peso come inchiostro sotto la pressa.

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 flip-side transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <div class="deck" data-deck>
      <!-- on the table, under the sheet: its shadow and the two hairlines of air pushed out when it lands -->
      <span class="shadow" data-shadow aria-hidden="true"></span>
      <span class="air" data-air aria-hidden="true"></span>
      <span class="air air--soft" data-air aria-hidden="true"></span>

      <!-- the lifter hinges on the corner that stays down; the sheet turns on its middle; the two pages are its two sides -->
      <div class="lifter" data-lifter>
        <div class="sheet" data-sheet data-on="a">
          <section class="face face--a" data-page="a" aria-label="Prints">
            <header class="bar">
              <span class="brand">Folium</span>
              <nav class="nav" aria-label="Pages">
                <a href="#prints" aria-current="page">Prints</a>
                <a href="#studio" data-go="b">Studio</a>
              </nav>
            </header>
            <div class="hero">
              <p class="kicker" data-rise>Letterpress on cotton paper</p>
              <h1 class="big" data-big>Recto.</h1>
              <a class="go" href="#studio" data-go="b" data-autoclic data-rise>
                <span class="leaf" aria-hidden="true"><span class="leaf__in"><span class="leaf__f"></span><span class="leaf__b"></span></span></span>
                <span class="go__text">Turn it over</span>
              </a>
            </div>
            <footer class="foot">
              <span>Cards and prints, set by hand</span>
              <span>Since 2014</span>
            </footer>
            <span class="trim trim--tl" aria-hidden="true"></span>
            <span class="trim trim--tr" aria-hidden="true"></span>
            <span class="trim trim--bl" aria-hidden="true"></span>
            <span class="trim trim--br" aria-hidden="true"></span>
            <span class="face__shade" aria-hidden="true"></span>
          </section>

          <section class="face face--b" data-page="b" aria-label="Studio" aria-hidden="true">
            <header class="bar">
              <span class="brand">Folium</span>
              <nav class="nav" aria-label="Pages">
                <a href="#prints" data-go="a">Prints</a>
                <a href="#studio" aria-current="page">Studio</a>
              </nav>
            </header>
            <div class="hero">
              <p class="kicker" data-rise>The other side</p>
              <h2 class="big big--b" data-big>Verso.</h2>
              <div class="below">
                <p class="lede" data-rise>Every card has two sides. This is the quiet one: two old presses, a long table and four people who still set the type by hand.</p>
                <a class="go" href="#prints" data-go="a" data-autoclic data-rise>
                  <span class="leaf" aria-hidden="true"><span class="leaf__in"><span class="leaf__f"></span><span class="leaf__b"></span></span></span>
                  <span class="go__text">Back to the front</span>
                </a>
              </div>
            </div>
            <footer class="foot">
              <span>Open on Thursdays</span>
              <span>Since 2014</span>
            </footer>
            <span class="trim trim--tl" aria-hidden="true"></span>
            <span class="trim trim--tr" aria-hidden="true"></span>
            <span class="trim trim--bl" aria-hidden="true"></span>
            <span class="trim trim--br" aria-hidden="true"></span>
            <span class="face__shade" aria-hidden="true"></span>
          </section>
        </div>
      </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.

30 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 sul retro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di una piccola stamperia a caratteri mobili inventata, Folium, in due pagine e quasi niente: un foglio color carta con un titolo enorme in Newsreader, Recto., e sul retro una pagina nera con Verso.; un solo accento blu, il punto dei due titoli, e quattro crocini di taglio sottili negli angoli. All'apertura la vista è un po' indietro e il foglio viene posato sul tavolo: scende dall'alto un po' storto, la sua ombra si stringe man mano che si avvicina, e gli ultimi millimetri li fa sull'aria che resta sotto. L'aria lo frena e lo rispinge su di un capello, il foglio scivola al suo posto con un sorpasso di un pixel, due linee sottili escono da sotto i bordi e si allargano svanendo, e le lettere del titolo prendono peso una dopo l'altra, dal lato che ha toccato per primo. Poi la vista torna avanti e il foglio riempie lo schermo. Al clic su Turn it over il quadratino del link si gira e mostra il suo retro blu; una mano invisibile prende il foglio per l'angolo in basso a destra: l'angolo si alza per primo, con l'angolo opposto ancora giù, mentre la vista fa un passo indietro e si vede il tavolo. Poi tutto il foglio si alza e si gira verso sinistra, si torce di qualche grado come se fosse tenuto per l'angolo, passa di taglio (la sua ombra diventa una riga) e mostra il retro nero. Scende di nuovo sull'aria, con lo stesso rimbalzo e la stessa scivolata, e Verso. passa da sottile a nero pieno; sotto salgono il testo e il link per tornare. Al clic su Back to the front la mano prende l'angolo in basso a sinistra e il foglio si gira dall'altra parte.

Come funziona

Un foglio con due facce

Le due pagine sono le due facce dello stesso foglio: due section una sull'altra dentro un contenitore con transform-style: preserve-3d, ognuna con backface-visibility: hidden. La faccia che sta sotto ha rotateY(180deg), quindi si vede solo quando il foglio ha girato di mezzo giro. A fine giro il foglio torna a zero e le due facce si scambiano il ruolo (l'attributo data-on): la pagina in vista non ha nessuna rotazione 3D e le scritte restano nitide.

L'angolo che si alza per primo

Il foglio sta dentro un secondo contenitore, il sollevatore, con il transform-origin nell'angolo che resta giù (in alto a sinistra all'andata, in alto a destra al ritorno). Il sollevatore ruota di PINCH gradi su due assi e l'angolo opposto sale; poi torna a zero mentre il foglio, che ruota sul suo centro, si alza di HEIGHT e gira di 180 gradi. La vista intanto fa un passo indietro (scale a LIFT) per mostrare il tavolo.

Il volo

Durante il giro il foglio sale con power2.out e ricade con power1.in, si torce di TWIST gradi e torna, si inclina un poco all'indietro come una vela e scivola di lato. La prospettiva è 3,2 volte il lato più lungo dello schermo, e l'altezza massima è calcolata perché il bordo che viene verso chi guarda, quando il foglio è di taglio, non diventi più alto del palco. L'ombra sul tavolo è un rettangolo sfocato che si sposta e si allarga con l'altezza e si stringe col coseno della rotazione: di taglio è una riga.

Il velo d'aria

Il foglio arriva a pochi pixel dal tavolo, un po' fuori posto e un po' storto. L'altezza va a zero con elastic.out(1, 0.42): l'aria lo frena, lo spinge su di un capello e lo lascia posare. La posizione e la torsione tornano con back.out, che sorpassa di circa un pixel. Due cornici di un pixel, sotto il foglio, si allargano e svaniscono: l'aria che esce dai bordi. AIR regola tutto insieme, 0 = il foglio si posa e basta.

Il titolo sotto la pressa, telefono e movimento ridotto

Le lettere del titolo nuovo partono sottili (font-weight 200 o 300) e prendono il loro peso una dopo l'altra dal lato che ha toccato per primo, con un piccolo colpo in giù di due pixel e un elastico. Ogni passaggio è una timeline sola, con timeScale per SPEED; un clic che arriva durante il giro aspetta in coda. Sul telefono il foglio è alto e stretto e i titoli si adattano alla larghezza. Con il movimento ridotto niente gira: la pagina vecchia svanisce e compare quella nuova.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LIFT`	script.js	`0.78`	Quanto resta grande il foglio mentre è in aria: la vista fa un passo indietro per mostrare il tavolo. Più di 0.8 e il foglio, di taglio, uscirebbe dal palco.
`TURN`	script.js	`1.1`	I secondi che il foglio impiega a girarsi.
`HEIGHT`	script.js	`0.08`	Quanto si alza il foglio, in proporzione alla larghezza della pagina (lo script lo tiene comunque dentro il palco).
`TWIST`	script.js	`5`	I gradi di cui si torce mentre gira, come se fosse tenuto per l'angolo.
`AIR`	script.js	`1`	Il velo d'aria su cui atterra: quanto scivola, quanto rimbalza e quanto si allargano le due linee d'aria. 0 = si posa e basta.
`SPEED`	script.js	`1`	La velocità di tutto: 2 è il doppio, 0.5 la metà.

Provali nel Playground

Quando usarla

Per passare fra due pagine che sono l'una il rovescio dell'altra: il davanti e il dietro di un biglietto o di un invito, un prodotto e la sua scheda tecnica, il menù del pranzo e quello della cena, il fronte e il retro di una tessera, una stamperia, una cartoleria, il portfolio di un grafico. Funziona bene fra una pagina chiara e una scura.

Sul telefono

Lo stesso giro con le misure adattate: il foglio è alto e stretto, i titoli si stringono fino a stare nella larghezza dello schermo e la prospettiva si calcola sul lato lungo, quindi il foglio non esce mai dal palco. Un tocco sul link lo gira e lo rigira.

Con il movimento ridotto

Niente si alza e niente gira: la pagina vecchia svanisce, la nuova compare al suo posto col titolo già pieno, poi compaiono il testo e il link; al ritorno lo stesso al contrario.

Trappole

Le linee d'aria erano fatte con fromTo dentro la timeline: fromTo applica subito i valori di partenza, e le due cornici comparivano intorno al foglio già al clic, molto prima dell'atterraggio. Ora hanno immediateRender: false.
Con la prospettiva il bordo del foglio che viene verso chi guarda, quando il foglio è di taglio, diventava più alto dello schermo e veniva tagliato: l'altezza del volo si limita da sola a quella che resta dentro il palco.
Le linee d'aria partivano dal centro mentre il foglio atterrava spostato di lato, e una delle due correva sopra il bordo del foglio come un doppio contorno: ora seguono la posizione e la torsione del foglio.
All'ingresso l'ombra c'era già quando il foglio era ancora trasparente, e sul tavolo compariva un rettangolo grigio da solo: l'opacità dell'ombra si moltiplica per quella del foglio.
Nelle prove fotogramma per fotogramma la faccia che arriva dal retro, saltando a metà giro, a volte veniva disegnata in ritardo e si vedeva l'ombra attraverso il foglio: le due facce hanno will-change: transform, così restano sempre pronte sul loro livello.

Librerie

GSAP 3.15.0, Newsreader (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 15 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.