View Transitions

Pagination

Pagination component that slides the page based on the direction you are going.

• SPA (Chrome 111+)
• SPA + Types (Chrome 125+)
• SPA + Types using transitionHelper
• MPA (Chrome 126+)
• MPA without customization (Chrome 126+)

Stack Navigator

Chat application that sports a Stack Navigator type of transitions.

• SPA (Chrome 111+)
• SPA + Navigation API (Chrome 111+)
• MPA (Chrome 126+)
• MPA (with Prerender) (Chrome 126+)

Profiles

List of profiles, with overview - detail navigation

• MPA (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+)

Video Zoom

Make a video element bigger while it keeps playing.

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

Circle

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

• SPA (Chrome 111+)
• MPA: Transfer the state using pageswap and pagereveal + add render blocking to make sure the #startingPointMarker element is present in the DOM (Chrome 126+)