TL;DR — The View Transitions API is the most consequential web UI change of 2026. It enables shared-element animations, cross-page transitions, and choreographed state changes with a few lines of CSS. This cheat sheet is for designers — what it unlocks, what it costs, and how to spec it for engineering.
What the View Transitions API actually does
It lets the browser capture the DOM state before a change, capture it again after, and animate between the two automatically. You mark which elements are “shared” (they persist across states), and the browser handles the morph. That’s the whole model.
What it unlocks for UX
Shared-element transitions between pages
A card on a list page that grows into a full article on click — without the page feeling like it reloaded. Previously only achievable in SPAs with heavy JS orchestration; now a one-line CSS annotation.
Choreographed state changes
Toggling filters on a list, sorting a table, expanding a sidebar — each state change can now have an animated transition that communicates *what changed* without a manual animation.
Smoother navigation, period
Even without shared elements, the default crossfade is a measurable UX improvement over an instant swap — fewer perceived reloads, better continuity.
The designer’s cheat sheet
- `view-transition-name` is the CSS property that marks an element as shared. Unique per element, case-sensitive.
- Default duration is 250ms, ease-out. Override with `::view-transition-group(root) { animation-duration: 400ms; }`.
- Respect reduced-motion. Inside `@media (prefers-reduced-motion: reduce)`, set animation-duration to 0ms — the transition becomes a crossfade.
- Fallback is graceful. Browsers without support skip the transition entirely; design for that baseline.
- Cross-document transitions (page A → page B) require opt-in via `@view-transition { navigation: auto; }`.
Spec’ing it for engineers
When handing off a design with view transitions, designers should call out:
- Which elements are shared (by role, not by Figma layer name).
- Duration and easing per transition.
- Reduced-motion behavior.
- Fallback (what happens if the browser doesn’t support it).
Frequently asked questions
Is the View Transitions API supported everywhere in 2026?
Chrome, Edge, and Safari ship full support. Firefox shipped in-page transitions; cross-document is in origin trial. For most production use cases, it is safe to ship with a graceful fallback.
Does it replace Framer Motion?
No — it complements it. Framer Motion is still the right choice for complex, tightly-controlled interaction motion. View Transitions handle page and state transitions the platform can do natively.
Can I use it in a React app?
Yes. React 19 added `useViewTransition` and `
Found this useful? Read Micro-Interactions in 2026: The New Rules of Motion UX for the companion guide on how motion reshaped product design this year.
