View Transitions

⚠️ Warning: a lot of these demos rely on experimental features. These might break over time.

Pagination

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

• MPA (👨‍🔬 Needs #view-transition-on-navigation flag)
• SPA
• SPA + Types (👨‍🔬 Needs --enable-blink-features=ViewTransitionTypes runtime flag)

Stack Navigator

Chat application that sports a Stack Navigator type of transitions.

• SPA
• Navigation API
• MPA (👨‍🔬 Needs #view-transition-on-navigation flag)
• MPA (with Prerender) (👨‍🔬 Needs #view-transition-on-navigation flag)

Profiles

List of profiles, with overview - detail navigation

• MPA (👨‍🔬 Needs #view-transition-on-navigation flag)

Cards

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

• SPA (👨‍🔬 Needs --enable-blink-features=CSSViewTransitionClass runtime flag for view-transition-class to work)

Video Zoom

Make a video element bigger while it keeps playing.

• MPA: Transfer the state using pageswap and pagereveal (👨‍🔬 Needs #view-transition-on-navigation flag)

Circle

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

• SPA
• MPA: Transfer the state using pageswap and pagereveal + add render blocking to make sure the #startingPointMarker element is present in the DOM (👨‍🔬 Needs #view-transition-on-navigation flag)