The idea
Page transitions usually arrive as a grab-bag — one animation for the loader, another for navigation, a third for going back. This lab takes the opposite stance: what if a single gesture carried the entire site? One slide-up reveal — the incoming page rises from below and scales from small to full, settling cleanly over the page it replaces.
One motion, reused
The page-load intro and every page change run the exact same animation. On first load the logo draws in, then the first page slides up to cover it; tap a menu item and the next page slides up the same way. The move itself is plain — translateY(100%) scale(0.7) easing to translateY(0) scale(1) over 0.7s.
Because the loader and the navigation share one reveal, the site reads as a single continuous surface rather than a stack of separate screens.
How it works
Every page is a fixed, full-screen layer stacked in the same spot; only the active one is shown. To navigate, the incoming page is dropped on top, set to its off-screen starting transform, then animated in with the Web Animations API.
The one non-obvious line is a forced reflow — a single getBoundingClientRect() right after setting the start position — which guarantees the first frame paints off-screen and kills the flash that otherwise shows up on fast, pre-cached deployments.
A panel for the feel
Motion is a feeling, and feelings need tuning. A side panel exposes the four variables that define this transition — duration, easing, start scale and direction — and applies them live. Swap the curve for a bounce, drop the scale so pages arrive from further away, flip the direction, then hit Preview and the page replays. It turns one opinionated animation into a small sandbox.
Single file
The whole thing — the pages, the loader, the grayscale backgrounds that recolor the UI as you move, and the live panel — lives in one index.html. No framework, no build step, no dependencies beyond two webfonts. The README ships a copy-paste version of the transition, so dropping it into another project takes a few minutes.
