View Transitions
A collection of demos to show off View Transitions.
Browser Support
The demos listed on this site rely on several features related to View Transitions that can ship individually in browsers. Because of that, some demos won’t work entirely or not at all depending on which browser you are using.
- Same-Document View Transitions
- Chrome 111+
- Safari 18+
- Cross-Document View Transitions
- Chrome 126+
- Safari 18.2+
- View Transition Types
- Chrome 125+
- Safari 18.2+
- View Transition Classes
- Chrome 125+
- Safari 18.2+
- Navigation API
- Chrome 102+
- Safari Technology Preview with flags
- Auto View Transition Naming
- Chrome with
#enable-experimental-web-platform-features
flag - Safari 18.2+
- Chrome with
- Nested View Transition Groups
- Chrome with
#enable-experimental-web-platform-features
flag
- Chrome with
When your browser does not support one of the required features, a warning will be shown on screen.
The Demos
Note: SPA = uses Same-Document View Transitions; MPA = uses Cross-Document View Transitions.
Pagination
Pagination component that slides the page based on the direction you are going.
- SPA (Chrome 111+, Safari 18+)
- SPA + Types (Chrome 125+, Safari 18.2+)
- SPA + Types using
transitionHelper
(Chrome 125+, Safari 18.2+) - Navigation API (+ Types) (Chrome 111+, Safari TP with flags)
- MPA (Chrome 126+, Safari 18.2+)
- MPA + Navigation API upgrade (Chrome 111+, Safari TP)
Stack Navigator
Chat application that sports a Stack Navigator type of transitions.
- SPA (Chrome 111+, Safari 18+)
- Navigation API (Chrome 111+, Safari TP with flags)
- MPA (Chrome 126+, Safari 18.2+)
- MPA (with Prerender) (Chrome 126+, Safari 18.2+ (without prerendering))
Profiles
List of profiles, with overview - detail navigation
- MPA + Navigation API (Chrome 126+)
Cards
Add/remove cards to the list. Has entry/exit animations and also uses view-transition-class
.
- SPA with
view-transition-class
(Chrome 125+, Safari 18.2+) - SPA with
view-transition-class
andview-transition-name: auto
(Chrome with#enable-experimental-web-platform-features
flag, Safari 18.2+)
Video Zoom
Make a video
element bigger while it keeps playing.
- MPA leveraging
pageswap
andpagereveal
to transfer state between pages (Chrome 126+, Safari 18.2+)
Circle
A circular clip path reveal from one view/page to the other.
- SPA (Chrome 111+, Safari 18+)
- MPA + Navigation API: Transfer the state using
pageswap
andpagereveal
+ add render blocking to make sure the#startingPointMarker
element is present in the DOM (Chrome 126+, Safari TP with flags)
Off the Beaten Path
A more complex demo with multiple elements animating in sequence
- SPA
- MPA + Navigation API leveraging
pageswap
andpagereveal
to transfer state between pages (Chrome 126+, Safari TP with flags)
Sortable
List of sortable items inside a scrollable container
- Nested View Transition Groups with
view-transition-group
(Chrome with#enable-experimental-web-platform-features
flag)