FLIP no more; Viva View Transitions
summary
Same-page View Transitions let JavaScript take a screenshot before and after DOM changes and animate the diff using startViewTransition, shipping in Chrome 111+. Default behavior is a hardware-accelerated crossfade; adding view-transition-name creates per-element morphs (grid alignment, drag‑and‑drop, animated text swaps, morphing buttons) and you can style the generated images with view-transition-old / view-transition-new and an only-child selector. Works off‑main‑thread, progressively enhances when unavailable, and supports reduced‑motion gating for accessibility.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:21API overview
- 2:42JavaScript implementation
- 5:17Progressive enhancement
- 6:07Shared element morphing
- 9:03Layout animations
- 10:39Accessibility and motion
- 11:52Customizing transitions
- 14:37Advanced demo examples
- 16:13Isotope and filter demos
- 20:18Summary and resources
related talks
32mSupercharge Web UX with View Transitions!
04mIntuitive Web Experiences with the View Transitions API
21mCSS Between the Pages
10mView Transitions: The brand-new browser API that will blow your mind
21mCSS Between the Pages
33mMaking A Splash With View Transitions
19mView Transitions: Fact vs. Fiction
49mSupercharge Web UX with View Transitions