Scroll-Enhanced Experiences
summary
Demonstrates how the CSS Scroll Timeline API and related features let animations be driven by scroll position instead of time, ties SVG stroke-draws and sprite sheets to the scroll, and builds playable demos — an outrun-style game and running-Link sprite — implemented only with CSS (and working in Chromium). Emphasizes using prefers-reduced-motion, notes scroll-driven animations run off the main thread for better performance, mentions BRAMOS demos, the View Transition API, and that broad browser support currently requires polyfills or flags.
AI-written summary · about
chapters (19)
- 0:00Scroll-enhanced experiences intro
- 3:43User motion preferences
- 5:10Animation and storytelling
- 9:08Scroll-driven animations
- 11:19SVG animations with CSS
- 15:37Why CSS scroll animations
- 18:47Debugging scroll animations
- 20:12Browser support for scroll
- 21:15Scroll timeline explained
- 22:20Progress bar with scroll
- 27:59CodePen scroll demos
- 30:10Dynamic carousels with scroll
- 31:57Advanced scroll effects
- 32:38View transitions with scroll
- 34:43Multiple scroll animations
- 37:35Mario theme demo
- 40:06Outrun demo and sprites
- 43:04Future of CSS animations
- 44:30Q&A on scroll & accessibility
related talks
36mScroll-Driven Animations with CSS
40mThe Future with Scroll-Driven Animations in CSS
29mScroll linked Animations with CSS
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
39mModern CSS for Creative Developers
36mYou might not need JS
07mScroll-Linked Animations
38mReturn to Web Animation Wonderland