Il menu sotto il foglio

Menu, 3D, Fisica, TransizioniGSAP, CanvasImpegnativaPeso compresso: Demo 9,0 KBGSAP 28 KBGratisScarica lo zip

Il menu nascosto sotto la pagina: premendo Menu la pagina intera si stacca come un foglio, si inclina in 3D e scivola di lato su due molle, con gli angoli che si arrotondano, la luce che cambia sulla sua faccia e un'ombra morbida che cade sul menu. Sotto, le voci entrano a scalinata; premendo la pagina o una voce il foglio torna giù e si posa con un piccolo colpo.

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 under the page</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/hanken-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scene" data-scene>
    <!-- the menu lies under the page: the page lifts off it, tips back and slides aside like a sheet of paper -->
    <nav class="menu" id="menu" aria-label="Main" data-menu inert>
      <ol class="menu__links">
        <li><a class="link" href="#" aria-current="page" data-link><span class="link__word" data-word>Index</span><svg class="link__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
        <li><a class="link" href="#" data-link><span class="link__word" data-word>Projects</span><svg class="link__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
        <li><a class="link" href="#" data-link><span class="link__word" data-word>Studio</span><svg class="link__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
        <li><a class="link" href="#" data-link><span class="link__word" data-word>Journal</span><svg class="link__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
        <li><a class="link" href="#" data-link><span class="link__word" data-word>Contact</span><svg class="link__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
      </ol>
    </nav>

    <!-- the dark under the page, and the shadow the lifted page casts on the menu -->
    <div class="dark" data-dark aria-hidden="true"></div>
    <canvas class="shadow" data-shadow aria-hidden="true"></canvas>

    <!-- the page: a plain sheet of paper with the Menu button in the middle. Once lifted, the whole of it is a button
         that lays it back down -->
    <div class="sheet" data-sheet>
      <div class="page" data-page>
        <button class="burger" type="button" aria-expanded="false" aria-controls="menu" data-burger data-autoclic>
          <span class="burger__word">Menu</span>
          <span class="burger__icon" aria-hidden="true"><i></i><i></i></span>
        </button>
      </div>

      <!-- the light on the tilted page, and the button that covers it while it is lifted -->
      <div class="sheet__light" data-light aria-hidden="true"></div>
      <button class="sheet__cover" type="button" aria-label="Back to the page" data-cover data-autoclic></button>
    </div>
  </div>
  <p class="sr" aria-live="polite" data-live></p>

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

23 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 sotto il foglio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Un foglio color crema copre tutto lo schermo e al centro c'è solo un pulsante scuro, Menu, con due lineette in un cerchio chiaro. Col mouse su Menu il foglio si solleva appena da un angolo e si vede il buio sotto. Premendo, il foglio intero si stacca: si allontana, si inclina all'indietro, gira col bordo sinistro verso chi guarda e scivola a destra portando con sé il pulsante, con gli angoli che si arrotondano, un velo di luce sulla sua faccia e un'ombra morbida che cade sul menu. Lo scivolamento supera di poco il punto d'arrivo e torna. Sotto, il menu esce dal buio: cinque voci grandi in un carattere con grazie, Index, Projects, Studio, Journal e Contact, con la pagina corrente scritta in oro, entrano da destra una dopo l'altra come gradini. Sotto il puntatore una voce diventa più piena e morbida sugli assi del carattere variabile, con una freccia dorata, e le altre si spengono; sopra il foglio sollevato, il foglio si piega un poco verso il basso come se volesse tornare. Premendo il foglio, una voce o Esc, il foglio scivola indietro, si raddrizza e si posa con un piccolo colpo; una voce diventa anche la pagina corrente e passa all'oro.

Come funziona

Due molle per un foglio

La pagina si muove su due numeri, quanto è sollevata e quanto è scivolata, ognuno con la sua molla smorzata (rigidità e smorzamento in LIFT e SLIDE) calcolata a ogni fotogramma in passi di 1/240 di secondo, col passo del fotogramma limitato a 1/30. Aprendo il sollevamento parte prima e lo scivolamento 0,07 secondi dopo; chiudendo il contrario. Scendendo la pagina non può entrare nel menu: tocca zero, rimbalza di poco e si ferma, ed è il piccolo colpo. Quando le due molle si sono fermate (a un millesimo della strada) vengono messe esattamente al loro posto, disegnate un'ultima volta, e da lì in poi il ciclo non tocca più niente: né la trasformazione, né il canvas, né gli stili.

La matrice fatta a mano

Dai due numeri lo script costruisce la matrix3d della pagina moltiplicando le matrici: spostamento di lato e all'indietro, poi attorno al suo centro la torsione, la rotazione sull'asse verticale (il bordo sinistro viene avanti) e quella sull'asse orizzontale. Così sa dove sono i quattro angoli in 3D. Quanto deve scivolare la pagina si calcola su quegli angoli proiettati, perché il suo bordo sinistro passi la voce più larga del menu a qualunque larghezza di schermo.

L'ombra e la luce

Gli angoli si proiettano da una lampada in alto a destra sul piano del menu, che sta sotto la pagina: l'ombra è quel quadrilatero, disegnato su un canvas solo attraverso il suo shadowBlur (la forma è spostata fuori dal canvas), in due strati: stretto e scuro vicino al foglio, largo e morbido lontano. Il canvas è a un quarto della risoluzione, che per una macchia sfocata basta. La luce sulla pagina viene dall'angolo fra la sua faccia e la lampada, confrontato con la pagina piatta: è un velo di colore unito sopra la pagina, chiaro se la guarda di più, scuro se la guarda di meno.

Le voci a scalinata

Le voci entrano da destra con expo.out, una ogni STEP secondi, partendo un poco ruotate attorno al loro angolo in basso: sembrano uscire da sotto la pagina. Sotto il puntatore il carattere Fraunces cambia i suoi assi variabili (peso, morbidezza e la «wonk» delle lettere) con una transizione CSS su font-variation-settings, e le altre voci si spengono. La pagina corrente ha il nome in oro, con aria-current="page".

Pulsanti veri e tastiera

Menu è un button con aria-expanded; aperto, la pagina diventa inert e sopra c'è un altro button grande come lei che la rimette giù. Esc chiude, il tasto Tab gira fra le voci e la pagina, e il fuoco torna su Menu. Prima di aprire, il mouse o il fuoco su Menu sollevano un angolo della pagina; un dito lo fa appena tocca.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LIFT`	script.js	`[170, 0.7]`	La molla che solleva e inclina la pagina: quanto è rigida e quanto è frenata (1 = senza rimbalzo).
`SLIDE`	script.js	`[110, 0.58]`	La molla che fa scivolare la pagina di lato: quanto è rigida e quanto è frenata.
`TILT`	script.js	`9`	I gradi di cui la pagina si inclina all'indietro, attorno al suo centro.
`TURN`	script.js	`17`	I gradi di cui la pagina gira, col bordo sinistro che viene verso chi guarda.
`TWIST`	script.js	`2`	I gradi di cui la pagina si storce mentre sta di lato.
`BACK`	script.js	`240`	Di quanto la pagina si allontana, in pixel.
`STEP`	script.js	`0.07`	I secondi fra una voce del menu e la successiva mentre entrano.
`DEPTH`	script.js	`1500`	La distanza dell'occhio, in pixel: meno, e il 3D è più forte.

Provali nel Playground

Quando usarla

Per il menu a tutto schermo di un sito di uno studio, un portfolio, un'agenzia o una rivista: dove aprire il menu può essere un piccolo momento e la pagina sotto è abbastanza curata da reggere lo sguardo inclinata.

Sul telefono

A 390 pixel il menu sta in una colonna stretta a sinistra e le frecce accanto alle voci spariscono; lo scivolamento si calcola sulla larghezza vera, così il foglio lascia libere le voci e ne resta in vista un bordo da toccare per chiudere. Senza mouse, il dito su Menu solleva l'angolo appena tocca. La pagina non scorre: il menu e il foglio stanno nella finestra.

Con il movimento ridotto

Niente molle né scivolamento: la pagina svanisce e ricompare già sollevata di lato, il menu e le voci compaiono in dissolvenza, e chiudendo la pagina svanisce e ricompare al suo posto. Le voci cambiano peso sotto il puntatore come sempre.

Trappole

Inclinata attorno al suo bordo alto con la prospettiva, la pagina usciva verso l'occhio e diventava enorme: l'inclinazione va fatta attorno al centro, e la pagina va spinta indietro, non in avanti, perché sembri sollevata e intera.
Lo scivolamento non può essere fisso: con la rotazione e la prospettiva il bordo sinistro finisce in un posto diverso a ogni larghezza. Si calcola sulla matrice aperta, tre volte di fila per stabilizzarlo, misurando le voci e non le loro righe (che sono larghe quanto lo schermo) e togliendo lo spostamento che hanno ancora dall'animazione d'uscita.
Un'ombra con filter: blur su un elemento grande come lo schermo, ridisegnata a ogni fotogramma, era troppo lenta: ora è un canvas a un quarto della risoluzione col solo shadowBlur, e un'ombra sfocata non perde niente.
L'ombra va proiettata sul piano del menu, che sta più in basso della pagina sollevata: proiettata sul piano della pagina stessa coincideva con lei e non si vedeva.
Aperto il menu, quello che sta sulla pagina (qui il pulsante Menu, in un sito i suoi link) resterebbe cliccabile sotto la trasformazione: la pagina diventa inert e la copre un pulsante unico che la rimette giù, col suo fuoco visibile.
Fotografata a densità doppia nel browser senza GPU, la pagina inclinata ci metteva più di 30 secondi: tre cose la appesantivano. La classe che dice al compositore che la pagina si muove restava accesa anche da ferma, perché le molle si fermavano un soffio prima della soglia; la luce era un gradiente che cambiava angolo a ogni fotogramma; il fondo del menu era un gradiente grande come la finestra. Ora le molle si fermano a un millesimo e la classe si spegne, la luce è un colore unito e il fondo pure: lo scatto è sceso a un terzo.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Hanken Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,0 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.