Otturatore a colonne
Transizioni
NuovaGratis
Torna alla libreria
La transizione a ribalta
Un cambio di pagina minimal a clic: la metà di sopra della pagina si stacca da una piega sottile e ricade verso di te come una paletta di un tabellone delle partenze. Sul retro della paletta c’è la metà di sotto della pagina nuova, che si posa con un piccolo colpo; la piega svanisce e il testo sale.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The split-flap 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>
<!-- the first page: its headline sits right across the crease, so the fold runs through its letters -->
<section class="page page--a is-on" data-page="a" aria-label="Rooms">
<header class="bar">
<span class="brand">Saltmoor</span>
<nav class="nav" aria-label="Pages">
<a href="#rooms" aria-current="page">Rooms</a>
<a href="#garden" data-go="b">Garden</a>
</nav>
</header>
<div class="hero">
<h1 class="headline" data-headline>Rooms</h1>
<div class="below">
<p class="lede">Eleven rooms above the harbour, each with a window on the boats.</p>
<a class="go go--next" href="#garden" data-go="b" data-autoclic>
<span class="go__text">See the garden</span>
<svg class="go__arrow" viewBox="0 0 22 12" aria-hidden="true"><path d="M1 6h19M15 1.5 20 6l-5 4.5"/></svg>
</a>
</div>
</div>
<footer class="foot">
<span>A small hotel by the sea</span>
<span>Harbour Road</span>
</footer>
</section>
<!-- the second page, dark: it is printed on the back of the flap and under it -->
<section class="page page--b" data-page="b" aria-label="Garden" aria-hidden="true">
<header class="bar">
<span class="brand">Saltmoor</span>
<nav class="nav" aria-label="Pages">
<a href="#rooms" data-go="a">Rooms</a>
<a href="#garden" aria-current="page">Garden</a>
</nav>
</header>
<div class="hero">
<h2 class="headline" data-headline>Garden</h2>
<div class="below">
<p class="lede">Breakfast under the fig tree, from eight until the bread runs out.</p>
<a class="go go--back" href="#rooms" data-go="a" data-autoclic>
<svg class="go__arrow" viewBox="0 0 22 12" aria-hidden="true"><path d="M21 6H2M7 1.5 2 6l5 4.5"/></svg>
<span class="go__text">Back to the rooms</span>
</a>
</div>
</div>
<footer class="foot">
<span>A small hotel by the sea</span>
<span>Harbour Road</span>
</footer>
</section>
<!-- the fold, built by the script: the half of the old page that stays, the flap, and the crease -->
<div class="fold" data-fold aria-hidden="true"></div>
<div class="crease" data-crease aria-hidden="true"></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.
29 valori da cambiare
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 a ribalta» da Animorio e adattala al mio sitoCosa fa
Il sito di un piccolo albergo sul mare inventato, Saltmoor, in due pagine: Rooms, color carta, e Garden, scura. Il titolo enorme in un serif sta proprio a cavallo di una piega orizzontale poco sopra la metà. All’apertura la piega si disegna dal centro ai bordi in terracotta, il testo sotto sale e la piega svanisce. Al clic su See the garden la piega ricompare; la metà di sopra della pagina si alza di qualche grado verso di te, esita un attimo e poi ricade sempre più veloce intorno alla piega, in 3D vero con la prospettiva, scurendosi mentre si mette di taglio. Sopra la piega intanto si scopre la metà di sopra della pagina scura, nell’ombra della paletta; quando la paletta passa la verticale si vede il suo retro, che è la metà di sotto della pagina nuova, e il titolo Garden si ricompone attraversando la piega. La paletta si posa con un colpo, rimbalza di pochi gradi due volte e sta ferma; la piega svanisce e la riga di testo e il link per tornare salgono uno dopo l’altro. Back to the rooms fa lo stesso giro in avanti, come un tabellone che gira sempre nello stesso verso.
Come funziona
Tre pezzi di due pagine
Le pagine vere non si tagliano mai. Per ogni passaggio lo script fa copie intere delle due pagine e le ritaglia con clip-path a metà, sulla variabile --cut: sotto sta la pagina nuova vera, sopra di lei la metà di sotto della vecchia (quella che verrà coperta), e sopra tutto la paletta. Nelle copie si tolgono data-go e data-autoclic e i link escono dal Tab.
La paletta a due facce
La paletta è un div con transform-style: preserve-3d e transform-origin sulla piega. La faccia davanti è la metà di sopra della pagina vecchia; quella dietro è la metà di sotto della pagina nuova, già girata di 180 gradi intorno alla piega e con backface-visibility hidden. Ruotando la paletta di −180 gradi (rotateX negativo porta il bordo alto verso chi guarda) la faccia dietro torna a zero e si legge dritta, al posto giusto.
Luce e ombra
Ogni pezzo ha sopra un velo nero con l’opacità calcolata dall’angolo: la faccia davanti si scurisce come SHADE·(1 − cos θ), quella dietro si schiarisce come SHADE·(1 + cos θ), la metà che sta per essere coperta si scurisce negli ultimi 80 gradi, e sulla metà nuova appena scoperta c’è un’ombra sfumata vicino alla piega che sparisce mentre la paletta scende.
La caduta e il colpo
Prima un sollevamento di 14 gradi con power2.out (l’esitazione), poi la caduta fino a 180 con power3.in, che accelera come un peso. All’arrivo la paletta torna su di KNOCK gradi in 0,13 secondi, ricade, poi un secondo rimbalzo di un quinto: due colpi che si smorzano. Intanto la piega svanisce e il testo sale con back.out.
Clic, telefono e movimento ridotto
Ogni passaggio è una timeline sola con timeScale per SPEED; un clic che arriva mentre la pagina gira aspetta in coda. Le misure (la piega al 47% dell’altezza, il titolo che entra nella larghezza) si rifanno a ogni ridimensionamento. Con il movimento ridotto la pagina vecchia svanisce e poi compare la nuova, senza che le due si vedano una attraverso l’altra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FOLD | script.js | 0.95 | I secondi che la paletta impiega a ricadere piatta. |
LIFT | script.js | 0.18 | I secondi in cui la paletta esita appena staccata dalla piega, prima di cadere. |
KNOCK | script.js | 9 | Di quanti gradi la paletta rimbalza quando si posa: 0 = si posa e basta. |
SHADE | script.js | 0.42 | Quanto si scurisce la paletta quando è di taglio (da 0 a 0.8). |
DEPTH | script.js | 1500 | La prospettiva in pixel: più piccola, la paletta esce di più dalla pagina. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per passare da una pagina all’altra in un sito sobrio con un titolo grande al centro: un albergo, un bed and breakfast, una stazione o un viaggio, un ristorante col menu del giorno, un portfolio con un progetto per pagina. Funziona bene alternando una pagina chiara e una scura.
Sul telefono
La stessa transizione con le misure adattate: il titolo si stringe fino a stare nello schermo, la piega resta poco sopra la metà e il testo va a capo sotto. Un tocco sul link la fa girare.
Con il movimento ridotto
Niente gira: la pagina vecchia svanisce e poi compare quella nuova in dissolvenza.
Trappole
- Con un velo che si scuriva in proporzione all’angolo, appena la paletta si alzava di pochi gradi tutta la metà di sopra diventava grigia di colpo: con 1 − cos θ la luce cambia quasi niente all’inizio e tanto vicino alla verticale, come una carta vera.
- La faccia dietro va girata di 180 gradi intorno alla piega, non al suo centro: girata intorno al centro, dopo il mezzo giro della paletta finiva fuori posto di mezza pagina.
- Con la prospettiva di 2400 pixel la paletta sembrava piatta, una tendina che si accorcia; a 1500 il bordo che viene verso chi guarda si allarga e si capisce che è una paletta.
- Le copie delle pagine si portavano dietro data-autoclic: il pilota automatico clicca tutti gli elementi segnati e avrebbe cliccato le copie. Nelle copie si tolgono data-autoclic e data-go.
- Con il movimento ridotto la prima versione incrociava le due pagine in dissolvenza e per un attimo i due titoli si leggevano uno sopra l’altro: ora la vecchia svanisce prima che arrivi la nuova.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
