View Transitions
also known asview transitions API · shared element transitions · morph navigation
Native browser animations that morph elements between page states — a thumbnail can grow into a full hero on navigation.
View Transitions is a browser API (`document.startViewTransition`) that captures a snapshot of the current DOM, applies a state change, captures the new state, and animates between them automatically. Shared elements tagged with `view-transition-name` morph smoothly between their old and new positions.
The canonical example: a card thumbnail in a list grows and morphs into the full hero image on the detail page. Previously this required heavy JS (Framer Motion `layoutId`, FLIP, or libraries like Next View Transitions). Now it's a native CSS + JS primitive supported across modern browsers.
Paired with the SPA-friendly `cross-document view transitions`, it works between full page loads too — a feature once exclusive to single-page apps now available to plain HTML sites.
- Card → detail-page navigations (product, blog, portfolio)
- Tab switches and filter changes within a page
- Modal open/close where the trigger should morph into the modal
- Pages with completely unrelated layouts before/after — no morph reads as natural
- Critical-path flows where users navigate fast (the transition adds latency)
- +Tag matching elements with the same `view-transition-name`
- +Keep transitions under 350ms — longer feels sluggish
- +Provide a fallback (instant cut) for browsers without support
- −Don't transition every element — pick 1–2 anchors per route
- −Don't combine with heavy parallax during the transition
People also ask
Which browsers support View Transitions?
Same-document view transitions are supported in all major modern browsers. Cross-document (full page navigation) transitions are supported in Chromium-based browsers and rolling out elsewhere — always provide a graceful fallback.