View Transitions

Two demos, two techniques — both built on the same browser API.

Full-page · CSS Level 2 types

speed

Slide

// In your click handler (NavLink / BackLink):
document.startViewTransition({
  update: () => startTransition(() => router.push(href)),
  types: ['nav-slide'],
});

// CSS selects the active type:
// html:active-view-transition-type(nav-slide)
//   ::view-transition-old(root) { ... }

◎

Blur

↗

// In your click handler (NavLink / BackLink):
document.startViewTransition({
  update: () => startTransition(() => router.push(href)),
  types: ['nav-blur'],
});

// CSS selects the active type:
// html:active-view-transition-type(nav-blur)
//   ::view-transition-old(root) { ... }

⊕

Zoom

↗

// In your click handler (NavLink / BackLink):
document.startViewTransition({
  update: () => startTransition(() => router.push(href)),
  types: ['nav-zoom'],
});

// CSS selects the active type:
// html:active-view-transition-type(nav-zoom)
//   ::view-transition-old(root) { ... }

↗

Custom

↗

// In your click handler (NavLink / BackLink):
document.startViewTransition({
  update: () => startTransition(() => router.push(href)),
  types: ['nav-custom'],
});

// CSS selects the active type:
// html:active-view-transition-type(nav-custom)
//   ::view-transition-old(root) { ... }

Shared elements · <ViewTransition name="...">

◈

Shared Elements

Avatar and title morph from post list to detail view — same page, no routes.

↗

About the API

The View Transitions API lets browsers animate between two DOM states — capturing a snapshot before and after a change, then animating ::view-transition-old and ::view-transition-new pseudo-elements with CSS. No animation library required.

Full-page

1.Call startViewTransition({ types }) manually
2.Browser activates :active-view-transition-type()
3.CSS keyframes animate old/new root snapshots

Shared elements

1.<ViewTransition name="id"> wraps the element in both pages
2.React detects matching names across state changes
3.Browser interpolates size, position, and crossfade automatically

MDN Reference Chrome Explainer W3C Spec Can I Use

Chrome 111+ · Edge 111+ · Safari 18.2+ · Firefox in progress