A Practical Guide to View Transitions
A browser API that animates between two states of a page, or between pages, by capturing snapshots and cross-fading or morphing elements.
Marcus Adeyemi
Why does it matter?
It makes navigation feel app-like with little code, and cross-document transitions work even on multi-page sites.
What are the numbers?
- Same-document transitions started with document.startViewTransition()
- Cross-document transitions enabled with the @view-transition CSS rule
- Naming elements view-transition-name links elements across states
- Reduced motion transitions should respect prefers-reduced-motion
What should I do?
- Start with a simple cross-fade
- Name only the elements that should morph
- Disable or simplify transitions for reduced motion
- Treat transitions as progressive enhancement
- Test on slower devices
What should I avoid?
Avoid:
- Long transitions that slow navigation
- Duplicate view-transition-name values on one page
- Transitions that hide slow page loads
- Ignoring browsers without support
When should I get help?
Short answer Bring in help when adding animated navigation to a site, or when transitions cause visual glitches.
Where this comes from
- MDN Web Docs — View Transition API
- Chrome for Developers — Smooth transitions with the View Transition API
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
