View Transitions API patterns are finally usable across browsers in 2026 with broad Chromium and Safari support, and they fundamentally change what is possible in same-document navigations and SPA route changes. The shared-element transitions that used to require Framer Motion or React Transition Group with hundreds of lines of orchestration are now declarative CSS. The teams shipping polished web UI in 2026 are reaching for View Transitions before any animation library. Here is what to use first.
Table of Contents
Same-Document Transitions Are Just startViewTransition
The basic pattern is simple: wrap your DOM mutation in `document.startViewTransition(() => updateDOM())` and the browser snapshots the before/after states and animates between them automatically. The default animation is a cross-fade.
Customize transitions with the `::view-transition-old(root)` and `::view-transition-new(root)` pseudo-elements in CSS. Add custom animation keyframes and you have polished transitions in 20 lines of code total. The MDN View Transition API documentation covers the basics with examples.
Shared Element Transitions With view-transition-name
The killer feature is shared element transitions. Mark elements with `view-transition-name: my-element` in CSS, and matching names before and after the transition will animate between their positions, sizes, and styles automatically.
Click a thumbnail in a grid, navigate to the detail page, and the thumbnail smoothly expands into the hero image — with no JavaScript orchestration. This was the holy grail of web animation for a decade; it is now declarative CSS. Combine with our React Server Components patterns for fast, animated server-rendered apps.
Cross-Document Transitions for MPAs
The Cross-Document View Transitions feature (shipped in Chrome 126+) extends transitions across full page navigations in multi-page apps. Add `@view-transition { navigation: auto; }` to your CSS and same-origin navigations animate by default.
This is huge for content-first sites that do not want to be SPAs. You get SPA-quality transitions on regular page loads with no JavaScript framework required. The performance characteristics are excellent because the browser does the orchestration natively.
Naming Strategies Matter
`view-transition-name` must be unique on the page during a transition. For lists of items, this means generating unique names per item — usually based on a stable ID. Static strings like `view-transition-name: card` will fail or produce unexpected behavior with multiple cards.
Use template literals or CSS `attr()` (where supported) to generate names from data attributes. Modern frameworks are adding helpers — Astro’s `
Disable for Reduced Motion
Always respect `prefers-reduced-motion`. View Transitions can be vestibularly disorienting for some users. Wrap the transition opt-in in a media query or check `matchMedia(‘(prefers-reduced-motion: reduce)’)` before triggering.
The WCAG compliance discussion in our accessibility guide covers the broader pattern of respecting motion preferences. The web.dev guide on View Transitions includes accessibility recommendations.
Wrap Up
View Transitions API patterns are one of the best UX upgrades web platforms have shipped in years. Same-document transitions for SPA route changes, shared-element transitions for grid-to-detail flows, cross-document transitions for MPAs, and proper accessibility handling. Most sites should be using these by default in 2026 — they are progressive enhancement that improves perceived quality dramatically with minimal cost.
Frequently Asked Questions
What’s browser support like?
Chromium 111+ for same-document, Chromium 126+ for cross-document, Safari 18+ for both. Firefox is in development. Use feature detection (`if (‘startViewTransition’ in document)`) for graceful degradation.
Does this replace Framer Motion?
For page transitions and shared element transitions, mostly yes. For complex gesture-driven animations, scroll-linked animations, and physics-based interactions, animation libraries still win.
How do I trigger transitions in React?
Wrap your state update in `document.startViewTransition(() => flushSync(() => setState(…)))`. The flushSync forces React to commit synchronously inside the transition callback. React 19+ may add native helpers.
Will old browsers break?
No — the API is designed to gracefully degrade. Browsers without support just don’t animate. Always wrap in feature detection so non-supporting browsers still get the state update.
How do view transitions affect SEO?
Same-document transitions have no SEO impact (it’s the same URL). Cross-document transitions are full page loads, so SEO is identical to standard MPA navigation. This is one of their advantages over SPA approaches.
