La campanella che si svasa
Notifiche, Transizioni, Fisica, Testo
NuovaGratis
Tutti i componenti
Il menu dalle tre righe
Le tre righe dell'icona del menu sono il menu: al clic escono dal pulsante a ventaglio come corde, attraversano lo schermo e si posano tremando sotto le voci, dividendosi se le voci sono più di tre, e le parole salgono dalle loro righe. Chiudendo, le righe tornano nel pulsante, dove la X si è riaperta nelle tre righe.
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 three-line menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the button comes before the menu, so the Tab key goes from it into the items; the canvas draws the disc, the
three lines and the X under the clear button -->
<button class="toggle" type="button" aria-expanded="false" aria-controls="menu" data-toggle data-autoclic>
<span class="sr" data-name>Open the menu</span>
</button>
<nav class="menu" id="menu" aria-label="Main" data-menu inert>
<ul class="menu__items" data-items>
<li class="menu__row" data-row><a class="menu__link" href="#" data-link><span class="menu__lift" data-lift><span class="menu__word" data-word>Collection</span><span class="menu__hint" aria-hidden="true">Shop</span></span></a></li>
<li class="menu__row" data-row><a class="menu__link" href="#" data-link><span class="menu__lift" data-lift><span class="menu__word" data-word>Workshops</span><span class="menu__hint" aria-hidden="true">Book</span></span></a></li>
<li class="menu__row" data-row><a class="menu__link" href="#" data-link><span class="menu__lift" data-lift><span class="menu__word" data-word>The kiln</span><span class="menu__hint" aria-hidden="true">Tour</span></span></a></li>
<li class="menu__row" data-row><a class="menu__link" href="#" data-link><span class="menu__lift" data-lift><span class="menu__word" data-word>Journal</span><span class="menu__hint" aria-hidden="true">Read</span></span></a></li>
<li class="menu__row" data-row><a class="menu__link" href="#" data-link><span class="menu__lift" data-lift><span class="menu__word" data-word>Visit us</span><span class="menu__hint" aria-hidden="true">Map</span></span></a></li>
</ul>
</nav>
<!-- the lines, the curtain behind them and the icon of the button: one canvas, redrawn every frame -->
<canvas class="lines" data-canvas aria-hidden="true"></canvas>
<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.
25 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 dalle tre righe» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca c'è solo un pulsante tondo scuro in alto a destra, con le tre righe chiare del menu. Col puntatore sopra, le tre righe sbucano dal pulsante verso sinistra, ognuna di una lunghezza diversa. Cliccando, la pagina sbiadisce in una carta calda e le righe partono: l'estremo sinistro di ognuna corre attraverso lo schermo fino al suo posto mentre quello destro è ancora tenuto dal pulsante, così per un momento si aprono a ventaglio come corde tese, una dopo l'altra; poi gli estremi destri scendono, dal basso verso l'alto, e le corde si posano tremando una sotto l'altra. Le voci sono cinque e le righe tre: quella di sopra dà le prime due righe, quella di mezzo una, quella di sotto le ultime due. Dalle righe salgono le parole Collection, Workshops, The kiln, Journal e Visit us, in un carattere grande con le grazie, ognuna con a destra una parola piccola che dice cosa si fa lì (Shop, Book, Tour, Read, Map); nel pulsante intanto si è disegnata una X. Passando su una voce la sua riga diventa color argilla e viene pizzicata, la parola si fa più piena e morbida. Scegliendo una voce questa diventa la pagina corrente (in corsivo, con la parola piccola color argilla) e il menu si chiude. Chiudendo, le parole affondano nelle righe, la X si riapre nelle tre righe dell'icona e le corde ci tornano dentro, prima gli estremi destri e poi i sinistri, mentre la carta svanisce e torna la pagina bianca.
Come funziona
Un solo disegno
Un canvas fisso sopra la pagina disegna tutto a ogni fotogramma: la carta del menu, le righe, il disco del pulsante e dentro di lui le stesse righe nel colore della carta (tagliate dal disco con clip()), e la X. Le voci sono link veri sopra il canvas; il pulsante vero è un button trasparente nello stesso punto. Così l'icona e le righe del menu sono letteralmente le stesse linee.
Due estremi per riga
Ogni riga ha due numeri, a e b, da 0 a 1: quanto ha viaggiato l'estremo sinistro e quanto il destro, dall'icona alla riga sotto la sua voce. Gli estremi sinistri partono dall'alto con STAGGER secondi fra uno e l'altro e durano REACH; quelli destri scendono dal basso dopo, in LAND. Così il ventaglio si apre senza che una riga ne attraversi un'altra. Con più di tre voci ogni riga dell'icona ne alimenta un gruppo, simmetrico: con cinque voci 2, 1, 2.
Le corde
Ogni riga è una corda di 28 punti. Ogni punto è tirato da una molla verso il suo posto sulla retta fra i due estremi, dai due vicini (la tensione) e frenato: ROPE dà le tre forze. Quando gli estremi corrono il mezzo resta indietro e la corda frusta, poi trema e si ferma. L'integrazione va a passi di 1/240 di secondo in un fotogramma limitato a 1/30; una corda corta, vicino all'icona, è tenuta dritta, così l'icona non si storce mai. Il puntatore che arriva su una voce dà ai punti vicini una spinta in basso a campana: la riga si pizzica.
La X e il ritorno
Nel pulsante la X si disegna quando l'ultima riga è uscita: due tratti che crescono dal centro con back.out. Chiudendo, per prima cosa i due tratti ruotano in piano e scivolano sulla riga di sopra e su quella di sotto mentre quella di mezzo cresce fra loro: sono di nuovo le tre righe, e le corde ci attraccano. Mentre c'è la X le corde dentro al disco non si disegnano, così non si vede un groviglio.
Parole e tastiera
Ogni parola sta in un link tagliato col clip-path proprio sulla sua riga: sale da sotto con yPercent e richiudendo ci affonda. Sotto il puntatore o col focus la parola passa da peso 360 a 520 e l'asse SOFT di Fraunces da 0 a 100. Il pulsante viene prima del menu nel codice, così Tab va dal pulsante alle voci; il menu chiuso è inert, Esc chiude e ridà il focus al pulsante.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STAGGER | script.js | 0.07 | I secondi fra una riga e l'altra. |
REACH | script.js | 0.62 | I secondi in cui l'estremo sinistro di una riga va dal pulsante al suo posto. |
LAND | script.js | 0.55 | I secondi in cui poi scende l'estremo destro. |
ROPE | script.js | [240, 21, 900] | Le righe come corde: quanto sono tirate verso il loro posto, quanto sono frenate, quanto si tengono coi vicini. |
PLUCK | script.js | 800 | Quanto forte si pizzica una riga quando il puntatore arriva sulla sua voce. |
THICK | script.js | 1.5 | Lo spessore delle righe del menu, in pixel (quelle dell'icona sono 2). |
ICON | script.js | 20 | Quanto sono lunghe le righe dell'icona, in pixel. |
Quando usarla
Per il menu a tutto schermo di un sito con poche voci e un carattere che merita spazio: uno studio, una bottega, un ristorante, un portfolio. Da tre a sette voci; con di più le righe si stringono troppo.
Sul telefono
Le voci si stringono alla larghezza dello schermo; le corde fanno lo stesso ventaglio dal pulsante in alto a destra. Senza puntatore le righe non sbucano dal pulsante e non si pizzicano passando, ma il tocco su una voce la pizzica, la fa diventare la pagina corrente e chiude.
Con il movimento ridotto
Le righe non viaggiano e non tremano: la carta del menu, le righe e le parole compaiono in dissolvenza già al loro posto, e nel pulsante le tre righe e la X si scambiano in dissolvenza. Chiudendo, tutto svanisce allo stesso modo.
Trappole
- Se gli estremi destri scendono nello stesso ordine dei sinistri, le righe si incrociano a metà strada: i sinistri partono dall'alto, i destri dal basso, e il ventaglio si apre pulito.
- Una corda corta con le stesse forze di una lunga si storce tutta: dentro al pulsante, prima di partire, l'icona tremava. Sotto una certa lunghezza la corda viene tenuta dritta.
- Ridimensionare un canvas lo cancella: misurando la pagina a ogni apertura il pulsante spariva per un fotogramma. Ora la misura cambia il canvas solo se la sua grandezza è cambiata davvero.
- GSAP scrive una sua proprietà (_gsap) sugli oggetti che anima: leggere tutti i valori di look con Object.values faceva toFixed su un oggetto e rompeva il disegno. I nomi da guardare si prendono una volta sola, all'inizio.
- In un sito vero pulsante e menu vanno prima della pagina nel codice: messi in fondo, il tasto Tab attraverserebbe tutta la pagina prima di arrivarci. Il canvas li ridisegna comunque sopra a tutto.
- La parola deve salire dalla sua riga e non sbucare da sotto: il link ha un clip-path che taglia proprio sul suo bordo basso, dove passa la riga.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
