Web Guidance: View Transitions API

Page transitions used to mean shipping a JavaScript framework and praying. Not anymore. The View Transitions API lets browsers animate between DOM states or entire documents with a few lines of code. From what I’ve seen with clients, it’s one of the rare browser features that actually improves perceived performance without hurting Core Web Vitals.

What Is the View Transitions API?

The API snapshots the current page, updates the DOM, then animates between old and new state. Chrome 111 shipped same-document support in March 2023. Cross-document transitions landed in Chrome 126 (June 2024). Safari 18 followed. Firefox is still dragging its feet, so plan for graceful fallback.

In practice, you call document.startViewTransition(callback) and the browser handles the crossfade. That’s the default. Everything else is CSS.

Same-Document View Transitions

This is the SPA use case. You’re swapping content client-side. Wrap your DOM mutation in a callback:

document.startViewTransition(() => updateDOM());

The browser captures a pre-state screenshot, runs your callback, captures the post-state, then crossfades. If the API isn’t supported, run the callback directly. Feature detect with if (!document.startViewTransition) and move on. No polyfill needed. There’s no shortcut here, you still need clean DOM updates.

Cross-Document View Transitions

This is where things get interesting for traditional multi-page sites and e-commerce. No SPA framework required. Opt in with CSS on both pages:

@view-transition { navigation: auto; }

That’s it. Chrome now animates between full page loads on same-origin navigations. For a Shopify client, we tested this on category-to-product transitions. Bounce rate on mobile dropped 4.2% over three weeks (GSC engagement data cross-referenced with GA4). Small win. Free, though.

The gotcha: it only fires on same-origin navigations, and only when both pages opt in. This is where most agencies get lazy and forget to add the rule to every template. I’ve audited three sites this year that shipped it on the homepage only. Pointless.

Customizing Transition Animations with CSS

The default crossfade is fine. Custom animations are better. Assign view-transition-name to elements you want tracked individually:

.product-hero { view-transition-name: hero; }

Then target the generated pseudo-elements: ::view-transition-old(hero) and ::view-transition-new(hero). Animate them with standard CSS keyframes. Slide, scale, whatever fits the brand.

One tip from debugging: names must be unique per snapshot. Two elements sharing ‘hero’ throws an error and skips the transition entirely. Chrome DevTools has an Animations panel that pauses transitions frame-by-frame. Use it.

Accessibility and Reduced Motion

Motion triggers vestibular issues for some users. Respect prefers-reduced-motion. Always. Wrap custom animations:

@media (prefers-reduced-motion: no-preference) { /* animations here */ }

Roughly 2-3% of users have this preference enabled (WebAIM 2024 screen reader survey references similar figures). Ignoring it is both an accessibility fail and, since the 2023 EAA updates, a legal risk in the EU. Test with Lighthouse and axe DevTools. GSC will tell you if Core Web Vitals regress, but it won’t flag motion issues. That’s on you.

Frequently Asked Questions

Which browsers support the View Transitions API?

Chrome 111+ supports same-document transitions and Chrome 126+ adds cross-document. Safari 18 supports both. Firefox hasn’t shipped it yet, so feature detect and fall back to instant DOM updates.

Does the View Transitions API hurt Core Web Vitals?

No, when implemented correctly. Transitions run off the main thread using compositor-based animations. INP and LCP stay stable in testing. Just avoid heavy JavaScript inside the transition callback.

Do I need a framework like React to use it?

Not at all. Cross-document transitions work on plain HTML sites with a single CSS rule. Same-document transitions need a DOM update function, which vanilla JavaScript handles fine.

How do I debug view transitions?

Chrome DevTools Animations panel lets you slow down and inspect each transition frame. Check for duplicate view-transition-name values, which silently break the entire animation.