Intuitive Web Experiences with the View Transitions API
summary
Live demo shows the View Transitions API creating app-like page and cross-page image animations using document.startViewTransition() to let the browser snapshot states, a multi-page opt-in via navigation-auto, and unique view transition names per image. Image clicks store an image ID in sessionStorage, set a matching data attribute on the detail page, and use fetchpriority="high" so the hero image loads before animation. Works smoothly in Chrome inspector and respects prefers-reduced-motion.
AI-written summary · about
related talks
32mSupercharge Web UX with View Transitions!
49mSupercharge Web UX with View Transitions
10mView Transitions: The brand-new browser API that will blow your mind
27mAnimate All the Things! (With View Transitions API)
22mFLIP no more; Viva View Transitions
33mMPA View Transitions are here!
21mCSS Between the Pages
46mThe viewTransition API: A Revolution for the Web?