View Transitions and Activity
summary
A demo React 19.2 app shows a video player and a collapsible sidebar that preserves uncontrolled DOM state (input value and scroll position) by wrapping parts with the activity component, letting the DOM keep values and preloading video elements so clicks trigger no loader. Layout changes use view transitions (Canary) by wrapping state updates in startTransition, avoiding refs or flushSync. The sidebar/state preservation works; a CSS animation for a metadata transition fails in the live demo.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 0:46React's core philosophy
- 2:01Major React paradigm shifts
- 3:42Live demo setup
- 5:52Using the activity component
- 8:51Optimizing video loading
- 11:43Implementing view transitions
- 15:07Transitioning with React state
- 17:32Transitioning React trees
- 18:57Finalizing transitions and wrap
related talks
27mAnimate All the Things! (With View Transitions API)
33mMaking A Splash With View Transitions
32mAnimating Vue
55mAnimations in a World of States
32mSupercharge Web UX with View Transitions!
10mView Transitions: The brand-new browser API that will blow your mind
36mVue in Motion
36mNext-level Vue Animations