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 Technology Preview

View Transition Types

Chrome 125+, Safari Technology Preview

View Transition Classes

Chrome 125+, Safari Technology Preview

Navigation API

Chrome 102+, Safari Technology Preview with flags

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 TP)
• SPA + Types using transitionHelper (Chrome 125+, Safari TP)
• Navigation API (+ Types) (Chrome 111+, Safari TP with flags)
• MPA (Chrome 126+, Safari TP)
• 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 TP)
• MPA (with Prerender) (Chrome 126+)

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 TP)

Video Zoom

Make a video element bigger while it keeps playing.

• MPA leveraging pageswap and pagereveal to transfer state between pages (Chrome 126+, Safari TP)

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 and pagereveal + add render blocking to make sure the #startingPointMarker element is present in the DOM (Chrome 126+)