Cross-document View Transitions

A collection of demos to explore the View Transition API. The focus is on cross-document view transitions.

The Demos

Carousel

A carousel showing a set of photographs of cities. We can make each page a single item in the carousel when we utilise cross-document view transitions.

Basic: The default crossfade transition between 2 pages. The animation-duration is set to 2 seconds to show the effect clearly.
Shrink animation: The animation shrinks the source page out of view, and expands the target page into view.
Skip view transition: Give the user the choice to disable view transitions through a checkbox.
Slide animation: Slide to the right or left depending on if the next or previous link was clicked.

Profiles

List of profiles, with overview - detail navigation

MPA + Navigation API (Chrome 126+)

Video Zoom

Make a video element bigger while it keeps playing.

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

Circle

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

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+, Safari TP with flags)

Off the Beaten Path

A more complex demo with multiple elements animating in sequence

MPA + Navigation API leveraging pageswap and pagereveal 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)