Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Un lato alla volta
Un contorno sottile prende un lato alla volta, triangolo, quadrato, pentagono, fino all’ottagono, e poi si arrotonda in un cerchio. Ogni vertice nuovo nasce in mezzo a un lato e spinge i vicini con una molla; accanto il nome della forma cambia in un carattere variabile che si allarga mentre la forma si fa tonda. Stile minimal.
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>One side at a time</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>
<!-- one thin outline that takes a side at a time, triangle to circle: every new corner is born on an edge and
pushes its neighbours round the guide circle; the name of the shape changes beside it -->
<svg class="figure" viewBox="-130 -130 260 260" role="img" aria-label="Triangle" data-figure>
<g class="guide" data-guide>
<circle r="100"></circle>
<path d="M-5 0H5M0 -5V5"></path>
</g>
<g class="shape" data-shape>
<path class="shape__line" data-line></path>
<path class="shape__tick" data-tick></path>
</g>
</svg>
<div class="caption">
<p class="name" data-name aria-live="polite"></p>
<p class="spec"><span class="spec__text" data-spec></span></p>
</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.
12 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 «Un lato alla volta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo c’è un cerchio guida tratteggiato, quasi invisibile, con una crocetta al centro. Un triangolo nero sottile si disegna partendo dal vertice in alto mentre si raddrizza e si assesta; accanto cadono una alla volta le lettere di «triangle», strette, e sotto sale «3 sides». Poi su un lato compare una tacca blu: lì nasce il vertice nuovo, che parte dal mezzo del lato, salta fuori fino al cerchio guida, lo supera di un capello e torna. I vicini vengono spinti lungo il cerchio uno dopo l’altro, i più vicini per primi, e ognuno sente il colpo con un piccolo rimbalzo verso il centro. Intanto il nome cambia: le lettere che i due nomi hanno in comune restano e scivolano al loro posto nuovo (la «e» finale da triangle a square, «agon» da pentagon a hexagon, «he» e «agon» da hexagon a heptagon), le altre cadono fuori dalla finestra e quelle nuove cadono dentro, un po’ più pesanti, e si alleggeriscono posandosi. A ogni lato in più il nome si allarga sull’asse wdth. Dopo l’ottagono i lati si incurvano verso il cerchio guida e la linea si apre in alto; i due capi si incontrano, il cerchio si chiude con un piccolo colpo elastico e diventa blu, il cerchio guida sparisce perché ormai coincidono, e il nome «circle» prende peso lettera per lettera. Poi il cerchio si svolge girando, le parole escono e il triangolo si ridisegna. Un clic o un tocco la fa ripartire.
Come funziona
I vertici sul cerchio
La forma è un elenco di vertici, ognuno con un angolo e una distanza dal centro. I poligoni regolari stanno tutti in piedi su un lato piatto: il vertice k di un poligono a n lati sta all’angolo 90° + 180°/n + k·360°/n, quindi il triangolo ha la punta in alto, il quadrato è dritto e il pentagono ha la base piatta. Il cerchio guida, raggio 100 su un disegno largo 260, è il cerchio su cui stanno tutti i vertici.
Dove nasce il lato nuovo
Per passare da n a n+1 lati lo script prova ogni posto per il vertice nuovo e ogni giro possibile degli altri, e tiene quello che sposta meno i vertici (la somma dei quadrati degli angoli da percorrere). Il vertice nuovo parte esattamente in mezzo al lato fra i suoi due vicini, quindi all’inizio non si vede nulla: la forma è la stessa, solo con un vertice in più nel mezzo di un lato.
La molla e l’onda
Il vertice nuovo va al cerchio guida con back.out, che supera il punto di un capello e torna. I vicini vanno al loro angolo nuovo con la molla SPRING, ognuno in ritardo di WAVE secondi per ogni posto di distanza dal nuovo, così la spinta corre lungo il giro come un’onda; nello stesso momento ognuno rientra di un paio di unità verso il centro e torna con elastic.out: è il colpo che sentono. Una tacca blu indica il vertice che nasce e poi vola via.
Dal poligono al cerchio
Ogni lato è disegnato con 24 punti. Un solo valore, round, tira ogni punto verso il cerchio guida lungo il suo raggio: a 0 i lati sono dritti, a 1 sono archi. Il disegno e la cancellazione sono uno stroke-dasharray calcolato sulla lunghezza vera del contorno e contato dal punto più in alto, e lo stesso trucco apre la piccola fessura in alto che si richiude quando il cerchio è finito.
Il nome che cambia
Il nome è diviso in lettere. A ogni cambio lo script cerca le lettere che i due nomi hanno in comune all’inizio e alla fine: quelle restano, e con la tecnica FLIP (posizione prima, posizione dopo, poi un tween di x verso zero) scivolano al loro posto nuovo; le altre vengono tolte dal flusso e cadono fuori da una finestra tagliata con clip-path, quelle nuove cadono dentro dall’alto. La larghezza del nome sull’asse wdth di Archivo va da 70 per il triangolo a 116 per il cerchio, e alla fine il peso sale da 340 a 760 una lettera dopo l’altra. Una timeline in pausa tiene solo i momenti con tl.call, e alla fine riparte pulita con reset e restart.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MAX_SIDES | script.js | 8 | L’ultimo poligono prima del cerchio, da 3 (triangolo) a 12 (dodecagono). |
STEP | script.js | 1.25 | Quanti secondi resta ogni forma prima di prendere un altro lato. |
SPRING | script.js | 'back.out(1.5)' | Come arrivano i vertici spinti: back.out supera di un capello e si assesta; elastic.out(1, 0.5) oscilla di più, power3.out si ferma secco. |
WAVE | script.js | 0.05 | Quanti secondi impiega la spinta a passare da un vertice al successivo: 0 li muove tutti insieme. |
STROKE | script.js | 1.5 | Lo spessore del contorno, in pixel. |
WIDEN | script.js | 46 | Quanto si allarga il nome dal triangolo al cerchio, sull’asse wdth del carattere: 0 lo lascia sempre stretto. |
HOLD | script.js | 2.2 | Quanti secondi resta il cerchio chiuso prima di svolgersi e ricominciare. |
Quando usarla
Per un caricamento elegante o l’apertura di una pagina che parla di forme e di crescita: uno studio di design o di architettura, un corso di geometria o di disegno, una pagina «chi siamo» che racconta un progetto che si completa passo dopo passo, un marchio fatto di linee sottili. Anche per spiegare qualcosa che si avvicina a un ideale un pezzo alla volta.
Sul telefono
La stessa animazione con le misure adattate: la forma sta sopra, quasi larga quanto lo schermo, e il nome sta centrato sotto, più piccolo; le lettere comuni scivolano allo stesso modo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: ogni forma sfuma nella successiva già al suo posto, le lettere nuove compaiono in dissolvenza, il cerchio arriva già chiuso e blu e il nome prende peso senza spostarsi.
Trappole
- GSAP che anima direttamente font-variation-settings da una stringa all’altra non leggeva bene il valore di partenza e il nome per un attimo tornava stretto a ogni cambio: ora si anima un numero semplice e a ogni fotogramma si scrive la stringa.
- Nella colonna larga il nome era allineato a sinistra, ma il suo contenitore era un elemento di una griglia con justify-items: center, quindi si stringeva sul nome e si centrava: a ogni nome nuovo tutta la parola si spostava di lato. Il contenitore ora si allarga su tutta la colonna (justify-self: stretch), e la colonna è larga quanto il nome più largo, misurato all’avvio con la sua larghezza wdth.
- Un fromTo dentro una timeline si disegna subito al momento in cui la timeline viene creata: la riga «5 sides» saltava giù prima di salire via. Serve immediateRender: false.
- La tacca blu che si ritira accorciandosi verso il vertice lasciava un puntino: ora prima esce la punta esterna, poi corre fuori anche quella interna, e sotto una lunghezza minima la tacca si nasconde.
- Le lettere che cadono fuori dalla finestra con un yPercent di 118 lasciavano vedere la cima delle ascendenti e la coda della g sotto il nome: la finestra ha margini per le discendenti, quindi le lettere viaggiano del 150%.
Librerie
GSAP 3.15.0, Archivo (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 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.
