Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione dell’asta che diventa la pagina
Un cambio di pagina tipografico nello stile minimal: cliccando una voce, la sua prima lettera si fa pesante e vermiglia, le altre lettere scappano di lato e l’asta dritta della lettera si stacca, cresce fino all’altezza dello schermo e si divide in due bordi che aprono la pagina nuova, già nel suo colore. Il titolo nuovo arriva lettera per lettera da largo a stretto. Il ritorno fa lo stesso viaggio dalla B di Back.
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>Kerna</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- two pages of an invented type foundry: click a link and the upright stem of its first letter
grows into a bar, then into the whole next page, in that page's colour -->
<main class="sito" data-sito>
<section class="pagina pagina--carta" data-pagina="a" aria-label="Index">
<header class="testa" data-esce>
<p class="marchio">Kerna</p>
<p class="nota">A small, slow type foundry</p>
</header>
<div class="corpo">
<p class="occhiello" data-esce>Index</p>
<h1 class="titolo" data-esce>Type that holds<br>its line.</h1>
<nav class="voci" aria-label="Pages">
<a href="#library" class="voce" data-vai="b" data-pagina-nuova="library" data-autoclic>Library</a>
<a href="#kerning" class="voce" data-vai="b" data-pagina-nuova="kerning">Kerning</a>
<a href="#info" class="voce" data-vai="b" data-pagina-nuova="info">Info</a>
</nav>
</div>
<footer class="piede" data-esce>
<p class="nota">Pick a page: its first letter becomes the page</p>
</footer>
</section>
<section class="pagina pagina--inchiostro" data-pagina="b" aria-label="Page" hidden>
<header class="testa" data-entra>
<p class="marchio">Kerna</p>
<p class="nota" data-nome-pagina>Library</p>
</header>
<div class="corpo">
<p class="occhiello" data-entra data-nome-pagina>Library</p>
<h1 class="titolo" data-titolo-nuovo>Every weight,<br>side by side.</h1>
<nav class="voci" aria-label="Back">
<a href="#index" class="voce voce--torna" data-vai="a" data-autoclic data-entra>Back</a>
</nav>
</div>
<footer class="piede" data-entra>
<p class="nota">Back makes the same trip the other way</p>
</footer>
</section>
<div class="velo" data-velo aria-hidden="true"></div>
<div class="asta" data-asta aria-hidden="true"></div>
<div class="asta" data-asta-destra 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.
27 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 dell’asta che diventa la pagina» da Animorio e adattala al mio sitoCosa fa
Due pagine di una piccola fonderia di caratteri inventata, Kerna: l’indice su un bianco caldo, con il titolo Type that holds its line e tre voci, Library, Kerning e Info, e una pagina interna su un nero d’inchiostro. Cliccando una voce, la voce cede un attimo sotto il clic e la sua prima lettera si fa pesante e vermiglia; le altre lettere della parola scappano di lato una dopo l’altra, e il resto della pagina sale di poco e si spegne. Allora l’asta dritta della lettera, quella verticale di L, K, I o B, si stacca: diventa una barra vermiglia che cresce in alto e in basso fino all’altezza dello schermo, poi si divide in due bordi che corrono verso i lati e spingono via la pagina, e fra i due c’è già il colore della pagina che arriva; i bordi si assottigliano correndo e spariscono ai lati. Sotto c’è la pagina nuova: il titolo arriva lettera per lettera da molto largo a normale sull’asse wdth, scivolando verso il suo posto, e si assesta di un pixel; poi salgono l’etichetta e il link Back. Back fa lo stesso viaggio dalla sua B, verso il bianco. Passando col mouse su una voce, la parola si allarga un poco e la prima lettera diventa vermiglia, come un invito.
Come funziona
Le lettere in fila
Ogni voce e ogni titolo sono spezzati in uno span per carattere (le righe con un a capo). Così la prima lettera della voce si anima da sola: peso PESO e colore vermiglio in un quarto di secondo, mentre le altre scappano di FUGA em per posto.
L’asta misurata
Le voci cominciano tutte con una lettera che ha un’asta dritta a sinistra. La barra nasce sopra di lei, dalla misura del carattere: un poco dopo il bordo della lettera, larga 0,15 em e alta quanto le maiuscole, e la lettera vera si spegne nello stesso istante, così il cambio non si vede.
Alta, poi larga
La barra cresce fino all’altezza dello schermo in SALITA secondi con power3.inOut. Poi un secondo bordo nasce nello stesso punto e i due corrono verso i lati in APERTURA secondi con expo.inOut; fra loro un velo nel colore della pagina nuova si allarga a ogni fotogramma, così il colore nuovo arriva pieno, senza passare per un marrone fra vermiglio e nero.
Il titolo che si stringe
Sotto, la pagina nuova è già al suo posto. Le lettere del titolo partono trasparenti, larghe LARGO sull’asse wdth e spostate di poco verso il centro, e arrivano normali in 0,75 secondi, SFALSA secondi l’una dopo l’altra; l’ultima arrivata fa scendere tutto di un pixel e risalire con back.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PESO | script.js | 820 | Quanto si fa pesante la prima lettera prima di staccare l’asta. |
SALITA | script.js | 0.45 | Quanto ci mette l’asta a diventare alta come lo schermo, in secondi. |
APERTURA | script.js | 0.62 | Quanto ci mettono i due bordi ad aprire la pagina nuova, in secondi. |
LARGO | script.js | 125 | Da che larghezza dell’asse wdth arrivano le lettere del titolo nuovo (100 è normale). |
SFALSA | script.js | 0.026 | Il ritardo fra una lettera e l’altra del titolo nuovo, in secondi. |
FUGA | script.js | 0.06 | Quanto scappano di lato le altre lettere della voce cliccata, in em per lettera. |
Quando usarla
Come passaggio fra le pagine di un sito che vive di tipografia: una fonderia di caratteri, uno studio grafico, una casa editrice, una rivista, un portfolio di un designer. Funziona meglio con voci di menu che cominciano con una lettera dalla gamba dritta (B, D, E, F, H, I, K, L, M, N, P, R) e fra una pagina chiara e una scura.
Sul telefono
Le stesse animazioni a misure adattate: le voci vanno in colonna, il titolo si misura sull’altezza della casella e l’asta parte dalla lettera toccata col dito. La nota in alto non c’è.
Con il movimento ridotto
Niente asta e niente lettere che si muovono: la pagina di prima si spegne in dissolvenza e quella nuova compare in dissolvenza.
Trappole
- Un solo rettangolo che cambia colore dal vermiglio al nero mentre si allarga passa per un marrone fangoso: per questo i bordi vermigli e il velo nel colore nuovo sono due cose diverse.
- L’asta si misura sul carattere e non sulla lettera disegnata: con lettere senza gamba dritta (O, S, C) la barra nasce un poco accanto, e serve un’altra misura.
- GSAP interpola anche la stringa di font-variation-settings, a patto che le due stringhe abbiano gli stessi assi nello stesso ordine.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
