Supercharge Web UX with View Transitions!
summary
One line of JavaScript — document.startViewTransition — plus CSS view transition names actually replaces jarring page changes with pixel‑snapshots that cross‑fade or morph elements, proven by a demo where a card grows into a detail view and an embedded video keeps playing. The API exposes promises, CSS pseudos and view-transition-name, works in Chrome 111+ and Safari 18 with cross‑document support in Chrome 126, offers pageSwap/pageReveal hooks for just‑in‑time naming, and integrates with frameworks (Astro, Remix, React via flushSync, plus an npm hook).
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:44What are view transitions
- 3:53How view transitions work
- 7:43View transition pseudo tree
- 10:08Customizing animations
- 11:57Morphing elements
- 12:18Multiple element transitions
- 16:07Step-by-step implementation
- 18:54More demos
- 20:19Promises and cleanup
- 21:00Framework integration
- 22:45Documentation
- 23:06Cross-document transitions
- 25:56How cross-document works
- 27:38Customizing cross-document
- 30:29Render blocking
- 31:30Summary and Q&A
related talks
49mSupercharge Web UX with View Transitions
10mView Transitions: The brand-new browser API that will blow your mind
04mIntuitive Web Experiences with the View Transitions API
21mCSS Between the Pages
33mMaking A Splash With View Transitions
22mFLIP no more; Viva View Transitions
21mCSS Between the Pages
46mThe viewTransition API: A Revolution for the Web?