Page Transition

Modular two-phase transitions between pages: a JS-driven departure curtain that slides over the current content, then a native View Transitions reveal of the new page.

JS departureVT arrival

When the user clicks an internal link:

Departure (JS). page-transition.js intercepts the click, mounts .page-curtain.page-curtain--{variant} and animates it to cover the page (500ms). The current content stays visible beneath the curtain.
Navigation. Once the curtain fully covers, location.href is set. The variant is pushed into the View Transition via the pageswap event.
Arrival (VT). The destination's ::view-transition-new(root):active-view-transition-type(variant) plays the matching reveal animation (500ms).

Total duration: ~1s plus network. Browsers without View Transitions or with JS disabled fall back to instant navigation (graceful).

// default variant ("curtain") on every internal link
<a href="/some-page.html">Visit</a>

// per-link override
<a href="/contact.html" data-transition="fade">Contact</a>

// page-level default (applies to all outgoing links without their own)
<body data-default-transition="slide-left">

// opt-out for a specific link
<a href="/raw.html" data-no-transition>Raw nav</a>

Variants

Six built-in transitions. Click any button to preview the full departure + arrival sequence on this page.

data-transition="…"

Variant Motion curtain Default — slides from top, reveal asymmetric (divide rises back up). Stage-curtain feel. fade Crossfade — opacity-based, no directional motion. slide-down Curtain slides from top, new content reveals downward (continuous motion). slide-up Curtain slides from bottom, new content reveals upward. slide-left Curtain slides from right, new content reveals leftward. slide-right Curtain slides from left, new content reveals rightward.

// pick a variant per link
<a href="/about.html" data-transition="fade">About</a>
<a href="/work.html" data-transition="slide-left">Work</a>

// or set a default for the whole page
<body data-default-transition="slide-up">

Try it across pages

Click any link below to trigger the real cross-document transition.

Internal navigation

Doc pages (dark theme) — each link uses a different variant:

Motion (curtain) Overlay (fade) Hover (slide-left) Bg Blur (slide-up)

Frontend pages (light theme):

Index (slide-right) Accueil (slide-down)

// the destination page also needs the opt-in present synchronously
// (it's inlined in partials/critical.html, loaded on every page)

Curtain color

Override the curtain color globally or per-page with --page-transition-curtain. Default is var(--bs-body-bg-darkest).

--page-transition-curtain

Preview the curtain variant with different colors:

// brand the curtain globally
:root {
  --page-transition-curtain: var(--bs-primary);
}

// or scope to a section / page
.special-section {
  --page-transition-curtain: #000;
}

Accessibility & support

Reduced motion and browser support.

prefers-reduced-motionfallback

When prefers-reduced-motion: reduce is active, the JS interception is skipped and all VT animations collapse to 0.01ms — the user gets instant navigation.

Browsers without View Transitions API support (Firefox) skip the animation and load the next page normally. No polyfill needed.

Caveat: the effect only triggers on same-origin navigation. External links, downloads, target="_blank", modifier-key clicks and anchor-only links (#section) are unaffected.