La transizione dall'orecchia

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

Un cambio di pagina nello stile minimal: la pagina ha l'angolo in basso piegato a orecchia, come in un quaderno, e sotto si vede già la pagina dopo. Al clic l'angolo viene tirato e la piega attraversa tutta la pagina, piatta sul tavolo, girando un poco; la parte piegata mostra il retro della carta con la stampa che traspare al contrario. Dove la piega è passata c'è la pagina nuova, e il suo titolo si allarga dalla piega lettera dopo lettera.

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 dog-ear transition</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>
  <main class="stage" data-stage>
    <!-- three pages stacked like the leaves of a notebook: the one on top has its corner turned down -->
    <section class="page page--a" data-page="a" aria-label="Folded">
      <header class="bar">
        <span class="brand">Octavo</span>
        <nav class="nav" aria-label="Pages">
          <a href="#folded" aria-current="page">Folded</a>
          <a href="#sewn" data-go="b">Sewn</a>
          <a href="#bound" data-go="c">Bound</a>
        </nav>
      </header>
      <div class="hero">
        <h1 class="title" data-title>Folded.</h1>
        <p class="lede">One large sheet, folded three times: sixteen pages that already know their order.</p>
      </div>
      <footer class="foot">
        <span>A bindery in two rooms</span>
        <a class="turn" href="#sewn" data-go="b" data-autoclic>
          <span class="turn__text">Turn to Sewn</span>
          <svg class="turn__ear" viewBox="0 0 14 14" aria-hidden="true"><path d="M1.5 1.5h11v7l-4 4h-7z"/><path d="M12.5 8.5h-4v4"/></svg>
        </a>
      </footer>
    </section>

    <section class="page page--b" data-page="b" aria-label="Sewn">
      <header class="bar">
        <span class="brand">Octavo</span>
        <nav class="nav" aria-label="Pages">
          <a href="#folded" data-go="a">Folded</a>
          <a href="#sewn" aria-current="page">Sewn</a>
          <a href="#bound" data-go="c">Bound</a>
        </nav>
      </header>
      <div class="hero">
        <h2 class="title" data-title>Sewn.</h2>
        <p class="lede">Each section is sewn through its fold with linen thread, by hand, at one long bench.</p>
      </div>
      <footer class="foot">
        <span>A bindery in two rooms</span>
        <a class="turn" href="#bound" data-go="c" data-autoclic>
          <span class="turn__text">Turn to Bound</span>
          <svg class="turn__ear" viewBox="0 0 14 14" aria-hidden="true"><path d="M1.5 1.5h11v7l-4 4h-7z"/><path d="M12.5 8.5h-4v4"/></svg>
        </a>
      </footer>
    </section>

    <section class="page page--c" data-page="c" aria-label="Bound">
      <header class="bar">
        <span class="brand">Octavo</span>
        <nav class="nav" aria-label="Pages">
          <a href="#folded" data-go="a">Folded</a>
          <a href="#sewn" data-go="b">Sewn</a>
          <a href="#bound" aria-current="page">Bound</a>
        </nav>
      </header>
      <div class="hero">
        <h2 class="title" data-title>Bound.</h2>
        <p class="lede">Cloth boards, a flat spine, and paper soft enough to keep a corner turned down.</p>
      </div>
      <footer class="foot">
        <span>A bindery in two rooms</span>
        <a class="turn" href="#folded" data-go="a" data-autoclic>
          <span class="turn__text">Back to Folded</span>
          <svg class="turn__ear" viewBox="0 0 14 14" aria-hidden="true"><path d="M1.5 1.5h11v7l-4 4h-7z"/><path d="M12.5 8.5h-4v4"/></svg>
        </a>
      </footer>
    </section>

    <!-- the folded part of the top page: its back, with the print showing through, and the light on the crease -->
    <div class="fold" data-fold aria-hidden="true">
      <div class="flap" data-flap>
        <div class="flap__ghost" data-ghost></div>
        <div class="flap__shade" data-shade></div>
      </div>
    </div>

    <!-- the turned-down corner is also a button -->
    <button class="corner" type="button" data-corner aria-label="Turn the page"></button>
  </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.

41 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 dall'orecchia» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di una piccola legatoria inventata, Octavo, in tre pagine e quasi niente: Folded. su carta color crema, Sewn. su nero, Bound. su grigio pietra; un titolo enorme in Archivo col punto finale vermiglio, una riga di testo e in fondo il link alla pagina dopo. All'apertura le lettere di Folded. arrivano strettissime e sottili e si allargano una dopo l'altra prendendo peso, il punto cade per ultimo e poi l'angolo in basso a destra si piega a orecchia con un piccolo rimbalzo: si vede il retro della carta, un poco più scuro, con la sua ombra, e nel triangolo lasciato scoperto c'è già il nero della pagina dopo. Col puntatore vicino all'angolo l'orecchia lo segue: la punta della carta va dove sta il puntatore e la piega gira con lui; allontanandosi torna giù. Al clic su Turn to Sewn (o sull'angolo) la carta viene presa e sollevata un attimo, poi tirata: la piega corre in diagonale su tutta la pagina girando di quasi trenta gradi, la parte piegata si sdraia sulla pagina vecchia e mostra il retro con il titolo che traspare al contrario, e dietro la piega resta scoperta la pagina nuova. Il titolo nuovo si allarga proprio dalla piega: ogni lettera, quando la piega le passa sopra, parte stretta e sottile e si allarga con un elastico misurato, spingendo le vicine; il punto vermiglio cade alla fine. Poi la pagina nuova piega anche lei il suo angolo, e sotto c'è la pagina che viene dopo. Le tre pagine girano in tondo; i nomi in alto portano a quella scelta.

Come funziona

Una piega è una riflessione

Una pagina piegata piatta si disegna con due ritagli e uno specchio. Si sceglie una direzione u (dall'angolo verso l'interno della pagina) e la distanza d della piega dall'angolo, e per ogni punto si misura g, quanto è lontano dall'angolo lungo u. La pagina in cima tiene, con clip-path polygon, solo la parte con g maggiore di d; la falda è una copia grande quanto la pagina, ritagliata sulla parte con g minore di d e poi specchiata sulla piega con una sola matrix() in CSS. Il ritaglio di un rettangolo con un semipiano è il classico Sutherland-Hodgman su quattro vertici.

L'angolo, la punta e il puntatore

Tutto lo stato è un oggetto con due numeri: s, quanto si è spostata la punta dell'angolo, e phi, la sua direzione; la piega sta a metà di s. L'orecchia a riposo ha phi 45 e s uguale a EAR per la radice di due, così i due lati piegati sono lunghi EAR. Col puntatore vicino all'angolo s e phi si calcolano dalla posizione del puntatore (la punta va proprio lì), con phi fra 20 e 70 gradi, e un tween di GSAP li insegue. Un solo ticker ridisegna la piega quando s o phi cambiano.

Il retro della carta

La falda ha il colore del retro della pagina e dentro una copia della pagina stessa (cloneNode, senza link né attributi) con opacità SHOW_THROUGH: lo specchio della piega la rovescia da sola, e la stampa traspare al contrario come in un foglio vero. Sopra c'è una fascia ruotata con un gradiente che parte dalla piega: un filo scuro di un pixel (la piega), un lampo chiaro e un'ombra leggera verso la punta. L'ombra della falda è un drop-shadow sul contenitore, che si spegne mentre la piega esce dalla pagina.

Il titolo che si allarga dalla piega

Il titolo nuovo è diviso in lettere inline-block, con font-stretch e font-weight legati a --w e --g (Archivo va da 62 a 125 di larghezza). Sotto la pagina vecchia le lettere aspettano a --w 62 e --g 220. Quando parte il cambio, per ogni lettera si calcola in anticipo il momento in cui la piega la scopre, campionando la stessa curva power2.inOut della tirata, e lì si mette nella timeline il suo tween con back.out(2): ogni lettera si allarga quando la piega le passa sopra. Il titolo si misura con le lettere a 106, sopra la punta del rimbalzo.

Regia, telefono e movimento ridotto

Ogni cambio è una timeline sola con le etichette grab, pull e turned, e timeScale per SPEED: presa, tirata, scambio delle pagine quando la piega è uscita, poi la pagina nuova piega il suo angolo 2,5 pixel oltre il posto e torna. Un clic che arriva mentre la pagina gira aspetta in coda. Sul telefono è la stessa piega su uno schermo alto, col tocco sul link o sull'angolo. Con il movimento ridotto non si piega niente: la pagina vecchia svanisce e le parole nuove compaiono in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`EAR`	script.js	`46`	Quanto è grande l'orecchia: i pixel di ciascuno dei due lati dell'angolo piegato.
`PULL`	script.js	`1.3`	I secondi che la piega impiega ad attraversare la pagina, dall'angolo al lato opposto.
`SWEEP`	script.js	`28`	Di quanti gradi gira la piega mentre la pagina viene tirata: 0 = resta in diagonale, di più = la pagina si gira di lato come in un libro.
`PEEL`	script.js	`150`	Per quanti pixel l'angolo segue il puntatore quando ci si avvicina: 0 = resta fermo.
`SHOW_THROUGH`	script.js	`0.07`	Quanto la stampa traspare sul retro della carta: 0 = carta spessa, 0.15 = carta velina.
`WIDEN`	script.js	`0.95`	I secondi che ogni lettera del titolo nuovo impiega ad allargarsi dalla piega.
`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 legatoria o una cartoleria, una casa editrice piccola, una rivista, un blog personale fatto come un quaderno, un portfolio di illustrazione o di grafica editoriale. L'orecchia nell'angolo è anche un invito a voltare pagina, quindi va bene per una storia a capitoli o un menu da sfogliare.

Sul telefono

La stessa piega con le misure adattate: lo schermo alto fa correre la piega più in verticale, i titoli si stringono fino a stare nella larghezza anche nel punto più largo del rimbalzo e il link in fondo si sposta per lasciare posto all'orecchia. Un tocco sul link o sull'angolo gira la pagina; l'angolo che segue il puntatore c'è solo col mouse.

Con il movimento ridotto

Niente si piega né si muove: l'orecchia resta disegnata ferma nell'angolo, la pagina vecchia svanisce sulla pagina nuova vuota e poi le sue parole compaiono in dissolvenza, col titolo già al suo posto.

Trappole

Una variabile chiamata top in uno script normale dà errore: window.top esiste già e non si può ridichiarare con let. La pagina in cima si chiama topKey.
La piega è piatta, quindi niente 3D né perspective: una pagina che si piega sul tavolo è una riflessione in 2D. Con rotateY e preserve-3d le due metà si vedrebbero di taglio e la piega diagonale non verrebbe.
La falda specchiata cade oltre il bordo dello schermo quando la piega passa la metà: la tirata finisce quando la piega ha superato l'angolo opposto (d maggiore della proiezione della pagina su u), non quando la punta esce dallo schermo, altrimenti resta un triangolo della pagina vecchia.
Il clip-path ritaglia anche i clic: sotto l'orecchia la pagina di sotto riceverebbe il tocco. Le pagine che non sono in cima hanno pointer-events none e inert, e l'angolo è un pulsante a triangolo sopra a tutto.
Con l'orecchia che segue il puntatore, il puntatore sul link lo faceva coprire dalla carta. Sopra il link l'angolo non segue più il puntatore e si alza solo di poco.
Un tween per lettera fatto partire quando la piega la scopre (controllandolo a ogni fotogramma) non rallenterebbe con SPEED e col banco: il momento si calcola prima, campionando la curva della tirata, e il tween entra nella timeline.
Nel movimento ridotto la dissolvenza incrociata di due titoli enormi li mescola in una parola sola: la pagina nuova compare vuota e le parole arrivano dopo.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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