Liven up your websites with Scroll-Driven Animations & View Transitions
summary
Demonstrations show one line of JS — document.startViewTransition() — that snapshots before/after DOM states and animates pixels (works but captures images not live elements, overlays can eat clicks and interrupted transitions jump to the end). Scroll-driven APIs use CSS scroll-timeline and view-timeline with animation-duration:auto and animation-range to run off the main thread; shipped in Chrome 115 (composited animations deferred to Chrome 116), includes tools and examples (video sync, React hook, scrolldrivenanimations.style).
AI-written summary · about
chapters (21)
- 0:00Introduction
- 4:46User preferences for animations
- 5:06View Transitions API basics
- 8:57How view transitions work
- 13:33View transition pseudo-elements
- 17:43Customizing view transitions
- 23:18View transitions in frameworks
- 23:41Multi-page view transitions
- 28:56Scroll-driven animations intro
- 31:06Why scroll-driven animations matter
- 33:13Scroll timeline basics
- 36:20Reading progress indicator
- 39:37Animation range for scroll effects
- 42:26View timeline tracking
- 46:02Keyframe control for animations
- 49:28Debugging scroll animations
- 52:16Timeline scope mechanisms
- 54:46CSS animation pitfalls
- 55:30Syncing video to scroll
- 57:15Compositor limitations
- 59:23Resources and closing
related talks
36mScroll-Driven Animations with CSS
40mThe Future with Scroll-Driven Animations in CSS
39mModern CSS for Creative Developers
53mScroll-Enhanced Experiences
32mSupercharge Web UX with View Transitions!
49mSupercharge Web UX with View Transitions
36mYou might not need JS
29mScroll linked Animations with CSS