Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione della selezione
Un cambio di pagina nello stile minimal: al clic tutta la pagina viene selezionata come in un programma di scrittura, riga per riga, e le parole diventano bianche sull’evidenziatura blu. Le righe si chiudono in un foglio blu che inghiotte il testo, il foglio si riapre sulle righe della pagina nuova, già selezionate, e la selezione le lascia andare una a una; alla fine il cursore lampeggia due volte.
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 select-all transition</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the first note: every line of text can be selected, and the selection becomes the curtain -->
<section class="page page--a is-on" data-page="a" aria-label="Cutting">
<header class="bar">
<span class="brand" data-sel>Margin</span>
<nav class="nav" aria-label="Notes">
<a href="#cutting" aria-current="page" data-sel>Cutting</a>
<a href="#white-space" data-go="b" data-sel>White space</a>
</nav>
</header>
<article class="note">
<p class="label" data-sel>Notes on writing</p>
<h1 class="title" data-sel data-title>Cut the second sentence.</h1>
<p class="body" data-sel>Most paragraphs say their thing once, then say it again to be sure. Find the sentence that repeats the first one and take it out. The page gets lighter, and the reader trusts you more.</p>
<a class="go" href="#white-space" data-go="b" data-autoclic data-sel>
<span class="go__t">Next note</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>
</article>
<footer class="foot">
<span data-sel>A letter about writing</span>
<span data-sel>Every other Sunday</span>
</footer>
</section>
<!-- the second note, dark -->
<section class="page page--b" data-page="b" aria-label="White space" aria-hidden="true">
<header class="bar">
<span class="brand" data-sel>Margin</span>
<nav class="nav" aria-label="Notes">
<a href="#cutting" data-go="a" data-sel>Cutting</a>
<a href="#white-space" aria-current="page" data-sel>White space</a>
</nav>
</header>
<article class="note">
<p class="label" data-sel>Notes on writing</p>
<h2 class="title" data-sel data-title>Leave room around it.</h2>
<p class="body" data-sel>A good line needs air the way a picture needs a wall. Give the sentence that matters its own paragraph, wide margins and nothing beside it. Space is how a page raises its voice.</p>
<a class="go go--back" href="#cutting" data-go="a" data-autoclic data-sel>
<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="go__t">Back to cutting</span>
</a>
</article>
<footer class="foot">
<span data-sel>A letter about writing</span>
<span data-sel>Every other Sunday</span>
</footer>
</section>
<!-- the text cursor; the highlights of the selection are built by the script inside each page, under its text -->
<div class="caret" data-caret 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.
32 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 della selezione» da Animorio e adattala al mio sitoCosa fa
Il sito di una lettera sulla scrittura inventata, Margin, in due note: la prima color carta, Cut the second sentence., la seconda quasi nera, Leave room around it., tutte e due con un titolo in Newsreader, un paragrafo, un link e il piede. All’apertura il testo compare solo dove arriva la selezione: un’evidenziatura blu corre riga per riga dall’alto e lascia le parole bianche, poi la selezione le lascia andare dal basso e il cursore di testo lampeggia due volte alla fine del titolo. Al clic su Next note la selezione parte dalla riga del link e si allarga in su e in giù: ogni riga si evidenzia da sinistra a destra, con le parole che diventano bianche quando il blu le raggiunge. Poi le righe si chiudono: ognuna si allarga fino ai bordi dello schermo e fino a metà strada dalle righe vicine, a cominciare da quelle accanto al link, e le parole bianche sfumano nel blu finché lo schermo è un foglio blu pieno. Sotto il foglio c’è già la nota scura; il foglio si riapre sulle sue righe, ogni fascia si stringe sulla sua riga e le parole tornano bianche. Dal basso in su la selezione lascia andare le righe, che si svuotano da sinistra a destra, e il cursore lampeggia due volte dopo il nuovo titolo. Al clic su Back to cutting succede lo stesso al contrario.
Come funziona
Le righe vere, dalle parole
Ogni testo segnato con data-sel è diviso in parole (uno span per parola, gli spazi restano testo), e le righe si trovano raggruppando le parole che stanno alla stessa altezza: così sono le righe come le ha impaginate il browser, che vanno a capo dove vogliono. Ogni riga ha la sua evidenziatura, un div blu nella stessa pagina, sotto il testo (z-index -1 dentro una pagina con isolation: isolate). Le righe alla stessa altezza (il marchio e il menu, i due capi del piede) fanno una fila sola.
Le fasce che chiudono lo schermo
Ogni fila possiede una fascia dello schermo, larga da bordo a bordo e alta da metà strada alla fila di sopra a metà strada alla fila di sotto; la prima parte dal bordo alto e l’ultima arriva in fondo. Chiudersi vuol dire passare dal rettangolo della riga a quello della sua fascia: le fasce, sovrapposte di un pixel, coprono tutto senza lasciare righine. La pagina nuova parte con le sue fasce chiuse, quindi lo scambio sotto il foglio non si vede.
Tempi fatti di numeri
La timeline muove solo quattro numeri da 0 a 1 (selezione, chiusura, apertura, rilascio) con ease none. Ogni riga ricava da lì il suo tempo con il suo posto nell’ordine (dalla riga del link verso fuori, in ordine di lettura, dal basso in su) e lo passa per la sua curva: power2.out per la selezione, power3.inOut per la chiusura, power4.inOut per l’apertura. Le misure si rifanno a ogni ridimensionamento e il disegno le rilegge a ogni fotogramma: se la finestra cambia a metà, il testo va a capo in un altro punto e le fasce seguono le righe nuove.
Le parole che diventano blu
Una parola è selezionata quando il suo centro sta sotto l’evidenziatura della sua riga: allora prende il bianco, e mentre la riga si chiude il bianco si mescola al blu con color-mix in proporzione alla chiusura, finché la parola sparisce nel foglio. Le frecce dei link sono trattate come parole, così il foglio inghiotte anche loro. L’hover del link fa lo stesso gesto in piccolo: un’evidenziatura che corre sotto le sue parole.
Il cursore, il telefono e il movimento ridotto
Alla fine il cursore, una barretta blu di due pixel alta quanto la riga, si mette dopo l’ultima riga del titolo e lampeggia BLINKS volte con dei set nella timeline (così il video dell’anteprima lo vede tutto). Al telefono le righe sono più corte e più numerose, e le fasce più sottili. Con il movimento ridotto le due note si scambiano in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SELECT | script.js | 0.75 | I secondi che la selezione impiega a correre su tutta la pagina. |
CLOSE | script.js | 0.6 | I secondi che le evidenziature impiegano a chiudersi in un foglio solo. |
OPEN | script.js | 0.7 | I secondi che il foglio impiega a riaprirsi sulle righe della pagina nuova. |
LETGO | script.js | 0.7 | I secondi che la selezione impiega a lasciare andare le righe nuove. |
BLINKS | script.js | 2 | Quante volte lampeggia il cursore alla fine: 0 = niente cursore. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per passare da un articolo all’altro in un sito fatto di testo: un blog, una newsletter, la rivista di uno studio di scrittura o di traduzione, la documentazione di un editor di testo, il sito di un programma per scrivere. Va bene dove le pagine sono soprattutto parole, perché è il testo stesso a fare da sipario.
Sul telefono
La stessa transizione: il testo va a capo più spesso, quindi le righe sono di più e le fasce più sottili, e la selezione, la chiusura e il rilascio seguono le righe come le impagina il telefono.
Con il movimento ridotto
Niente si muove: la nota nuova compare in dissolvenza sopra la vecchia, senza selezione né cursore.
Trappole
- Evidenziature messe sopra il testo lo coprirebbero: stanno dentro la loro pagina, sotto il testo, e la pagina ha isolation: isolate perché lo z-index negativo non scenda sotto il suo fondo.
- Le frecce dei link restavano scure in mezzo al foglio blu chiuso: anche le frecce sono trattate come parole e sfumano nel blu.
- Fra due fasce chiuse restava una righina chiara dove i bordi cadevano a metà pixel: le fasce si allargano di un pixel per lato e si sovrappongono.
- Ridimensionando a metà, il testo va a capo in un altro punto e il numero delle righe cambia: per questo la timeline non tiene un tween per riga ma quattro numeri, e ogni riga si ricava il suo tempo da quelli al momento del disegno.
- Se le parole restassero bianche sotto il foglio, lo scambio delle due pagine si vedrebbe come un salto del testo: le parole selezionate sfumano nel blu mentre la loro riga si chiude, e quelle della pagina nuova escono dal blu mentre la loro si apre.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,6 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.
