Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione a sipario di lettere
Un cambio di pagina minimal a clic per un teatro: il titolo della pagina nuova cade sulla pagina come un sipario di lamelle scure, una per lettera, con la lettera stretta e alta in piedi su ognuna. Le lamelle toccano terra e rimbalzano, poi le lettere si staccano, si rimpiccioliscono e si allargano fino a diventare il titolo.
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 letter curtain transition</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the first page, light -->
<section class="page page--a is-on" data-page="a" aria-label="Tonight">
<header class="bar">
<span class="brand">Velde Theatre</span>
<nav class="nav" aria-label="Pages">
<a href="#tonight" aria-current="page">Tonight</a>
<a href="#season" data-go="b">Season</a>
</nav>
</header>
<div class="hero hero--a" data-hero>
<p class="kicker">Tonight at eight</p>
<h1 class="big">The Glass Hour</h1>
<a class="go go--next" href="#season" data-go="b" data-autoclic>
<span>See the season</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>
<footer class="foot">
<span>Doors open at seven</span>
<span>Box office</span>
</footer>
</section>
<!-- the second page, dark: its title is the curtain -->
<section class="page page--b" data-page="b" aria-label="Season" aria-hidden="true">
<header class="bar">
<span class="brand">Velde Theatre</span>
<nav class="nav" aria-label="Pages">
<a href="#tonight" data-go="a">Tonight</a>
<a href="#season" aria-current="page">Season</a>
</nav>
</header>
<div class="hero hero--b" data-hero>
<h2 class="title" data-title>SEASON</h2>
<ul class="shows">
<li><span class="shows__name">The Glass Hour</span><span class="shows__when">November</span></li>
<li><span class="shows__name">Salt and Iron</span><span class="shows__when">January</span></li>
<li><span class="shows__name">A Quiet Year</span><span class="shows__when">March</span></li>
</ul>
<a class="go go--back" href="#tonight" 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>Back to tonight</span>
</a>
</div>
<footer class="foot">
<span>Doors open at seven</span>
<span>Box office</span>
</footer>
</section>
<!-- the curtain, built by the script: one slat for each letter of the title, and the letters -->
<div class="curtain" data-curtain 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.
34 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 sipario di lettere» da Animorio e adattala al mio sitoCosa fa
Il sito di un teatro inventato, Velde Theatre, in due pagine: Tonight, chiara, con lo spettacolo della sera in un carattere strettissimo, e Season, nera, col titolo SEASON, tre spettacoli su righe sottili coi mesi in arancio e il link per tornare. Al clic su See the season dall’alto cadono sei lamelle scure alte quanto lo schermo, una per ogni lettera di SEASON, a partire dalla colonna in cui si è cliccato e poi verso i lati; su ognuna sta in piedi la sua lettera chiara, strettissima, pesante e stirata in altezza. Ogni lamella cade accelerando, tocca terra, rimbalza di una decina di pixel (sotto si vede un filo di pagina chiara) e si posa, e la lettera si schiaccia di un pelo. Quando l’ultima è a terra tutto lo schermo è nero come la pagina nuova: le lamelle spariscono senza che si veda e le lettere si staccano, volano al loro posto nel titolo rimpicciolendosi, allargandosi e perdendo peso, ognuna col suo ritmo; intanto la testata, gli spettacoli e il link salgono. Al clic su Back to tonight il resto della pagina scende via, le lettere del titolo crescono di nuovo strette e alte nelle loro lamelle e il sipario si alza, una lamella dopo l’altra da sinistra, sulla pagina chiara.
Come funziona
Una lamella e una lettera per lettera
Il titolo è diviso in lettere e per ognuna lo script fa una lamella (un div largo un sesto dello schermo, nero come la pagina nuova) e una lettera separata in un livello sopra. Lamella e lettera cadono con lo stesso tween di y, quindi sembrano una cosa sola; ma la lettera non sta dentro la lamella, così può volare via quando le lamelle spariscono.
La stessa lettera con due regolazioni
Ogni lettera è un elemento per GSAP (dove sta il centro e quanto è scalato) con dentro uno span centrato dal CSS con translate(−50%, −50%), il cui font-stretch e font-weight vengono dalle variabili --w e --g. Sulla lamella è Roboto Flex a larghezza 25 e peso 760, stirata in altezza con scaleY; nel titolo larghezza 100 e peso 560. Il centro del titolo si misura sui riquadri delle lettere vere (line-height 1, niente spaziatura), quindi alla fine il cambio con il titolo vero non si vede.
Scalare dal punto giusto
Il contenitore della lettera ha la sua larghezza, e GSAP scala per default dal suo centro: la lettera, disegnata intorno all’angolo in alto a sinistra, scivolava via scalando. Con transformOrigin a 0 0 scala proprio dal centro della lettera. E siccome il riquadro di una riga non è centrato sulle maiuscole, la posizione sulla lamella sposta la lettera di quanto serve perché il centro della maiuscola stia a metà schermo anche stirata.
Caduta, rimbalzo e volo
Ogni lamella cade in DROP secondi con power3.in, sfalsata di STAGGER per ogni colonna di distanza dal clic; arrivata torna su di BOUNCE pixel e ricade, e la lettera fa un piccolo schiacciamento. Poi le pagine si scambiano sotto il sipario, le lamelle si nascondono e le lettere volano con expo.inOut per la posizione, power3.inOut per la scala e power2.inOut per larghezza e peso, ognuna un poco dopo l’altra.
Clic, telefono e movimento ridotto
Ogni passaggio è una timeline sola con timeScale per SPEED, e un clic che arriva a metà aspetta in coda. Le misure si rifanno a ogni ridimensionamento: lamelle, grandezza delle lettere, stiramento (al massimo STRETCH) e posizioni del titolo. Con il movimento ridotto le pagine si scambiano in dissolvenza, una dopo l’altra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DROP | script.js | 0.55 | I secondi che una lamella impiega a cadere. |
STAGGER | script.js | 0.06 | I secondi fra una lamella e la successiva. |
BOUNCE | script.js | 10 | Di quanti pixel una lamella rimbalza toccando terra: 0 = si posa e basta. |
STRETCH | script.js | 2.2 | Quanto si può stirare in altezza una lettera del sipario, al massimo (1 = per niente). |
FLY | script.js | 0.95 | I secondi che le lettere impiegano a volare nel titolo. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per entrare in una pagina che ha un titolo forte e corto: il programma di un teatro, un cinema, un festival o un concerto, la pagina dei biglietti, la sezione di un portfolio, il menu di un locale. Funziona meglio con titoli fra quattro e otto lettere e una pagina nuova scura.
Sul telefono
La stessa transizione con le misure adattate: le sei lamelle sono strette, le lettere più piccole e stirate di più, il titolo si stringe nella larghezza dello schermo e gli spettacoli vanno sotto.
Con il movimento ridotto
Niente cade e niente vola: la pagina vecchia svanisce e poi compare la nuova in dissolvenza.
Trappole
- Le lettere scalavano dal centro del loro contenitore e non da quello della lettera: stirate sulle lamelle finivano in cima allo schermo, tagliate. Il contenitore scala da 0 0, dove sta il centro della lettera.
- Il riquadro di una riga di testo ha sotto lo spazio per le discendenti: centrato a metà schermo, una maiuscola stirata due volte stava troppo in alto. La lettera si sposta di quanto il centro della maiuscola (misurato con un elemento vuoto sulla linea di base) sta sopra il centro del riquadro, moltiplicato per lo stiramento.
- Il piccolo schiacciamento all’atterraggio era sullo span interno: il transform in linea di GSAP cancellava il translate(−50%, −50%) del CSS e la lettera saltava. Lo schiacciamento va sul contenitore, che è già di GSAP.
- Il bordo sopra l’elenco degli spettacoli compariva prima delle righe, una riga sottile fra le lettere in volo: sale insieme all’elenco intero.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 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.
