Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Il menu sulla guida
Cinque voci di menu sparse sulla pagina, ognuna sulla sua guida sottile, chi a sinistra, chi al centro, chi a destra. Una guida vermiglia segue il puntatore: la voce sotto di lei e le vicine corrono ad allinearsi, una dopo l'altra, ognuna su una sua molla, e prendono peso; oltre la metà della pagina passano dall'altra parte della guida. Uscendo, tornano ai loro posti. 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>Menu on the guide</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>
<header class="top">
<span class="top__name">Datum</span>
<span class="top__note">Menu</span>
</header>
<!-- five entries, each resting on its own faint guide (flush left, centred or flush right). A thin guide follows the
pointer: the entry under it and the ones next to it run to line up on it, and take weight -->
<nav class="menu" aria-label="Main" data-menu>
<div class="guide" aria-hidden="true" data-guide>
<span class="guide__line"></span>
<span class="guide__readout" data-readout>0</span>
</div>
</nav>
<p class="hint">Point at the menu</p>
</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.
34 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 «Il menu sulla guida» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome dello studio, Datum, e a destra Menu; in mezzo cinque voci grandi in Archivo sottile, Work, Studio, Journal, Prints e Contact, sparse sulla larghezza come in un'impaginazione libera. Ognuna sta sulla sua guida, una linea grigia sottilissima: Work e Prints ci sono appoggiate a sinistra, Studio e Contact a destra, Journal ci sta in mezzo. All'apertura le cinque guide si disegnano una dopo l'altra e le voci salgono dalla loro maschera fino al loro posto. Entrando nel menu col puntatore si apre una guida vermiglia, con una tacca a ogni capo e sopra la sua posizione in pixel: si apre proprio dal punto in cui è entrato il puntatore e da lì lo segue, un poco in ritardo, su una molla. La voce sotto il puntatore corre subito ad appoggiarsi alla guida e passa dal peso 280 al 700; le due vicine partono un istante dopo, su molle più morbide, e prendono metà del peso. Mentre corrono le lettere si stringono un poco, e si riallargano posandosi; ognuna arriva un pixel oltre e torna, e la guida sente il colpo. Muovendo il puntatore di lato le voci allineate lo seguono come una bandiera, le più lontane un poco dietro. Oltre il sessanta per cento della larghezza le voci passano dall'altra parte della guida e ci si appoggiano col fianco destro, una alla volta; tornando sotto il quaranta per cento ripassano a sinistra. Salendo o scendendo si cambia la voce sotto il puntatore e le altre la seguono. Uscendo dal menu la guida si richiude verso l'ultima voce e le voci tornano sulle loro guide, prima quella che era sotto il puntatore e poi le altre, perdendo peso.
Come funziona
Una riga, una guida, una voce
Ogni voce è un link assoluto dentro una riga alta quanto il suo carattere, e si sposta solo con transform: translateX dal bordo sinistro del menu. La sua guida è uno span di un pixel, messo alla sua posizione (da 0 a 1 sulla larghezza). Il posto della voce si calcola dalla guida e dal modo in cui ci sta: x = posizione per larghezza meno l'àncora (0 a sinistra, 0,5 al centro, 1 a destra) per la larghezza della parola, sempre dentro il menu.
La guida che segue
La guida vermiglia è un div di undici pixel con una linea di un pixel disegnata dallo sfondo e una tacca per capo. Si mostra con clip-path: inset(), che si apre dal punto in cui è entrato il puntatore e si richiude verso l'ultima voce, portato da un tween di GSAP. La sua x insegue quella del puntatore su una molla rigida, GUIDE_SPRING, così resta un filo indietro.
Le molle sfalsate
Quando cambia la voce sotto il puntatore, ogni voce riceve il suo ordine (allineati, o torna a casa) con un ritardo di STAGGER secondi per ogni riga di distanza: per questo arrivano una dopo l'altra, e se ne vanno nello stesso modo. Poi ognuna insegue la sua meta su una molla quasi critica, ENTRY_SPRING, più morbida per le voci più lontane: muovendo la guida di lato restano indietro come una bandiera. Le molle si integrano a mano sul ticker di GSAP a passi di 1/240 di secondo.
Il peso e la larghezza
Il peso insegue 280 a riposo, 700 sotto il puntatore e metà strada per le vicine, su una sua molla un poco elastica: quando la voce arriva, il peso va oltre e si assesta. L'asse della larghezza (wdth di Archivo) scende con la velocità della voce, di SQUEEZE al massimo: la parola che corre si stringe e posandosi si riallarga. Le larghezze si rileggono a ogni fotogramma, prima di scrivere, perché cambiano con i due assi.
Il lato, le mani e i tasti
Le voci si appoggiano a destra della guida finché sta sotto il sessanta per cento della larghezza, e a sinistra oltre; per tornare indietro deve scendere sotto il quaranta, così sul confine non sfarfallano. Un solo pointermove sulla finestra cerca la riga dalla fascia d'altezza del menu; fuori dalla fascia le voci tornano. Il dito tocca e trascina, e alzandolo le voci restano allineate un momento prima di tornare. Col tasto Tab la guida si mette sulla guida della voce che prende il fuoco.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ITEMS | script.js | [['Work', 0.08, 'left'], …] | Le voci: il nome, dove sta la sua guida (da 0 a 1 sulla larghezza del menu) e come ci sta (left, center, right). |
REACH | script.js | 1 | Quante voci per parte, oltre a quella sotto il puntatore, si allineano anche loro. |
STAGGER | script.js | 0.07 | I secondi fra una voce e la successiva, all'andata e al ritorno. |
ENTRY_SPRING | script.js | [260, 28] | La molla delle voci: quanto è rigida e quanto è frenata. |
GUIDE_SPRING | script.js | [420, 34] | La molla della guida dietro il puntatore: quanto è rigida e quanto è frenata. |
WEIGHT | script.js | [280, 700] | Il peso delle voci a riposo e sotto il puntatore (da 100 a 900); le vicine prendono metà. |
SQUEEZE | script.js | 16 | Quanto si stringe una voce che corre (asse della larghezza, da 0 a 38). |
GUTTER | script.js | 12 | Lo spazio fra la guida e le voci allineate, in pixel. |
Quando usarla
Per il menu a tutta pagina di uno studio, di un fotografo o di una rivista, per l'indice di un portfolio con poche sezioni, per la pagina dei contatti con quattro o cinque strade: dove le voci sono poche, corte e grandi, e lo spazio vuoto fa parte del disegno. Con più di sette voci o con voci lunghe la pagina si riempie e l'effetto si perde.
Sul telefono
Le stesse animazioni a misure adattate: il menu è largo quanto lo schermo e le voci più piccole. Toccando il menu la guida si apre sotto il dito e lo segue trascinando, in orizzontale e in verticale; alzando il dito le voci restano allineate un momento, poi tornano. Il suggerimento in fondo dice Touch the menu and slide.
Con il movimento ridotto
Niente molle, niente corse e niente stretta delle lettere: la guida compare in dissolvenza e sta sotto il puntatore, le voci che si allineano ricompaiono già al loro posto sulla guida con una breve dissolvenza e prendono peso; uscendo ricompaiono in dissolvenza sulle loro guide. All'apertura tutto compare in dissolvenza già al suo posto.
Trappole
- La guida vermiglia, sopra le voci, tagliava le parole non allineate che le passavano sotto, come una barratura: con z-index la guida sta dietro le voci, e le lettere la coprono.
- Allineate tutte a destra della guida, le voci lunghe uscivano dal menu quando la guida stava a destra. Oltre il sessanta per cento della larghezza si appoggiano dall'altro lato; il ritorno è sotto il quaranta, altrimenti sul confine cambierebbero lato a ogni pixel.
- Peso e larghezza cambiano la misura della parola a ogni fotogramma: per le voci che stanno a sinistra della guida la larghezza va riletta prima di scrivere, altrimenti la parola che prende peso scavalca la guida.
- Con la stessa molla per tutte, le voci allineate seguivano la guida come un blocco solo. Una molla più morbida per ogni riga di distanza le fa arrivare in ritardo, come una bandiera.
- Il pilota delle anteprime manda pointerleave che risalgono da ogni elemento che lascia: l'uscita vera si riconosce dalla fascia d'altezza del menu e, per la pagina, da un pointerout senza relatedTarget fuori dalla finestra.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
