View Transitions: Fact vs. Fiction
summary
View Transitions let the browser animate between a real server-rendered HTML start and end, using CSS for fades, slides and morphs and only a little JS to call startViewTransition; demos (one built by a single Astro community member) show morphing images, slide/fade presets and a running persistent element audio player that survives navigation. Astro 3.0 bundles a polyfill, exposes presets and an import to enable transitions (not literally a single line but close), and works today in Chrome/Edge/Opera while Safari and Firefox lag.
AI-written summary · about
chapters (11)
- 0:00Introduction to view transitions
- 2:20Demo and core concepts
- 4:49Astro integration and usage
- 8:00Technical deep dive
- 10:45Advanced CSS animations
- 13:21Browser support and ecosystem
- 15:30Architecture and philosophy
- 19:36Building complex transitions
- 22:58Accessibility and persistence
- 26:33Q&A and closing thoughts
- 29:52Technical panel discussion
related talks
19mView Transitions: Fact vs. Fiction
10mView Transitions: The brand-new browser API that will blow your mind
32mSupercharge Web UX with View Transitions!
04mIntuitive Web Experiences with the View Transitions API
22mFLIP no more; Viva View Transitions
27mAnimate All the Things! (With View Transitions API)
36mYou might not need JS
46mThe viewTransition API: A Revolution for the Web?