Animate All the Things! (With View Transitions API)
summary
Demonstrates that the View Transitions API actually captures UI state and orchestrates DOM changes without manual keyframes: uses document.startViewTransition, CSS pseudo-elements and view-transition-name to target elements, shows a photo‑viewer demo and a React pattern (wrap setState) that works. Reveals a major caveat: the API pauses all rendering during a transition so long durations freeze interactivity—good for screen‑level reorganizations, bad for animating every button.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 2:09Animations are challenging
- 3:54UI state management
- 5:44Demo app setup
- 8:13Hooking into View Transitions API
- 10:22API captures UI state
- 11:44Customizing transitions with CSS
- 13:51Performance of long transitions
- 15:59When to use the API
- 17:03Targeting elements with names
- 19:58Integrating with React
- 21:44Prefer native solutions
- 24:33Encouraging native adoption
- 25:58Closing remarks
related talks
33mMaking A Splash With View Transitions
04mIntuitive Web Experiences with the View Transitions API
10mView Transitions: The brand-new browser API that will blow your mind
32mSupercharge Web UX with View Transitions!
49mSupercharge Web UX with View Transitions
46mThe viewTransition API: A Revolution for the Web?
41mView Transitions: Fact vs. Fiction
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions