Il menu che si apre dal pulsante

Menu, Transizioni, TestoGSAPMediaPeso compresso: Demo 5,5 KBGSAP 28 KBGratisScarica lo zip

Un menu a tutto schermo che esce dal suo pulsante: un cerchio nero cresce dal pulsante fino a coprire la pagina, le voci salgono una dopo l’altra, il pulsante diventa bianco, le sue due linee si incrociano in una X e «Menu» diventa «Close».

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The menu that opens from its button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/syne@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the button stays above the menu: it opens it and, turned white, closes it -->
  <button class="burger" type="button" aria-expanded="false" aria-controls="menu" data-burger data-autoclic>
    <span class="burger__words" aria-hidden="true">
      <span class="burger__word" data-word-open>Menu</span>
      <span class="burger__word" data-word-close>Close</span>
    </span>
    <span class="sr" data-name>Open the menu</span>
    <span class="burger__icon" aria-hidden="true"><i data-line></i><i data-line></i></span>
  </button>

  <!-- the menu: a black circle that grows out of the button until it covers the page -->
  <nav class="menu" id="menu" aria-label="Main" data-menu inert>
    <ul class="menu__links" data-links>
      <li><a class="menu__link" href="#" data-link><span class="menu__mask"><span class="menu__word" data-rise>Work</span></span><svg class="menu__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
      <li><a class="menu__link" href="#" data-link><span class="menu__mask"><span class="menu__word" data-rise>Studio</span></span><svg class="menu__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
      <li><a class="menu__link" href="#" data-link><span class="menu__mask"><span class="menu__word" data-rise>Journal</span></span><svg class="menu__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
      <li><a class="menu__link" href="#" data-link><span class="menu__mask"><span class="menu__word" data-rise>Contact</span></span><svg class="menu__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
    </ul>
    <div class="menu__foot" data-foot>
      <a href="#">Instagram</a>
      <a href="#">LinkedIn</a>
      <a href="#">Dribbble</a>
    </div>
  </nav>

  <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.

21 valori da cambiare

Apri il Playground

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 che si apre dal pulsante» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca c’è solo un pulsante nero in alto a destra, «Menu» con due linee. Premendolo, un cerchio nero cresce dal pulsante finché copre tutta la pagina; intanto il pulsante diventa bianco, le due linee si incontrano in mezzo e si incrociano in una X con un piccolo rimbalzo, e la parola «Menu» sale lasciando il posto a «Close». Le quattro voci, Work, Studio, Journal e Contact, in un carattere grande e largo, salgono una dopo l’altra dalle loro maschere, inclinate di 6 gradi, e si raddrizzano; in fondo compaiono tre link piccoli. Sotto il puntatore le altre voci si spengono e quella indicata si sposta a destra di 16 pixel mentre una freccia si disegna dopo di lei. Si chiude con il pulsante, con Esc o scegliendo una voce: le voci escono verso l’alto e il cerchio si ritira nel pulsante.

Come funziona

Il cerchio

Il menu è tagliato da un clip-path, circle(raggio at x y), con il centro nel mezzo del pulsante e il raggio fino all’angolo della finestra più lontano. GSAP muove solo il raggio, un numero, e a ogni aggiornamento la stringa del clip-path si riscrive: chiudere a metà di un’apertura riparte da dove si trova il cerchio. Il centro si rimisura a ogni apertura, a ogni chiusura e quando la finestra cambia.

Le voci

Ogni voce sta in una maschera con overflow: hidden e un po’ di spazio sotto per le lettere che scendono. Parte da yPercent 118 e TILT gradi e arriva a zero con power4.out, in RISE[0] secondi, una ogni RISE[1]; cominciano quando il cerchio è al 38% del suo tempo. All’uscita salgono a −118 nell’ordine opposto.

Il pulsante

Le due parole stanno nella stessa cella di una griglia, così il pulsante è largo quanto la più lunga; una sale e l’altra entra da sotto. Le due linee prima si incontrano in mezzo, in 0,18 secondi, poi ruotano di 45 gradi in versi opposti con back.out; al ritorno si raddrizzano e poi si separano. Il colore cambia con una transizione CSS.

La voce indicata

Una classe sulla lista spegne le altre voci fino a DIM; la maschera di quella indicata si sposta di NUDGE pixel e la sua freccia si disegna: è un tratteggio lungo quanto la linea (getTotalLength), riportato a zero. Vale per il mouse e per il tasto Tab, solo quando il focus è visibile (:focus-visible).

Tastiera e focus

Il menu chiuso è inert. Aperto con la tastiera, il focus va alla prima voce; aperto con un dito o col mouse resta sul pulsante. Il tasto Tab gira dentro il menu e il suo pulsante, Esc chiude e il focus torna al pulsante. Mentre il menu è aperto la pagina sotto non scorre.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OPEN`	script.js	`0.9`	I secondi del cerchio che si apre.
`CLOSE`	script.js	`0.65`	I secondi del cerchio che si chiude.
`RISE`	script.js	`[0.9, 0.07]`	Le voci che salgono: i secondi di ognuna e quelli fra una e l’altra.
`TILT`	script.js	`6`	Di quanti gradi è inclinata una voce mentre sale.
`DIM`	script.js	`0.3`	Quanto restano accese le altre voci mentre se ne indica una.
`NUDGE`	script.js	`16`	Di quanti pixel si sposta a destra la voce indicata.

Provali nel Playground

Quando usarla

Per un sito con poche pagine e un carattere forte: un portfolio, uno studio, un marchio. Il menu a tutto schermo dà spazio a voci grandi; con più di sei o sette voci conviene un menu classico.

Sul telefono

Il pulsante è un po’ più piccolo e le voci si stringono alla larghezza dello schermo; il tocco fa come il clic. Senza un puntatore le voci non si spengono, ma il menu si apre e si chiude allo stesso modo.

Con il movimento ridotto

Niente cerchio e niente voci che salgono: il menu compare e scompare in dissolvenza, e il pulsante cambia colore, parola e linee di colpo. Sotto il puntatore le altre voci si spengono comunque e la freccia compare senza disegnarsi.

Trappole

Tra «circle(0px at 100% 0%)» e «circle(1500px at 1200px 40px)» GSAP interpolerebbe numero per numero, anche il centro, e il cerchio viaggerebbe per la pagina: per questo si anima soltanto il raggio e la stringa si scrive a mano.
Il centro del cerchio va misurato quando il menu si apre: misurato una volta sola all’inizio, dopo un cambio di finestra il cerchio partirebbe dal punto sbagliato.
Aperto con la tastiera, il focus va portato dentro il menu e alla chiusura riportato sul pulsante. Aperto con un dito invece no: Safari su iPhone disegnerebbe il bordo del focus sulla prima voce, come se si usasse la tastiera.
Le maschere delle voci hanno uno spazio sotto (un padding con un margine negativo uguale): senza, le lettere che scendono sotto la riga, come la J, restano tagliate.

Librerie

GSAP 3.15.0, Syne (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,5 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 2 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.