Il menu dalle tre righe
Menu, Transizioni, Fisica, Testo
NuovaGratis
Tutti i componenti
I passi che si dividono la riga
I quattro passi di un acquisto, Bag, Delivery, Payment e Review, scritti grandi in una riga che riempie sempre la stessa misura al pixel: il passo in corso si prende lo spazio, largo e pesante, gli altri si stringono sull’asse della larghezza per farglielo. Andando avanti lo spazio passa al nome dopo su una molla e il peso lo segue un attimo più tardi; i passi fatti restano neri ma leggeri. Sottili righe dividono i passi, e le due intorno a quello in corso sono nel colore d’accento. 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>The steps that share the line</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>
<!-- the checkout steps: four names that share one measure to the pixel. The current step takes the room, wide
and heavy; the others squeeze on the width axis to make it. Going on, the room flows to the next name on a
spring and the weight follows a beat later; the steps done stay in ink, light. Thin rules mark where one
step ends and the next begins; the script places them, and the two around the current step are in the accent -->
<section class="steps" aria-label="Checkout" data-steps>
<div class="steps__row">
<ol class="steps__list" data-row>
<li class="step" data-step><button class="step__btn" type="button"><span class="step__mask"><span class="step__name">Bag</span></span></button></li>
<li class="step" data-step><button class="step__btn" type="button"><span class="step__mask"><span class="step__name">Delivery</span></span></button></li>
<li class="step" data-step><button class="step__btn" type="button"><span class="step__mask"><span class="step__name">Payment</span></span></button></li>
<li class="step" data-step><button class="step__btn" type="button"><span class="step__mask"><span class="step__name">Review</span></span></button></li>
</ol>
<div class="steps__rules" aria-hidden="true" data-rules></div>
</div>
<!-- what is in the current step: it travels with the step's left edge -->
<p class="steps__note" aria-live="polite" data-note><span class="note__track" data-note-track><span class="roll__item">2 items · $148.00</span></span></p>
<div class="steps__actions">
<button class="back" type="button" data-back>
<svg class="back__arrow" viewBox="0 0 16 14" aria-hidden="true"><path d="M15 7H1.5M7 1.5L1.5 7 7 12.5"/></svg>
<span class="back__text">Back</span>
</button>
<button class="next" type="button" data-next data-autoclic>
<span class="next__body" aria-hidden="true"></span>
<span class="next__text" data-next-text><span class="roll__item">Continue</span></span>
<svg class="next__arrow" viewBox="0 0 16 14" aria-hidden="true"><path d="M1 7h13.5M9 1.5L14.5 7 9 12.5"/></svg>
</button>
</div>
</section>
</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.
36 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 «I passi che si dividono la riga» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco quattro nomi in Roboto Flex, Bag, Delivery, Payment e Review, uno accanto all’altro, divisi da cinque righe verticali sottilissime. Il passo in corso è nero, pesante e largo; gli altri sono strettissimi e sottili, grigi quelli da fare e neri quelli fatti, e tutti insieme riempiono sempre la stessa misura, dalla prima riga all’ultima. Le due righe intorno al passo in corso sono vermiglie. Sotto, una riga piccola dice cosa c’è in quel passo (2 items · $148.00, Arrives Thursday, by 6 pm…) e viaggia col bordo sinistro del passo; più sotto Back e un pulsante nero a pillola, Continue. Premendo Continue lo spazio passa dal nome in corso al successivo su una molla: il primo si stringe mentre il secondo si allarga, va di un soffio oltre e si posa, e le righe scorrono con loro; il peso arriva un attimo dopo, così il nome nuovo prima si apre e poi si riempie, mentre quello lasciato si alleggerisce e resta nero. Quando lo spazio si posa le due righe vermiglie sentono il colpo e si allungano un poco. Back fa il contrario. All’ultimo passo il pulsante dice Place order: a ordine fatto i quattro nomi, tutti leggeri e neri, si dividono la misura in parti quasi uguali, tutte le righe sentono il colpo una dopo l’altra e il pulsante diventa Keep shopping, che fa tornare lo spazio al primo passo attraversando gli altri. Un passo fatto è un pulsante che riporta indietro fino a lui: col puntatore sopra prende peso e si tinge di vermiglio senza uscire dalla sua colonna.
Come funziona
Una tabella di larghezze, misurata una volta
Quando il carattere è arrivato (document.fonts.load), ogni nome si scrive 154 volte in un contenitore nascosto, a 22 valori dell’asse wdth e 7 pesi, a 100 pixel; le larghezze si leggono tutte insieme, in un solo calcolo della pagina, e si tengono divise per la misura del carattere, perché crescono con lei. L’asse opsz resta fisso a 96 sia nella tabella sia sulla pagina: lasciato libero, cambierebbe le larghezze con la grandezza del testo.
Lo spazio e il peso, due molle in passi
Dove sta lo spazio e dove sta il peso sono due numeri in passi (0 è Bag, 4 l’ordine fatto), ognuno sulla sua molla, integrati insieme a passi di 1/240 di secondo col passo del fotogramma limitato a 1/30. La molla dello spazio, ROOM_SPRING, è più rigida e va di un soffio oltre; quella del peso, WEIGHT_SPRING, più morbida e senza rimbalzo: il nome nuovo prima si apre e poi si riempie. Quanto un passo è quello in corso è una campana di larghezza un passo intorno al numero, quanto è fatto uno smoothstep.
La riga che si riempie al pixel
A ogni fotogramma ogni nome dice quanto vorrebbe essere largo, dalla tabella, al suo asse naturale (WIDE per il passo in corso, NARROW per gli altri) e al suo peso. La misura, tolto il margine dei passi, si divide in proporzione; poi per ogni nome si cerca nella tabella, con un’interpolazione lineare, il valore di wdth che lo fa largo esattamente la sua parte. Un nome corto può finire l’asse (Bag, al più largo, resta corto): tiene il suo massimo e gli altri si dividono quello che resta, finché i conti tornano.
Le righe e il colpo
Le righe verticali stanno dove finisce un passo e comincia l’altro, quindi viaggiano con la stessa molla senza animazioni loro; la loro tinta si mescola in CSS con color-mix fra il grigio e il vermiglio secondo quanto incorniciano il passo in corso. Quando lo spazio arriva al passo che cercava, le due righe intorno a lui si allungano di BLOW e tornano con un elastico corto; a ordine fatto lo fanno tutte, una dopo l’altra. Il colpo va sull’elemento interno della riga, perché quello esterno lo sposta lo script.
La riga che viaggia, i pulsanti e i tasti
La riga sotto i passi segue il bordo sinistro del passo in corso, calcolato dalle stesse colonne, e non esce mai dalla misura; le sue parole e quelle del pulsante rotolano, la vecchia esce prima e la nuova sale dopo. La pillola prende la larghezza delle parole nuove. I passi fatti sono pulsanti col loro aria-label, quello in corso ha aria-current="step", Back resta raggiungibile con aria-disabled; le frecce destra e sinistra vanno avanti e indietro. Un passo fatto sotto il puntatore prende HOVER_WEIGHT di peso, e il risolutore lo stringe sull’asse wdth perché resti nella sua colonna.
Il giro dell’anteprima
Un clic fatto da uno script (isTrusted falso, quello dell’anteprima) non fa un passo ma avvia una timeline GSAP che mostra tutti gli stati: due passi avanti, uno indietro, di nuovo avanti fino all’ultimo, l’ordine fatto e il ritorno al primo passo. Un clic vero, un tocco o un tasto la fermano dove si trova; quando niente si muove, il ciclo dei fotogrammi si spegne.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NOTES | script.js | ['2 items · $148.00', …] | La riga sotto i passi: una per passo e una in più per l’ordine fatto. |
ACTIONS | script.js | ['Continue', 'Place order', 'Keep shopping'] | Le parole del pulsante: lungo la strada, all’ultimo passo e a ordine fatto. |
ROOM_SPRING | script.js | [230, 0.74] | La molla che passa lo spazio da un passo all’altro: quanto è rigida e quanto è smorzata (1 vuol dire senza andare oltre). |
WEIGHT_SPRING | script.js | [95, 0.9] | La molla del peso, che arriva dopo lo spazio: quanto è rigida e quanto è smorzata. Più morbida, più il nome nuovo resta aperto e sottile prima di riempirsi. |
WEIGHT | script.js | [300, 820, 230] | Il peso di un nome: un passo da fare, il passo in corso, un passo fatto (da 100 a 1000). |
WIDE | script.js | 128 | La larghezza del carattere (asse wdth) a cui punta il passo in corso, prima che la misura si divida (da 25 a 151). |
NARROW | script.js | 44 | La stessa cosa per gli altri passi (da 25 a 151): più bassa, più il passo in corso si prende spazio. |
HOVER_WEIGHT | script.js | 160 | Quanto peso prende un passo fatto col puntatore sopra: resta comunque nella sua colonna. |
MEASURE | script.js | 620 | La misura più larga che la riga può avere, in pixel. |
MAX_SIZE | script.js | 48 | La grandezza più grande dei nomi, in pixel: arrivata lì, è la misura che si stringe per stare coi nomi. |
BLOW | script.js | 0.16 | Quanto si allungano le due righe intorno al passo quando lo spazio ci arriva (da 0 a 0,6). |
Quando usarla
Per il checkout di un negozio online, una prenotazione, un’iscrizione o un modulo lungo diviso in tre, quattro o cinque passi con nomi corti: dove i passi sono anche il titolo della pagina e la tipografia deve dire da sola a che punto si è, senza numeri, icone né cerchi.
Sul telefono
Le stesse animazioni a misure adattate: la riga prende la larghezza dello schermo e i nomi si fanno più piccoli quanto basta per riempirla, sempre al pixel; la riga sotto i passi resta dentro la misura anche quando il passo in corso è l’ultimo, e i due pulsanti vanno ai due lati, Back a sinistra e la pillola a destra. Col tocco si va avanti, indietro e si torna a un passo fatto toccandolo.
Con il movimento ridotto
Niente molle e niente colpo sulle righe: lo spazio, il peso e le righe sono subito al loro posto nuovo e la riga dei passi ricompare con una breve dissolvenza; le parole sotto i passi e nel pulsante cambiano in dissolvenza, la vecchia prima e la nuova dopo. All’apertura tutto compare in dissolvenza.
Trappole
- La tabella è misurata a 100 pixel e i nomi stanno a 44: con la grandezza ottica lasciata al browser (font-optical-sizing) l’asse opsz cambierebbe il disegno e la larghezza delle lettere fra le due misure, e la riga non tornerebbe. Per questo opsz è fisso a 96 sia nella tabella sia sulla pagina.
- Bag, il nome più corto, con lo spazio del passo in corso arrivava in fondo all’asse wdth e la riga restava corta di una quindicina di pixel: un nome che finisce l’asse tiene il suo massimo e gli altri si dividono il resto.
- Prima che il carattere arrivasse la tabella si faceva col carattere di riserva e i nomi uscivano dalla misura: la riga resta nascosta finché document.fonts.load non ha finito (con un ripiego dopo 2,5 secondi), e la tabella si rifà quando arrivano tutti i caratteri.
- Col movimento ridotto le due righe sotto i passi si incrociavano in dissolvenza e per un attimo si leggevano una sopra l’altra: la vecchia svanisce prima, la nuova arriva dopo.
- La riga sotto i passi, che segue il passo in corso, all’ultimo passo usciva dalla misura a destra: si ferma dove la sua fine tocca l’ultima riga verticale.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 18 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.
