The paper-slip menu

A ticket-shaped button that grows into the menu panel, with news clippings arriving one at a time. On closing, the clippings fall like dropped sheets of paper.

Transitions, HoverGSAP, CSS onlyMediumLifetime

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a 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;

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.

Lifetime access

What it does

At the top right sits a 44-pixel ticket-shaped button, its corners bitten by a quarter circle. Pressing it, the two lines turn into a cross and the ticket itself grows left and down until it becomes the menu panel, while the page darkens. The items drop into place one after the other, the rules under them draw out from the left, and beside them the clippings arrive: they come out of the panel a little askew and straighten up, and the last button arrives with a small bounce. On closing, the clippings do not vanish: they fall past the bottom of the page like dropped sheets, each turning around a different point and tilting in depth, while the panel goes back to being a ticket.

How it works

A ticket that widens

The button and the panel are the same element: a 44-pixel nav that GSAP takes to a third of the screen (420 at most) and to full height, with expo.inOut. The content already has the size of the open panel, so the growing ticket uncovers it instead of reflowing it every frame.

The bitten corners

The shape is a clip-path polygon with five points per corner on a 9-pixel quarter circle centred on the corner, written with calc(100% − …): the same rule works for the button, the panel, the clippings and the coloured tiles, at any size.

The arrival

The items drop from −2rem with a 0.05 stagger; the rules start from scaleX 0 with the origin on the left; the clippings arrive from 8rem to the right and −2rem above, with a random rotation between −7° and 7°, in power3.out; the last button arrives with elastic.out(1.2, 0.55).

The fall

Each clipping gets a random delay, the same for two tweens: one takes it past the bottom of the page with power2.in, faster and faster, and fades it out; the other, with sine.inOut, moves it sideways and turns it up to 58° around a random transform-origin, plus a tilt in depth of up to 40°. Two different curves on the same sheet make a swaying path.

Values to change

Name	File	Default	What it changes
`LATO`	script.js	`44`	The closed ticket, in pixels.
`LARGO`	script.js	`420`	The maximum width of the open panel.
`CADUTA`	script.js	`0.8`	The seconds of the clippings’ fall.
`STORTO`	script.js	`58`	How far a clipping may turn while falling, in degrees.
`--tacca`	style.css	`9px`	The ticket shape: for a different bite, redo the points with another radius.

When to use it

For the menu of a portfolio or a magazine, when you want to show the latest news or recent work beside the items.

On phones

The panel takes the whole screen and the clippings, only the first two, sit inside the panel under the items, on a slightly darker paper.

With reduced motion

The panel appears already full size and everything comes and goes with a two-tenths fade: no growth, no askew sheets, no fall.

Pitfalls

clip-path also cuts outline and box-shadow: the focus mark must be drawn inside the shape, with an inset box-shadow.
If the panel content widens along with the panel, the text keeps rewrapping while it grows: give it the final size straight away and let the ticket uncover it.
With stagger from: 'random' on two different tweens the random order is not the same: to make the same sheet fall and turn together, compute the delays once and use them in both.
Changing transform-origin on an element that is already turned makes it jump: change it only while the clipping is straight, that is at the start of the fall.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 21 KB of our own files.

Testing

Tested on 27 September 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.

From the same family

The liquid grid

Hover, Transitions

NewLifetime

Column shutter

Transitions

NewFree

Marquee that speeds up with scroll

Scroll, Text, Hover

Lifetime

All animations