Scroll linked Animations with CSS
summary
Scroll-linked animations let CSS drive animation progress from scroll position using the new @scroll-timeline rule and the animation-timeline property, running hardware-accelerated off the compositor with no JavaScript. Demos include a progress bar, parallax cover that shrinks into a sticky header, horizontal galleries with per-gallery timelines, element-triggered reveals via element-offset, a horizontal-scroll section, coverflow and stacking cards. Implementation is experimental (Chromium 89+ behind a flag), has selector-ID limitations and some rendering bugs so not yet production-ready.
AI-written summary · about
chapters (16)
- 0:00Introduction to scroll animations
- 2:50Scroll linked vs triggered animations
- 5:39Basic scroll timeline setup
- 8:30Scroll timeline descriptors
- 10:39Scroll offsets and parallax effects
- 13:10Orientation and scroll sources
- 16:19Parallax cover to sticky header
- 17:46Multi-layer parallax effects
- 18:53Element-based scroll animations
- 20:17Element offset rules explained
- 23:06Image reveal with element offsets
- 23:47Slide-in contact list demo
- 25:31Horizontal scroll section demo
- 26:56Coverflow effect with scroll timeline
- 27:57Stacking cards with depth effect
- 28:42Browser support and next steps
