Devii · UI & UX · 2026-06-08 · 7 min read

Share

View Transitions API: Animated Route Changes In Multi-Page And SPA Apps

Cross-document and same-document transitions in supported browsers; progressive enhancement pattern.

The **View Transitions API** lets developers animate DOM updates and navigations with pseudo-elements capturing old and new states. **Same-document** transitions ship widely; **cross-document** transitions extend the model to multi-page navigations in Chromium-class browsers per current docs.

Call `document.startViewTransition(() => updateDOM())` in SPAs. For MPAs, meta tags and navigation hooks opt pages into cross-document transitions where supported.

Design critique session
Design critique session

Respect **`prefers-reduced-motion`**: provide instant cuts when users disable animation. Transitions should aid orientation, not delay interaction.

Specification work continues on `drafts.csswg.org`. Feature-detect before relying on transitions for critical navigation feedback.