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
- Navigation API (+ Types) (Chrome 111+)
- MPA (Chrome 126+)
Stack Navigator
Chat application that sports a Stack Navigator type of transitions.
- SPA (Chrome 111+)
- 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
andpagereveal
to transfer state between pages (Chrome 126+)
Circle
A circular clip path reveal from one view/page to the other.