Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione dentro la O
Un cambio di pagina nello stile minimal: la pagina è una parola enorme e la sua O è color vermiglio. Al clic l’occhiello della O si apre come una lente e dentro c’è già la pagina dopo, piccolissima, con la sua parola; poi la vista vola dentro la O, che cresce e scivola al centro finché il buco è tutto lo schermo.
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 through-the-O 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>
<!-- the first page: one huge word, and the next page waits inside its O -->
<section class="page page--a is-on" data-page="a" aria-label="Shop">
<header class="bar">
<span class="brand">Orra</span>
<nav class="nav" aria-label="Pages">
<a class="w" href="#shop" aria-current="page"><span class="w__t">Shop</span></a>
<a class="w" href="#frames" data-go="b"><span class="w__t">Frames</span></a>
</nav>
</header>
<h1 class="big" data-big aria-label="Look">L<span class="o" data-o>o<i class="o__base"></i></span>ok</h1>
<div class="below" data-late>
<p class="lede">Hand-made frames and ground lenses, from one small workshop.</p>
<a class="go w" href="#frames" data-go="b" data-autoclic>
<span class="w__t">See the frames</span>
<svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22M18.5 1.5 23.5 6l-5 4.5"/></svg>
</a>
</div>
<footer class="foot" data-late>
<span>Eyewear and lenses</span>
<span>Since 1968</span>
</footer>
</section>
<!-- the second page: dark, with its own O to go back through -->
<section class="page page--b" data-page="b" aria-label="Frames" aria-hidden="true">
<header class="bar">
<span class="brand">Orra</span>
<nav class="nav" aria-label="Pages">
<a class="w" href="#shop" data-go="a"><span class="w__t">Shop</span></a>
<a class="w" href="#frames" aria-current="page"><span class="w__t">Frames</span></a>
</nav>
</header>
<h2 class="big" data-big aria-label="Round">R<span class="o" data-o>o<i class="o__base"></i></span>und</h2>
<ul class="list" aria-label="Round frames">
<li class="row" data-late><span class="row__rule" data-rule></span><span class="row__name">Round 46</span><span class="row__kind">Tortoise acetate</span><span class="row__size">46 mm</span></li>
<li class="row" data-late><span class="row__rule" data-rule></span><span class="row__name">Round 49</span><span class="row__kind">Black acetate</span><span class="row__size">49 mm</span></li>
<li class="row" data-late><span class="row__rule" data-rule></span><span class="row__name">Round 52</span><span class="row__kind">Crystal</span><span class="row__size">52 mm</span></li>
</ul>
<div class="below below--b" data-late>
<a class="go go--back w" href="#shop" data-go="a" data-autoclic>
<svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M25 6H3M7.5 1.5 2.5 6l5 4.5"/></svg>
<span class="w__t">Back to the shop</span>
</a>
</div>
</section>
</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.
38 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 dentro la O» da Animorio e adattala al mio sitoCosa fa
Il sito di una piccola bottega di occhiali inventata, Orra, in due pagine: la prima color carta con la parola Look enorme, la seconda quasi nera con la parola Round; in tutte e due la O è vermiglia. All’apertura le lettere di Look salgono una dopo l’altra, strette, e si allargano sull’asse della larghezza con un elastico; poi arrivano la riga di testo e il link. Al clic su See the frames il testo e il piede scendono di qualche pixel e svaniscono, e la parola resta sola. L’occhiello della O, il buco dentro la lettera, si apre dal centro come una lente: dentro c’è la pagina scura, piccolissima, con la parola Round che attraversa la lente. La pagina fa un mezzo passo indietro, poi la vista vola dentro la O: la pagina color carta cresce intorno all’occhiello, sempre più in fretta, e intanto lo porta al centro dello schermo; la pagina dentro la lente cresce con lui e arriva alla sua misura un attimo prima che il buco copra anche gli angoli. Arrivati, le lettere di Round prendono fiato sulla larghezza a partire dalla O, le righe dell’elenco delle montature si disegnano e il link per tornare sale. Al clic su Back to the shop si torna indietro passando dentro la O di Round, con la pagina color carta piccolissima nella lente.
Come funziona
L’occhiello letto sull’inchiostro
Il buco della lettera non si indovina: lo script disegna una o su un canvas con lo stesso carattere (Archivo, peso 700, larghezza expanded), parte dal centro della lettera e cammina a destra, a sinistra, in su e in giù finché trova l’inchiostro. Poi cammina sulla diagonale per capire quanto l’occhiello è quadrato e ne fa una superellisse, |x/a|^n + |y/b|^n = 1. Le misure si tengono in em, così valgono per ogni grandezza della parola; la posizione vera della O sulla pagina la dà una scatoletta vuota appoggiata sulla sua linea di base.
La lente in pixel
La pagina nuova sta sopra la vecchia, ritagliata da un clip-path polygon di 96 punti che disegna la superellisse. Il clip-path si applica prima della trasformazione, quindi la lente si scrive nei pixel della pagina piccola: raggi divisi per la scala della pagina. Mentre è piccola, uno strato del suo colore largo come tutto lo schermo le sta dietro (un ::before con inset negativo, non un box-shadow, che lasciava una cucitura chiara sul bordo).
Il volo
La pagina vecchia cresce con transform-origin in alto a sinistra: la scala è esponenziale (exp(ln(massima) · z)), così il volo sembra a velocità costante e power3.in lo fa accelerare. Intanto il centro dell’occhiello scivola al centro dello schermo. La scala massima è quella per cui l’ellisse dentro l’occhiello copre gli angoli: radice di (W/2)²/a² + (H/2)²/b². La pagina dentro la lente cresce con la stessa scala per un fattore che all’inizio fa stare la sua parola nella lente (FIT), e arriva a 1 prima della fine; il punto che sta al centro della lente passa dalla sua parola al centro della pagina.
Il fiato della parola
Ogni lettera è un inline-block con font-stretch legato alla variabile --w. All’arrivo la parola parte da 108 e torna a 125 con elastic.out, sfalsata a partire dalla O verso i due lati; all’apertura le lettere partono da 62, la larghezza più stretta di Archivo, e salgono dal basso una dopo l’altra.
Ridimensionare a metà volo, telefono e movimento ridotto
Il volo è uno stato fatto di numeri (quanto è aperta la lente, a che punto è lo zoom) e ogni fotogramma lo ridisegna con le misure del momento: se la finestra cambia a metà, la parola si rimisura, l’occhiello si ricalcola e il volo continua giusto. Al telefono è la stessa transizione con la parola stretta nella larghezza. Con il movimento ridotto le due pagine si scambiano in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
OPEN | script.js | 0.6 | I secondi che la lente impiega ad aprirsi dentro la O. |
ZOOM | script.js | 1.15 | I secondi del volo dentro la O. |
PULL | script.js | 0.02 | Quanto la pagina fa un passo indietro prima del volo: 0 = parte subito. |
FIT | script.js | 0.86 | Quanto è larga la parola della pagina dopo dentro la lente, rispetto al buco: 1 = da bordo a bordo. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per passare dalla home a una sezione in un sito dove una parola sola fa da copertina: un marchio di occhiali, un ottico, uno studio fotografico, un’agenzia col nome che ha una O, la pagina d’apertura di una collezione. Funziona con ogni parola che abbia una o, una d, una p o una q: basta spostare la scatoletta della linea di base sulla lettera giusta.
Sul telefono
La stessa transizione: la parola si stringe fino a stare nella larghezza dello schermo e la lente è più piccola, ma la pagina dopo ci sta dentro con la sua parola; il volo porta l’occhiello al centro dello schermo alto e lo allarga fino agli angoli.
Con il movimento ridotto
Niente vola: la pagina dopo compare in dissolvenza sopra quella di prima, con la parola e l’elenco già al loro posto.
Trappole
- Il clip-path si applica prima del transform: scritta nei pixel dello schermo, la lente usciva rimpicciolita insieme alla pagina piccola. Il centro e i raggi si scrivono nelle coordinate della pagina, divisi per la sua scala.
- Un’ellisse dentro l’occhiello quadrato di Archivo lasciava quattro spicchi color carta negli angoli: l’occhiello è una superellisse, e l’esponente si misura sulla diagonale del disegno.
- Col box-shadow per allargare il colore della pagina piccola restava una cucitura chiara sul suo bordo, che correva come una riga sotto la parola; uno strato ::before più grande della pagina, dietro di lei, non ne lascia.
- Quando la pagina scura faceva il passo indietro si vedeva dietro il fondo color carta del palco, come una cornice: il palco prende il colore della pagina che parte.
- Ridimensionando mentre la parola prendeva fiato (lettere a --w 108) la parola si misurava più stretta e poi usciva dallo schermo: le lettere si rimettono a 125 il tempo di misurarle.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,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.
