View Transitions API

The View Transitions API (Chrome 111+) enables smooth, animated transitions between different states of a page or between page navigations. It captures before and after screenshots and morphs between them using CSS animations — enabling app-like transitions on the web.

Trigger a same-page transition by wrapping a DOM update in document.startViewTransition(() => updateDom()). The browser captures the old state, runs the update, captures the new state, and crossfades between them automatically.

Without any CSS, View Transitions performs a simple crossfade between old and new page states. This single line of JavaScript adds a polished transition that previously required complex CSS animation orchestration or a dedicated animation library.

The API exposes four pseudo-elements: ::view-transition (root overlay), ::view-transition-old(root) (old page screenshot), ::view-transition-new(root) (new page screenshot), and ::view-transition-image-pair(root). Customize them with CSS animations.

Assign view-transition-name: hero-image to an element that persists across the transition. The API morphs this element from its old position/size to its new position/size — creating smooth element-level animation automatically.

Override the default crossfade with custom keyframes on the pseudo-elements: slide in from the right for forward navigation, slide in from the left for back. Target ::view-transition-new(root) and ::view-transition-old(root) with @keyframes.

Cross-document View Transitions (Chrome 126+) animate between full page navigations in multi-page apps. Add @view-transition { navigation: auto; } to CSS — the browser handles the transition between HTML pages automatically, no JavaScript needed.

Users with vestibular disorders should not experience motion-heavy transitions. Wrap transition animations in @media (prefers-reduced-motion: no-preference) to disable custom animations for users who prefer reduced motion while keeping the functional DOM update.

React Router v6.4+, Vue Router, and Astro support View Transitions. Frameworks wrap route changes in startViewTransition automatically. Configure per-route transition styles with view-transition-name on persistent elements like navigation and layout shells.

View Transitions capture screenshots of the page, which can be expensive for complex layouts. Large pages with many composited layers may show jank during capture. Keep transition duration under 300ms and avoid transitioning extremely complex subtrees.

Check API availability before using: if (!document.startViewTransition) { updateDom(); return; }. The fallback updates the DOM normally without animation. View Transitions are progressive enhancement — the app works without them; they simply improve the experience where supported.

The View Transitions API enables crossfade and morph animations between DOM states or page navigations with minimal code. Named transition elements morph automatically; custom pseudo-element animations replace the default crossfade. Respect prefers-reduced-motion and use progressive enhancement for unsupported browsers.