Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione dei segni di correzione
Un cambio di pagina nello stile minimal, fatto come la correzione di una bozza: al clic una riga rossa, tremante come una penna, cancella il titolo riga per riga e a margine compare il segno «del»; le lettere se ne vanno una alla volta dalla fine, stringendosi. Poi sulla linea di base spunta il cappelletto «^», a margine «ins», e il titolo nuovo esce dal cappelletto lettera per lettera, stretto e poi largo, con un pixel di troppo e l’assestamento.
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 proofreader's marks transition</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="bar">
<span class="brand">Galley</span>
<nav class="nav" aria-label="Pages">
<a href="#draft" data-go="a" data-nav="a" aria-current="page">Draft</a>
<a href="#proof" data-go="b" data-nav="b">Proof</a>
</nav>
</header>
<!-- the margin where the proofreader writes the marks -->
<aside class="margin" data-margin aria-hidden="true">
<div class="mark mark--del" data-mark="del">
<svg viewBox="0 0 40 56"><path data-draw d="M6 8 C 14 8 26 6 30 14 C 34 22 22 28 18 22 C 14 16 24 10 30 18 C 34 26 30 42 22 50 C 18 54 12 52 14 48"/></svg>
<span class="mark__word">del</span>
</div>
<div class="mark mark--ins" data-mark="ins">
<svg viewBox="0 0 40 56"><path data-draw d="M8 40 L20 16 L32 40"/><path data-draw d="M20 16 L20 6"/></svg>
<span class="mark__word">ins</span>
</div>
</aside>
<section class="page page--a is-on" data-page="a" aria-label="Draft">
<div class="col">
<p class="kicker" data-soft>The draft</p>
<h1 class="title"><span class="line" data-line>Rough words,</span><span class="line" data-line>first thoughts.</span></h1>
<p class="text" data-soft>Everything we write starts here, loose and too long. Then the red pen comes.</p>
<a class="go" href="#proof" data-go="b" data-autoclic data-soft>
<span class="go__text">Send it to proof</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>
</section>
<section class="page page--b" data-page="b" aria-label="Proof" aria-hidden="true" inert>
<div class="col">
<p class="kicker" data-soft>The proof</p>
<h1 class="title"><span class="line" data-line>Clean lines,</span><span class="line" data-line>set to print.</span></h1>
<p class="text" data-soft>Cut, corrected and read twice. What is left is ready for the press.</p>
<a class="go go--back" href="#draft" data-go="a" data-autoclic data-soft>
<span class="go__arrow" aria-hidden="true"><svg class="go__head" viewBox="0 0 8 12"><path d="M6.5 1.5 1.5 6l5 4.5"/></svg><span class="go__shaft"></span></span>
<span class="go__text">Back to the draft</span>
</a>
</div>
</section>
<!-- the strikes and the caret are drawn here, over the page -->
<svg class="ink" data-ink aria-hidden="true"></svg>
<footer class="foot">
<span>An editing studio</span>
<span>Read twice, print once</span>
</footer>
</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.
30 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 dei segni di correzione» da Animorio e adattala al mio sitoCosa fa
Il sito di uno studio di editing inventato, Galley (la «galley» è la prima bozza in colonna, quella che si corregge), in due pagine e quasi niente: fondo color carta, un titolo grande su due righe, una riga di testo, un link, e a destra la colonna del margine, separata da un filo grigio, dove il correttore scrive i suoi segni in rosso. All’apertura sulla linea di base del titolo spunta un piccolo cappelletto rosso «^», a margine si disegna il segno d’inserimento con la parola «ins», e le lettere di Rough words, first thoughts. escono dal cappelletto una dopo l’altra: partono strette e schiacciate, scivolano al loro posto allargandosi, lo passano di un pixel e ci tornano con un piccolo elastico; a ogni lettera il cappelletto fa un cenno, poi scende alla seconda riga e ricomincia, e alla fine sprofonda. Al clic su Send it to proof una riga rossa leggermente tremante attraversa la prima riga del titolo come un tratto di penna, poi la seconda; la penna si alza di un pixel alla fine di ogni tratto. A margine si disegna il segno di cancellatura, il ricciolo del «del». Le righe più piccole, l’etichetta e il testo, vengono barrate con un filo più leggero. Poi le lettere barrate se ne vanno dall’ultima alla prima, stringendosi e scendendo appena, e la riga rossa si accorcia dietro di loro. Restano il margine e la carta; arriva il cappelletto e Clean lines, set to print. entra nello stesso modo, mentre testo e link salgono in dissolvenza. Al clic su Back to the draft si torna indietro allo stesso modo. Passando sopra il link la scritta si allarga, la freccia si allunga e sotto compare un piccolo cappelletto rosso.
Come funziona
Una lettera, uno span
Lo script spezza ogni riga del titolo in uno span .ch per lettera (gli spazi diventano .sp larghi 0,24em) e lascia il testo intero in aria-label per chi legge con lo screen reader. Ogni .ch è un inline-block con font-stretch: calc(var(--w) * 1%): GSAP muove lo span e anima la variabile --w, così la lettera si stringe e si allarga sull’asse wdth di Roboto Flex mentre si sposta.
La riga della penna
Le cancellature si disegnano in un SVG grande come il palco, sopra la pagina. Le misure delle righe vengono da document.createRange().getClientRects(), che dà un riquadro per ogni riga di testo anche quando un paragrafo va a capo. Ogni tratto è una curva di Bézier che parte cinque pixel prima della parola e finisce cinque dopo, con due punti di controllo spostati di WOBBLE pixel in su e in giù: sembra tirata a mano. Si disegna con stroke-dasharray e stroke-dashoffset, da tutta la lunghezza a zero.
Le lettere che se ne vanno
Finita la riga, le lettere partono dall’ultima: opacità a zero, --w fino a NARROW e tre centesimi della misura in giù, ERASE secondi una dall’altra con power2.in. Intanto lo stroke-dashoffset del tratto va da zero alla lunghezza con ease none, nello stesso tempo: con il trattino lungo quanto il percorso, un offset che cresce accorcia la riga dalla fine, così la cancellatura segue le lettere che spariscono.
Il cappelletto e le lettere che entrano
Il cappelletto è un gruppo SVG con un tracciato a V rovesciata, messo all’inizio della prima lettera, sulla linea di base. Compare con scale da 0 e back.out(3). Ogni lettera nuova parte da x uguale alla distanza fra il cappelletto e il suo posto, trasparente, con --w a NARROW e scaleY 0,4, e arriva a OVERSHOOT pixel oltre il posto con power3.out; poi torna a zero con elastic.out(1, 0.5). Una lettera ogni INSERT secondi; ogni tre lettere il cappelletto scende di un pixel e torna. Per la seconda riga il cappelletto scivola giù con power3.inOut.
Margine, regia e movimento ridotto
I segni a margine sono due SVG con i loro tracciati disegnati con stroke-dashoffset e la parola che sale con back.out; stanno all’altezza del centro del titolo. Ogni cambio è una timeline sola: la parte della pagina nuova si aggiunge solo quando la pagina è sullo schermo, perché le lettere si possono misurare solo lì. Un clic durante il cambio aspetta in coda. Il titolo si rimpicciolisce se la riga più lunga non sta nella colonna, a ogni ridimensionamento. Con il movimento ridotto le pagine si scambiano in dissolvenza, senza segni e senza spostamenti.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STRIKE | script.js | 0.42 | I secondi che la riga rossa impiega ad attraversare una riga del titolo. |
ERASE | script.js | 0.022 | I secondi fra una lettera cancellata e la successiva: 0 = se ne vanno tutte insieme. |
INSERT | script.js | 0.034 | I secondi fra una lettera inserita e la successiva. |
SETTLE | script.js | 0.62 | I secondi che ogni lettera nuova impiega a uscire dal cappelletto e a trovare il suo posto. |
WOBBLE | script.js | 1.4 | Di quanti pixel la riga della penna trema in su e in giù: 0 = dritta come col righello. |
NARROW | script.js | 25 | Quanto si stringe una lettera quando se ne va o quando nasce (font-stretch in %, da 25 a 100). |
OVERSHOOT | script.js | 1 | Di quanti pixel una lettera nuova passa il suo posto prima di tornarci: 0 = si ferma e basta. |
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 dove le parole contano: uno studio di editing o di copywriting, una casa editrice, una rivista, un blog di scrittura, un servizio di traduzione o di correzione di bozze. Funziona bene anche per passare da una bozza alla versione finale di qualcosa, o da «prima» a «dopo».
Sul telefono
La stessa transizione con le misure adattate: il titolo si rimpicciolisce finché la riga più lunga sta nella colonna, il margine si stringe e i segni rossi con lui. Un tocco sul link manda la pagina avanti e indietro.
Con il movimento ridotto
Niente si sposta e niente si cancella: la pagina vecchia svanisce e la nuova compare in dissolvenza; le righe rosse, il cappelletto e i segni a margine non compaiono.
Trappole
- Le lettere della pagina nuova si possono misurare solo quando la pagina è visibile: la parte della timeline che le fa entrare si costruisce in un callback, appena la pagina è sullo schermo, e si aggiunge alla timeline che sta già correndo.
- Un paragrafo che va a capo ha più righe: getClientRects() di un Range le dà una per una, ma a volte con riquadri doppi per la stessa riga; vanno uniti quando hanno la stessa altezza.
- Per accorciare la riga dalla fine, e non dall’inizio, lo stroke-dashoffset deve crescere da zero alla lunghezza del tratto, col trattino lungo quanto il percorso.
- Un clic che arriva a metà del cambio (il pilota delle anteprime clicca da solo) partirebbe sopra una timeline ancora in corsa: va in coda.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
