View transitions

Zazz provides multi-page view transitions without client framework requirements. When navigating same-origin links, <main> content updates with animated transitions while persistent chrome (header and footer) remains stationary.

Architecture

Navigation API: Intercepts same-origin link clicks and swaps <main> content via fetch().
View Transitions API: Wraps the DOM update in animation curves.

Setup

Include the stylesheet and index.js (which bundles navigation.js):

<link rel="stylesheet" href="./zazz/index.css" />
<script type="module" src="./zazz/index.js"></script>

Add transition attributes to header and footer elements (<main> receives transition properties automatically):

<header data-transition-layer="global-header">...</header>
<main>...</main>
<footer data-transition-layer="global-footer">...</footer>

Transition tokens

Animation duration defaults to 0ms. Set --view-transition-duration on :root to activate:

:root {
  --view-transition-duration: 400ms;
  --view-transition-scale--old: 0.98;
}

Token	Default	Description
`--view-transition-duration`	`0ms`	Animation duration (set > 0ms to enable)
`--view-transition-ease`	`var(--bezier-easing)`	Easing curve
`--view-transition-wait`	`0ms`	Delay before incoming animation
`--view-transition-origin`	`center top`	Transform origin
`--view-transition-scale--old`	`1`	Scale of outgoing content
`--view-transition-scale--new`	`1`	Scale of incoming content
`--view-transition-translate--old`	`0, 0, 0`	`translate3d` of outgoing content
`--view-transition-translate--new`	`0, 0, 0`	`translate3d` of incoming content
`--view-transition-opacity--old`	`0`	Final opacity of outgoing content
`--view-transition-opacity--new`	`0`	Starting opacity of incoming content

Transition behavior

Layer name	Transition mode
`main-content`	Animated: outgoing content fades out, incoming fades in
`global-header`	Static: retained across navigations
`global-footer`	Static: retained across navigations

navigation.js handles qualifying same-origin link clicks:

Intercepts navigate events.
Fetches destination HTML and extracts <main>.
Calls document.startViewTransition() to swap DOM nodes.
Updates document.title, restores scroll position, triggers Reveal.refresh(), re-initializes carousels, and focuses the new <h1>.

Fallback behavior

No Navigation API: Performs standard full-page load.
No View Transitions API: Swaps content immediately without animation.
prefers-reduced-motion: Content swaps instantly without transforms.