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+
Nested View Transition Groups
  • Chrome with #enable-experimental-web-platform-features flag

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.

Stack Navigator

Chat application that sports a Stack Navigator type of transitions.

Profiles

List of profiles, with overview - detail navigation

Cards

Add/remove cards to the list. Has entry/exit animations and also uses view-transition-class.

Video Zoom

Make a video element bigger while it keeps playing.

Circle

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

Off the Beaten Path

A more complex demo with multiple elements animating in sequence

Sortable

List of sortable items inside a scrollable container