The page that becomes a card

At the first scroll gesture the page shrinks into a card and four tall cards arrive above it; choose one and its page rises into the gap, then takes the whole screen.

Transitions, ImagesGSAPAdvancedLifetime

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* La pagina che diventa una carta
   La pagina non scorre: il primo gesto di scorrimento (o il pulsante) la rimpicciolisce in una carta,
   appoggiata in basso al centro, mentre sopra arrivano quattro carte alte, una per paesaggio.
   Scegliendone una, la sua pagina sale nello spazio libero sotto un velo scuro e poi si allarga a tutto
   schermo mentre le carte ricadono. La carta del paesaggio in cui sei diventa "Inizio". */
gsap.registerPlugin(CustomEase);
CustomEase.create('mazzo', 'M0,0 C0.7,0.6 0,1 1,1');

/* ---- valori da cambiare ---- */
const DURATA = 1;            /* secondi della pagina che si fa carta (e che torna pagina) */
const SFASATURA = 0.047;     /* secondi fra una carta e la successiva */
const VELO = 0.5;            /* quanto si scurisce la pagina che se ne va */
const VELOCITA = 15;         /* secondi perché la parola grande attraversi uno schermo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const guscio = document.querySelector('[data-guscio]');
const mazzo = document.querySelector('[data-mazzo]');
const carte = [...mazzo.querySelectorAll('.carta')];
const velo = document.querySelector('.velo-scambio');
const pagine = Object.fromEntries([...document.querySelectorAll('[data-pagina]')].map((p) => [p.dataset.pagina, p]));
const ORDINE = carte.map((c) => c.dataset.carta);

/* ogni carta ricorda la sua faccia di paesaggio; quella del paesaggio in cui sei mostra "Inizio" */
const facce = new Map(carte.map((c) => [c, {
  nome: c.querySelector('.carta__nome').textContent,
  testo: c.querySelector('.carta__testo').innerHTML,

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

The page does not scroll. The first wheel movement down, or the button, shrinks it: it rests at the bottom centre, as wide as two cards, and only its top shows. Four tall cards rise above it, one per landscape, each with its colour, a mark, its name standing up and two lines of text. Choose one and that landscape's page rises into the free gap while the old one darkens; then it grows to full screen, the cards fall back in reverse order and the old page drops away. The card of the landscape you are in becomes «Home» and takes you back to the first page.

How it works

Sizing the card

The shrunken page is as wide as two cards plus the gap between them: scale = (2 × card width + gap) / screen width. The transform origin is at the bottom centre, and the page moves down by (height × scale − free space under the deck): so only its top shows, exactly in the space that is left.

The cards arriving

The cards rise from yPercent 110 to 0 in 0.86 seconds, 47 milliseconds apart. Inside each one, a moment later, come the mark (from below), the name (from the right) and the text (from below), 35 milliseconds apart. Everything on the same curve, a cubic-bezier(0.7, 0.6, 0, 1) that starts slowly and brakes for a very long time.

The swap

The chosen page is born already at card scale but half a screen lower: it rises into the gap in half a second while a black veil over the old one reaches 0.5. Then, in one second, the new one goes back to scale 1, the old one drops and disappears, and the cards fall from the last to the first.

The word behind the window

Each page has a huge word scrolling forever behind a square window: side-by-side copies moving by one word and starting again. When the page becomes a card the word stops, and it starts again when the page returns.

Values to change

Name	File	Default	What it changes
`DURATA`	script.js	`1`	Seconds for the page to become a card and back.
`SFASATURA`	script.js	`0.047`	Seconds between one card and the next.
`VELO`	script.js	`0.5`	How dark the leaving page gets.
`VELOCITA`	script.js	`15`	Seconds for the big word to cross one screen.

When to use it

As the main menu of a site with a few strong sections (collections, places, services): the menu becomes the site's most memorable gesture. Not for sites made for long reading.

On phones

The cards become four rows one below the other, the shrunken page takes the deck's width and shows below the last row. The deck opens with the button; outside an iframe also with a swipe up.

With reduced motion

No shrinking page and no scrolling word: the deck fades in over the page and the swap is a crossfade.

Pitfalls

Measure the deck through its container (the grid's getBoundingClientRect), not the cards: the cards are offset by yPercent and would give wrong sizes.
The shrunken page must stay under the deck and the new page above the old one: three layers (old, veil, new) and the deck above all, so the falling cards are visible.
If you turn the wheel into a menu, block it on the shell (non-passive wheel) and add a short pause between gestures, or a single trackpad swipe opens and closes in a row.
Inside an iframe on phones do not steal the finger from the page that contains it: there the deck opens only with the button.

Libraries

GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 26 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 title that rises from a line

Transitions, Text, Images

NewLifetime

The card room

3D, Transitions, Images