View Transitions

A collection of demos to show off View Transitions. Built by Bramus, Chrome DevRel at Google.

View Transitions?

With View Transitions you can have smooth transitions between two states of your website. These two states can be smaller things, such as two items that swap places, or full layout changes.

The trigger for the state change can be done through script – by calling document.startViewTransition() – or by navigating from one page to another.

The View Transition API takes care of many things for you, and you get to customize the animations using CSS animations or Web Animations.

If you are new to the subject, check out this 30-min talk to get up to speed.

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.

Use the View Transitions Feature Explorer below to see which features are supported in which browser:

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+, Firefox 144+)
• SPA + Types (Chrome 125+, Safari 18.2+, Firefox 147+)
• SPA + Types using transitionHelper (Chrome 125+, Safari 18.2+, Firefox 147+)
• Navigation API (+ Types) (Chrome 111+, Safari 26+, Firefox 147+)
• MPA (Chrome 126+, Safari 18.2+)
• Navigation API or MPA (Chrome 111+, Safari TP, Firefox 147+)

Stack Navigator

Chat application that sports a Stack Navigator type of transitions.

• SPA (Chrome 111+, Safari 18+, Firefox 144+)
• Navigation API (Chrome 111+, Safari 26+, Firefox 147+)
• Navigation API (+ Precommit Handler) (Chrome 141+)
• 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 + pageswap/pagereveal (Chrome 126+, Safari 18.2+)

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+, Firefox 144+)
• SPA with view-transition-class and view-transition-name: match-element (Chrome 137, Safari 18.2+, Firefox 144+)

Video Zoom

Make a video element bigger while it keeps playing.

• MPA + pageswap/pagereveal (Chrome 126+, Safari 18.2+)

Circle

A circular clip path reveal from one view/page to the other.

• SPA (Chrome 111+, Safari 18+, Firefox 144+)
• MPA + pageswap/pagereveal (Chrome 126+, Safari 18.2+)

Off the Beaten Path

A more complex demo with multiple elements animating in sequence

• SPA + Types (Chrome 125+, Safari 18.2+, Firefox 147+)
• MPA + pageswap/pagereveal (Chrome 126+, Safari 18.2+)

Sortable

List of sortable items inside a scrollable container

• Nested View Transition Groups with view-transition-group (Chrome 140+)

My Patagonia Trip

A more complex demo with multiple element-scoped view transitions

• Element-Scoped View Transitions (Chrome 147+)