Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione dello scanner
Un cambio di pagina minimal a clic: una sola riga sottile color vermiglio attraversa lo schermo come la testina di uno scanner. Sopra di lei c’è già la pagina nuova, sotto resta la vecchia; il titolo nuovo arriva sottile e stretto e, appena la riga lo ha passato, si assesta prendendo larghezza e peso con una molla, una lettera dopo l’altra. Alla pagina dopo la riga torna indietro dal basso.
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 scan-line 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 of a made-up print room; the line scans each new one over the old -->
<section class="page page--paper" data-page="prints" aria-label="Prints" aria-hidden="true">
<header class="bar">
<span class="brand">Plano</span>
<nav class="nav" aria-label="Pages">
<a href="#prints" aria-current="page">Prints</a>
<a href="#archive" data-go="archive">Archive</a>
<a href="#visit" data-go="visit">Visit</a>
</nav>
</header>
<div class="hero">
<p class="kicker">Risograph print room</p>
<h1 class="title" data-title>Prints</h1>
<p class="lede">Two drums, eleven inks and a great deal of paper. Small runs, printed by hand.</p>
<a class="go" href="#archive" data-go="archive" data-autoclic>
<span class="go__text">See the archive</span>
<span class="go__arrow" aria-hidden="true"><span class="go__shaft"></span><svg class="go__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
</a>
</div>
<footer class="foot">
<span>Plano print room</span>
<span>Open Thursday to Saturday</span>
</footer>
</section>
<section class="page page--night" data-page="archive" aria-label="Archive" aria-hidden="true">
<header class="bar">
<span class="brand">Plano</span>
<nav class="nav" aria-label="Pages">
<a href="#prints" data-go="prints">Prints</a>
<a href="#archive" aria-current="page">Archive</a>
<a href="#visit" data-go="visit">Visit</a>
</nav>
</header>
<div class="hero">
<p class="kicker">Since 2014</p>
<h2 class="title" data-title>Archive</h2>
<p class="lede">Every run we have printed, one copy of each, kept flat in wide drawers.</p>
<a class="go" href="#visit" data-go="visit" data-autoclic>
<span class="go__text">Plan a visit</span>
<span class="go__arrow" aria-hidden="true"><span class="go__shaft"></span><svg class="go__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
</a>
</div>
<footer class="foot">
<span>Plano print room</span>
<span>Open Thursday to Saturday</span>
</footer>
</section>
<section class="page page--stone" data-page="visit" aria-label="Visit" aria-hidden="true">
<header class="bar">
<span class="brand">Plano</span>
<nav class="nav" aria-label="Pages">
<a href="#prints" data-go="prints">Prints</a>
<a href="#archive" data-go="archive">Archive</a>
<a href="#visit" aria-current="page">Visit</a>
</nav>
</header>
<div class="hero">
<p class="kicker">Thursday to Saturday</p>
<h2 class="title" data-title>Visit</h2>
<p class="lede">Bring a file on a stick, leave with a warm stack of paper. The coffee is on us.</p>
<a class="go" href="#prints" data-go="prints" data-autoclic>
<span class="go__text">Back to prints</span>
<span class="go__arrow" aria-hidden="true"><span class="go__shaft"></span><svg class="go__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
</a>
</div>
<footer class="foot">
<span>Plano print room</span>
<span>Open Thursday to Saturday</span>
</footer>
</section>
<!-- the scan line: a hairline, a faint wash behind it that grows with its speed, a tick at each end -->
<div class="scan" data-scan aria-hidden="true">
<div class="scan__trail" data-trail></div>
<div class="scan__rule" data-rule></div>
<div class="scan__tick scan__tick--l" data-tick></div>
<div class="scan__tick scan__tick--r" data-tick></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.
45 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 dello scanner» da Animorio e adattala al mio sitoCosa fa
Il sito di una stamperia risograph inventata, Plano, in tre pagine e quasi niente: un titolo enorme in Archivo, una riga di testo, un link con la freccia disegnata, e una riga color vermiglio spessa un pixel e mezzo. All’apertura la riga parte dal bordo in alto e scende: sopra di lei compare la prima pagina, sotto resta il foglio vuoto. Parte piano, corre a metà e frena con garbo fino al bordo in basso, dove resta appoggiata con le sue due tacche, che si allungano e tornano con un piccolo elastico. Dietro la riga, dalla parte già letta, c’è un velo appena colorato che si allunga quando corre e sparisce quando frena. Il titolo, Prints, arriva sottilissimo e stretto (larghezza 62, peso 160): appena la riga gli passa sotto, le lettere si allargano e prendono peso con una molla, da sinistra a destra, scendendo di un pixel e tornando su. Al clic su See the archive la riga riparte dal basso verso l’alto: sotto di lei sale la pagina nera dell’archivio, sopra resta quella color carta, e Archive si assesta appena la riga ha passato la cima delle maiuscole. Al clic dopo la riga riscende con la pagina grigio pietra di Visit, e poi risale per tornare a Prints, come la testina di uno scanner che va e viene.
Come funziona
Una riga e un ritaglio
La pagina nuova sta sopra la vecchia (z-index più alto) ed è ritagliata con clip-path: scendendo inset(0 0 calc(altezza - y) 0), salendo inset(y 0 0 0), dove y è la posizione della riga. La riga è un div alto zero con dentro il filo da un pixel e mezzo, le due tacche e il velo: si sposta solo in y, e a ogni fotogramma riga e ritaglio si scrivono insieme dalla stessa y, così non si staccano mai.
Accelera e frena
La corsa è un tween di un numero da 0 a 1 con ease lineare; la y si calcola passando quel numero dalla curva SWEEP, una CustomEase (0.66, 0, 0.16, 1: parte piano, corre, frena a lungo). Così dalla stessa curva si ricava anche la velocità: la derivata della curva in quel punto, divisa per la velocità più alta, dà un numero da 0 a 1 che allunga il velo dietro la riga (scaleY) quando corre e lo spegne quando frena.
Il titolo che si assesta
Ogni titolo è diviso in lettere, inline-block con font-stretch e font-weight legati alle variabili --w e --g (Archivo va da 62 a 125 di larghezza e da 100 a 900 di peso; clamp nel CSS le tiene dentro i limiti anche quando la molla le porta oltre). Prima della corsa le lettere vanno a FROM_WIDTH e FROM_WEIGHT; poi un tween con elastic.out(1, SPRING) le porta a 100 e 620, sfalsate di STAGGER, e insieme scendono di un pixel e mezzo e tornano.
Il momento giusto
Il titolo non aspetta un controllo a ogni fotogramma: il momento in cui la riga lo passa si calcola prima, cercando con la bisezione il punto della curva in cui la riga arriva alla base del titolo (scendendo) o alla cima delle maiuscole (salendo), e lì si mette il tween nella timeline. Così il banco di montaggio può rallentarla, fermarla e riavvolgerla senza perdere il colpo.
Avanti e indietro, telefono e movimento ridotto
La riga parte sempre dal bordo dove riposa: dopo una discesa resta in basso e la pagina dopo sale, come la testina di uno scanner (con BACK_AND_FORTH a false torna in cima in dissolvenza e scende sempre). I tre titoli hanno la stessa misura, quella che fa stare il più lungo nella larghezza, e stanno alla stessa altezza in ogni pagina. Un clic durante il cambio aspetta in coda. Con il movimento ridotto la pagina nuova compare in dissolvenza col titolo già al suo posto e la riga cambia bordo in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SWEEP_TIME | script.js | 1.35 | I secondi che la riga impiega ad attraversare la pagina. |
SWEEP | script.js | 0.66, 0, 0.16, 1 | La curva della corsa: come la riga parte, corre e frena. |
FROM_WIDTH | script.js | 62 | La larghezza del titolo prima che la riga lo passi, da 62 a 125 (si assesta a 100): sopra 100 arriva largo e si stringe. |
FROM_WEIGHT | script.js | 160 | Il peso del titolo prima che la riga lo passi, da 100 a 900 (si assesta a 620). |
SPRING | script.js | 0.42 | La molla dell’assestamento: più basso oscilla di più, 1 quasi non oscilla. |
STAGGER | script.js | 0.04 | I secondi fra una lettera che si assesta e la successiva: 0 = tutte insieme. |
TRAIL | script.js | 90 | I pixel del velo dietro la riga quando corre al massimo: 0 = niente velo. |
BACK_AND_FORTH | script.js | true | Acceso, alla pagina dopo la riga torna indietro dal basso; spento, scende sempre dall’alto. |
Quando usarla
Per passare da una pagina all’altra in un sito sobrio dove la tipografia fa tutto: una stamperia, uno studio grafico, un archivio, un portfolio, una rivista, la pagina «chi siamo» di un’agenzia. La riga che legge la pagina sta bene dove si parla di carta, stampa, scansioni e documenti.
Sul telefono
La stessa transizione con le misure adattate: i titoli si stringono fino a stare nella larghezza dello schermo, stanno un po’ più in basso nella pagina alta e il testo va a capo. Un tocco sul link manda la riga avanti e indietro.
Con il movimento ridotto
Niente si sposta: la pagina nuova compare in dissolvenza sopra la vecchia col titolo già assestato, e la riga sparisce da un bordo e ricompare sull’altro in dissolvenza.
Trappole
- Il titolo è un h1, un blocco largo quanto la colonna: misurarne la larghezza con scrollWidth dà la colonna, non la parola, e i titoli venivano piccoli. La parola si misura dalla prima all’ultima lettera, con getBoundingClientRect.
- Con la molla la larghezza e il peso passano oltre il punto d’arrivo, e oltre 125 o 900 il carattere non ha più forme: nel CSS font-stretch e font-weight passano da clamp().
- Le lettere sono inline-block e cambiando larghezza spingono le vicine: i tre titoli si misurano tutti con le lettere già assestate (--w 100, --g 620), prima di portarle alla forma sottile.
- Controllare a ogni fotogramma se la riga ha passato il titolo funziona solo andando avanti: col banco che riavvolge o salta il colpo si perdeva. Il momento si calcola prima con la bisezione della curva e il tween entra nella timeline.
- Il pilota delle anteprime clicca ogni 2,8 secondi e trova i link segnati anche nelle pagine nascoste: ogni pagina ha il suo link avanti con data-autoclic, in ordine, così i clic fanno il giro delle tre pagine; un clic durante il cambio aspetta in coda.
Librerie
GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,1 KB; le librerie: GSAP + CustomEase 31 KB.
Collaudo
Provata il 15 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.
