Il menu di condivisione a moduli
Menu, Transizioni, Hover, Testo
NuovaGratis
Tutti i componenti
Il menu di carta velina
Nello stile minimal: il menu di una piccola casa editrice come un blocchetto di carta velina. Premendo Menu i fogli cadono da sotto il pulsante uno dopo l'altro, incernierati sul bordo in alto come le pagine di un blocco, e si posano su una molla misurata; ogni foglio copre il fondo di quello sopra, e la carta è così sottile che il bordo si vede in trasparenza. Sotto il puntatore il foglio si solleva sulla sua cerniera, la parola prende peso e l'angolo si piega; la pagina in cui sei ha l'orecchia vermiglia.
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 tissue paper menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu of a small publisher, stacked like sheets of tissue paper. At rest only the Menu button. Pressed, the
sheets fall from under it one after the other, hinged on their top edge like pages of a pad, each settling a
hair too far and back; each one overlaps the one above, and through the thin paper the edge below shows.
Under the pointer a sheet lifts on its hinge and the sheets below it make room; the chosen one gets the
vermilion corner -->
<div class="pad" data-frame>
<button class="toggle" type="button" aria-expanded="false" aria-controls="pad-menu" data-toggle data-autoclic>
<span class="toggle__icon" aria-hidden="true">
<svg viewBox="0 0 22 18" width="22" height="18">
<rect class="toggle__sheet" data-icon-sheet x="1.5" y="1.5" width="15" height="11" rx="1"></rect>
<rect class="toggle__sheet" data-icon-sheet x="5.5" y="5.5" width="15" height="11" rx="1"></rect>
</svg>
</span>
<span class="toggle__words" aria-hidden="true">
<span class="toggle__word" data-word-open>Menu</span>
<span class="toggle__word" data-word-close>Close</span>
</span>
<span class="sr" data-toggle-name>Open the menu</span>
</button>
<nav class="menu" id="pad-menu" aria-label="Main" data-menu inert>
<ul class="sheets" data-sheets>
<li class="sheet" data-sheet><a class="sheet__link" href="#books" aria-current="page" data-link>
<span class="sheet__paper" aria-hidden="true"></span>
<span class="sheet__word" data-word>Books</span>
<span class="sheet__note">New and forthcoming</span>
<span class="sheet__fold" aria-hidden="true" data-fold></span>
</a></li>
<li class="sheet" data-sheet><a class="sheet__link" href="#authors" data-link>
<span class="sheet__paper" aria-hidden="true"></span>
<span class="sheet__word" data-word>Authors</span>
<span class="sheet__note">Who we publish</span>
<span class="sheet__fold" aria-hidden="true" data-fold></span>
</a></li>
<li class="sheet" data-sheet><a class="sheet__link" href="#journal" data-link>
<span class="sheet__paper" aria-hidden="true"></span>
<span class="sheet__word" data-word>Journal</span>
<span class="sheet__note">Notes from the press</span>
<span class="sheet__fold" aria-hidden="true" data-fold></span>
</a></li>
<li class="sheet" data-sheet><a class="sheet__link" href="#shop" data-link>
<span class="sheet__paper" aria-hidden="true"></span>
<span class="sheet__word" data-word>Shop</span>
<span class="sheet__note">Prints and editions</span>
<span class="sheet__fold" aria-hidden="true" data-fold></span>
</a></li>
<li class="sheet" data-sheet><a class="sheet__link" href="#contact" data-link>
<span class="sheet__paper" aria-hidden="true"></span>
<span class="sheet__word" data-word>Contact</span>
<span class="sheet__note">Write to us</span>
<span class="sheet__fold" aria-hidden="true" data-fold></span>
</a></li>
</ul>
</nav>
</div>
</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.
29 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 di carta velina» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco c'è solo il pulsante: la parola Menu, in un serif sottile, e accanto due piccoli fogli disegnati a filo, uno sopra l'altro. Col mouse sopra la parola prende peso e il foglio davanti scivola un poco giù. Premuto, Menu sale e al suo posto arriva Close, i due foglietti dell'icona si separano, e da sotto il pulsante cadono cinque fogli di carta velina color avorio, uno dopo l'altro: Books, Authors, Journal, Shop e Contact. Ogni foglio è incernierato sul suo bordo in alto e si apre in giù come la pagina di un blocco girata, passa di un grado oltre il piano e torna. Ogni foglio copre il fondo di quello sopra, e la carta è così sottile che sotto si vede il bordo dell'altro; un velo di fibre la rende carta. A destra di ogni parola una nota corsiva dice cosa c'è dietro. Il foglio della pagina in cui sei ha l'angolo in alto a destra piegato all'ingiù, vermiglio, e la parola un po' più pesante. Passando col mouse su un foglio, quello si solleva sulla cerniera di tredici gradi, la parola diventa piena e morbida, il suo angolo si piega in un'orecchia color carta, e i fogli sotto scendono di nove pixel per fargli posto. Cliccando, il foglio si schiaccia un attimo, prende l'orecchia vermiglia, e il blocco si richiude dall'ultimo foglio al primo, ognuno che risale ripiegandosi sotto il pulsante.
Come funziona
Fogli incernierati in alto
Ogni voce è un li in posizione assoluta con transform-origin al centro del bordo in alto, dentro un contenitore con perspective di 900 pixel e preserve-3d. Chiuso, ogni foglio sta a y 0 sotto il pulsante con rotationX -96: girato oltre il taglio, quindi invisibile. GSAP muove il li; il disegno (carta, parola, nota, orecchia) sta nei figli, così il transform di GSAP non cancella quello del CSS.
La caduta su una molla
Aprendo, una timeline porta ogni foglio da rotationX -96 a 0 e da y 0 alla sua riga, con elastic.out(1, SETTLE) in FALL secondi e STAGGER fra un foglio e l'altro: il foglio passa di un grado oltre il piano e si posa. L'opacità va a 1 nei primi 0,18 secondi, mentre il foglio è ancora di taglio.
La carta che si vede attraverso
Il foglio è alto una riga più OVERLAP, quindi copre il fondo di quello sopra, e i fogli dopo stanno sopra quelli prima. Il colore della carta ha alfa 0,8: dove due fogli si sovrappongono la carta è più scura e il filetto del bordo sotto si legge in trasparenza. Le fibre sono un feTurbulence con frequenze diverse in orizzontale e in verticale, in un SVG come immagine di fondo.
Il foglio sotto il puntatore
place() rimette ogni foglio dove deve stare: il foglio caldo con rotationX LIFT (la cerniera in alto lo fa venire avanti dal fondo), quelli sotto spostati di ROOM pixel in giù, con back.out. Il peso della parola è una variabile CSS (--wght) che GSAP anima e che font-variation-settings legge insieme a opsz e SOFT di Fraunces; l'orecchia è un triangolo con clip-path che si apre con scale dall'angolo.
Scegliere e richiudere
Il clic schiaccia il foglio con scaleY 0,96 avanti e indietro, sposta aria-current e l'orecchia vermiglia, poi dopo 0,55 secondi (gsap.delayedCall) il blocco si richiude: i fogli risalgono a rotationX -96 dall'ultimo al primo con power3.in e spariscono quando sono di nuovo di taglio.
Tastiera e giro dell'anteprima
Il pulsante ha aria-expanded e aria-controls, la nav è inert da chiusa. Le frecce, Home e Fine passano il fuoco da un foglio all'altro e il fuoco solleva il foglio come il mouse; Tab gira fra il pulsante e le voci, Esc chiude e riporta il fuoco sul pulsante. Il clic dell'anteprima (detail 0, senza un tasto appena premuto) fa un giro: apre, scende sui fogli, ne sceglie uno e chiude; il giro dopo sceglie l'altro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FALL | script.js | 0.95 | I secondi che un foglio impiega a cadere da sotto il pulsante alla sua riga. |
STAGGER | script.js | 0.07 | I secondi fra un foglio e l'altro, all'apertura e alla chiusura. |
SETTLE | script.js | 0.62 | Quanto calmo si posa un foglio: basso oscilla oltre la riga, alto si ferma subito (da 0,3 a 1). |
LIFT | script.js | 13 | Di quanti gradi si solleva sulla cerniera il foglio sotto il puntatore. |
ROOM | script.js | 9 | Di quanti pixel scendono i fogli sotto per fargli posto. |
WEIGHT | script.js | [330, 640] | Il peso di una parola a riposo e sul foglio sotto il puntatore (da 100 a 900). |
OVERLAP | script.js | 0.2 | Quanto di ogni foglio resta sotto quello dopo, in parti di una riga. |
Quando usarla
Per il menu di chi lavora con la carta e le parole: una casa editrice, una libreria, una rivista, un blog personale, una cartoleria, uno studio di grafica. Sta bene con quattro, cinque o sei voci corte su un fondo chiaro; la nota a destra dice in due parole cosa c'è dietro.
Sul telefono
Il blocco è largo quanto lo schermo meno 32 pixel (al massimo 440) e l'altezza delle righe si prende dall'altezza della finestra, così pulsante e cinque fogli stanno sempre dentro; sotto i 380 pixel le note a destra non ci sono. Le stesse animazioni: i fogli cadono e si posano sulla molla. Il tocco su un foglio lo sceglie e richiude il blocco.
Con il movimento ridotto
Niente cadute né sollevamenti: aprendo, i fogli compaiono in dissolvenza già al loro posto, uno appena dopo l'altro; sotto il puntatore cambiano solo il peso della parola e l'orecchia. Chiudendo i fogli sfumano.
Trappole
- Il transform di GSAP sul li cancellerebbe quello del CSS: la carta, la parola e l'orecchia stanno nei figli, e l'orecchia ha il suo scale animato da GSAP fin dall'inizio.
- Il clic dell'anteprima e Invio sul pulsante fanno tutti e due un clic senza dettagli (detail 0): un tasto Invio o Spazio appena premuto apre il menu e porta il fuoco sulla pagina corrente, senza il giro.
- Con le righe a misura fissa il blocco aperto usciva sotto la casella del telefono: l'altezza delle righe ora si prende dall'altezza della finestra, fra 40 e 64 pixel.
Librerie
GSAP 3.15.0, Fraunces (font variabile, con gli assi del peso, della dimensione ottica e della morbidezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
