The Future with Scroll-Driven Animations in CSS
summary
Scroll position drives CSS animations by switching an animation from the document timeline to animation-timeline: scroll or animation-timeline: view, letting a keyframed ball roll, a masonry gallery slide, and an image zoom to full screen without JavaScript. Uses compositor-safe transforms (translate/scale/rotate and opacity), plus animation-range to control start/end (examples use animation-range: contain and entry). Support is currently Chrome/Edge only; use progressive enhancement or a JS polyfill and respect prefers-reduced-motion.
AI-written summary · about
chapters (7)
- 0:00Introduction to scroll animations
- 3:15Why use CSS for scroll animations
- 11:25How scroll-driven animations work
- 22:16View timeline and animation range
- 32:50Advanced scroll animation demos
- 36:01Dos and don'ts for scroll animations
- 39:16Q&A and resources
related talks
36mScroll-Driven Animations with CSS
29mScroll linked Animations with CSS
53mScroll-Enhanced Experiences
36mYou might not need JS
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
39mModern CSS for Creative Developers
07mScroll-Linked Animations
38mCSS in motion: Animations for fun and profit