Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Le lettere che cambiano posto
Animazione di testo nello stile minimal: una parola in un serif variabile e le stesse sei lettere che si rimettono in fila per farne un’altra, listen, silent, enlist, tinsel, inlets. Ogni lettera vola al suo posto su un arco suo, sopra la parola se va a destra e sotto se va a sinistra; in aria si alleggerisce e arrotonda le grazie, atterrando si affila e prende peso un attimo, e dietro le corre un filo vermiglio che si spegne in lei.
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>Letters that swap places</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__brand">Verso</span>
<span class="top__note">A quarterly of short poems</span>
</header>
<!-- the hairline trails: each letter leaves one behind it on its way to its new place -->
<svg class="trails" data-trails aria-hidden="true"></svg>
<!-- the letters: the script places them one by one and moves each along its own arc -->
<h1 class="word" data-word aria-live="polite"></h1>
<i class="rule" data-rule aria-hidden="true"></i>
<!-- a hidden copy of the word, to measure where every letter stands -->
<span class="meter" data-meter aria-hidden="true"></span>
<nav class="list" data-list aria-label="Anagrams"></nav>
</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.
20 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 «Le lettere che cambiano posto» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome di una rivista di poesia inventata, Verso, e a destra la sua riga; in mezzo una riga sottile e sopra la parola listen in un serif grande e contrastato, che arriva salendo lettera per lettera. Dopo un paio di secondi le lettere si mettono in viaggio, una dopo l’altra, per diventare silent: ognuna vola su un arco suo, sopra la parola quelle che vanno verso destra e sotto quelle che vanno verso sinistra, così non si scontrano mai; più è lontano il posto nuovo, più l’arco è alto. In volo la lettera si alleggerisce, le grazie si arrotondano e il disegno si apre un poco, inclinata appena nel verso della corsa; dietro di lei un filo vermiglio sottile segue l’arco e si accorcia fino a sparire dentro la lettera quando atterra. Atterrando si affila di nuovo, prende peso per un attimo e affonda di un pixel nella riga, poi torna su. Poi vengono enlist, tinsel, inlets e di nuovo listen. In basso le cinque parole in piccolo: quella che si legge è piena, le altre grigie; un clic su una la chiama, un clic sulla pagina passa alla successiva.
Come funziona
Tre assi di Fraunces
Fraunces, nel file «full» di Fontsource, ha il peso (100-900), la grandezza ottica (9-144) e SOFT, la morbidezza (0-100), che arrotonda le grazie e i terminali. A terra le lettere hanno opsz 144, peso WEIGHT e SOFT 0, il disegno da titolo; in volo scendono a opsz 48, peso AIR e SOFT al massimo. Ogni lettera è uno span posizionato a mano con translate3d, che lo script riscrive a ogni fotogramma solo se cambia.
Dove sta ogni lettera
Per ogni parola dell’elenco uno span nascosto la compone lettera per lettera, con la crenatura vera, e da lì si leggono la x e la larghezza di ogni lettera. Le lettere sono sempre le stesse sei: la terza «e» di una parola è la terza «e» delle lettere, quindi ogni lettera sa dove andare in ogni parola.
Un arco per lettera
Per ogni lettera che si sposta si scrive un path SVG quadratico dal centro di dove sta al centro di dove va, con il punto di controllo sopra la parola se va a destra e sotto se va a sinistra, alto il 42% dello spostamento (con un minimo e un massimo). Una tween da 0 a 1 con power3.inOut porta la lettera lungo l’arco con getPointAtLength, e l’angolo fra due punti vicini la inclina di qualche grado.
Il filo che la segue
Lo stesso path è il filo vermiglio: stroke-dasharray e stroke-dashoffset mostrano solo il tratto fra la coda e la lettera. La coda parte un terzo di volo più tardi e arriva insieme alla lettera, così il filo si accorcia fino a sparire nell’atterraggio.
L’atterraggio
Arrivata, la lettera ha un valore «land» che sale in 0,12 secondi e torna a 0 con elastic.out: insieme abbassa la lettera di un pixel (o di poco più nei corpi grandi) e le aggiunge 140 di peso. Le lettere partono nell’ordine in cui stanno nella parola vecchia, sfalsate di STAGGER; il cambio successivo lo aspetta un gsap.delayedCall di HOLD secondi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['listen', 'silent', 'enlist', 'tinsel', 'inlets'] | Gli anagrammi, uno dopo l’altro: ogni parola deve avere esattamente le stesse lettere della prima (quelle che non le hanno vengono saltate). |
WEIGHT | script.js | 520 | Il peso delle lettere ferme sulla riga, da 100 a 900. |
AIR | script.js | 200 | Il loro peso in volo. |
SOFT | script.js | 100 | Quanto si arrotondano le grazie in volo: 0 restano affilate, 100 tonde. |
ARC | script.js | 0.5 | Quanto sono alti gli archi: 0 quasi piatti, 1 alti. |
STAGGER | script.js | 0.07 | I secondi fra il volo di una lettera e quello della successiva. |
HOLD | script.js | 2.2 | Quanti secondi resta una parola prima della successiva. |
SPEED | script.js | 1 | La velocità dei voli: 2 è il doppio, 0.5 la metà. |
AUTO | script.js | true | Se le parole cambiano da sole; con false solo al clic. |
Quando usarla
Per il titolo di una rivista, di un blog di scrittura o di poesia, di un gioco di parole, di una fonderia che mostra un serif; anche per un nome che si legge in due modi. Funziona con parole corte che sono anagrammi una dell’altra (listen e silent, earth e heart, night e thing).
Sul telefono
La stessa animazione: la parola si misura per lo schermo stretto e gli archi restano proporzionati. Un tocco sulla pagina passa alla parola dopo, un tocco su una parola dell’elenco la chiama.
Con il movimento ridotto
Niente vola: le lettere svaniscono e ricompaiono in dissolvenza già al loro posto nella parola nuova, senza archi né fili; l’elenco cambia senza transizione.
Trappole
- In uno script normale una costante chiamata «top» va in conflitto con window.top e ferma tutto con «Identifier has already been declared»: l’intestazione si chiama header.
- Le fromTo di una timeline scrivono i valori di partenza appena create e chiamano onUpdate prima del tempo: il filo cercava getPointAtLength su un path ancora vuoto. Con immediateRender: false e il path scritto in onStart il problema sparisce.
- Con il peso più leggero in volo le lettere sembravano comunque scure: a grandezza ottica bassa Fraunces ha meno contrasto e tratti più spessi. Il peso in volo è sceso a 200.
- Le posizioni si leggono da una parola composta davvero, non sommando le larghezze delle lettere: così resta la crenatura (lo spazio fra «t» ed «e» non è quello fra «l» e «i»).
Librerie
GSAP 3.15.0, Fraunces (font variabile, assi opsz, wght, SOFT e WONK) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,2 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.
