Il menù dei foglietti

Un bottone a biglietto che cresce fino a diventare il pannello del menù, con i ritagli che arrivano uno alla volta. Chiudendo, i ritagli cadono come fogli lasciati andare.

Transizioni, HoverGSAP, Solo CSSMediaA vita

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.

/* Il menù dei foglietti
   Un bottone a forma di biglietto, con gli angoli morsi, che aprendosi cresce fino a diventare il pannello
   del menù. Intanto le voci scendono al loro posto, le righe si tirano e i ritagli arrivano dal pannello
   uno alla volta, un poco storti, e si raddrizzano. Chiudendo, i ritagli non spariscono: cadono come fogli
   lasciati andare, ognuno girando attorno a un punto diverso, e il pannello torna biglietto. */

/* ---- valori da cambiare ---- */
const LATO = 44;              /* il biglietto chiuso, in pixel */
const LARGO = 420;            /* la larghezza massima del pannello */
const CADUTA = 0.8;           /* secondi della caduta dei ritagli */
const STORTO = 58;            /* quanto può girare un ritaglio mentre cade, in gradi */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const pagina = document.querySelector('[data-pagina]');
const menu = document.querySelector('[data-menu]');
const velo = document.querySelector('[data-velo]');
const biglietto = document.querySelector('[data-biglietto]');
const tasto = document.querySelector('[data-tasto]');
const dentro = document.querySelector('[data-dentro]');
const voci = gsap.utils.toArray('[data-voce]');
const righe = gsap.utils.toArray('[data-riga]');
const piede = document.querySelector('[data-piede]');
const carte = gsap.utils.toArray('[data-ritaglio]');
const tutti = document.querySelector('[data-tutti]');

let aperto = false;

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.

Accesso a vita

Cosa fa

In alto a destra c’è un bottone di 44 pixel a forma di biglietto, con gli angoli morsi da un quarto di cerchio. Premendolo, le due linee diventano una croce e il biglietto stesso cresce verso sinistra e verso il basso fino a diventare il pannello del menù, mentre la pagina si scurisce. Le voci scendono al loro posto una dopo l’altra, le righe sotto di loro si tirano da sinistra, e a fianco arrivano i ritagli: escono dal pannello un poco storti e si raddrizzano, e l’ultimo bottone arriva con un piccolo rimbalzo. Chiudendo, i ritagli non svaniscono: cadono oltre il fondo della pagina come fogli lasciati andare, ognuno girando attorno a un punto diverso e piegandosi in profondità, mentre il pannello torna biglietto.

Come funziona

Un biglietto che si allarga

Il bottone e il pannello sono lo stesso elemento: un nav largo 44 pixel che GSAP porta a un terzo dello schermo (al massimo 420) e a tutta altezza, con expo.inOut. Il contenuto ha già la misura del pannello aperto, così il biglietto crescendo lo scopre, invece di rimpaginarlo a ogni fotogramma.

Gli angoli morsi

La forma è un clip-path polygon con cinque punti per angolo su un quarto di cerchio di 9 pixel centrato nell’angolo, scritti con calc(100% − …): la stessa regola va bene per il bottone, il pannello, i ritagli e le tessere colorate, a qualunque misura.

L’arrivo

Le voci scendono da −2rem con uno stagger di 0,05; le righe partono da scaleX 0 con l’origine a sinistra; i ritagli arrivano da 8rem a destra e −2rem in alto, con una rotazione a caso fra −7° e 7°, in power3.out; l’ultimo bottone arriva con elastic.out(1.2, 0.55).

La caduta

Ogni ritaglio riceve un ritardo a caso, lo stesso per due tween: uno lo porta oltre il fondo della pagina con power2.in, cioè sempre più in fretta, e lo spegne; l’altro, con sine.inOut, lo sposta di lato e lo gira fino a 58° attorno a un transform-origin a caso, più una rotazione in profondità fino a 40°. Due curve diverse sullo stesso foglio danno una traiettoria che ondeggia.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LATO`	script.js	`44`	Il biglietto chiuso, in pixel.
`LARGO`	script.js	`420`	La larghezza massima del pannello aperto.
`CADUTA`	script.js	`0.8`	I secondi della caduta dei ritagli.
`STORTO`	script.js	`58`	Quanto può girare un ritaglio mentre cade, in gradi.
`--tacca`	style.css	`9px`	La forma a biglietto: per un morso diverso, rifai i punti con un altro raggio.

Quando usarla

Per il menù di un portfolio o di una rivista, quando accanto alle voci si vogliono mostrare le ultime notizie o i lavori recenti.

Sul telefono

Il pannello prende tutto lo schermo e i ritagli, solo i primi due, stanno dentro il pannello sotto le voci, su una carta un poco più scura.

Con il movimento ridotto

Il pannello compare già grande e tutto arriva e se ne va con una dissolvenza di due decimi: niente crescita, niente fogli storti, niente caduta.

Trappole

clip-path taglia anche outline e box-shadow: il segno del fuoco va disegnato dentro la forma, con un box-shadow inset.
Se il contenuto del pannello si allarga insieme al pannello, il testo va a capo in continuazione mentre cresce: dagli subito la misura finale e lascia che il biglietto lo scopra.
Con stagger from: 'random' su due tween diversi l’ordine a caso non è lo stesso: per far cadere e girare insieme lo stesso foglio, calcola i ritardi una volta e usali in tutti e due.
Cambiare transform-origin a un elemento già girato lo fa saltare: si cambia solo quando il ritaglio è dritto, cioè all’inizio della caduta.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Peso: 21 KB dei nostri file.

Collaudo

Provata il 27 settembre 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.

Della stessa famiglia

La griglia liquida

Hover, Transizioni

NuovaA vita

Otturatore a colonne

Transizioni

NuovaGratis

Nastro che accelera con lo scorrimento

Scroll, Testo, Hover

A vita

Tutte le animazioni