What Are Scroll-Driven Animations? Animating on Scroll Without JS
Using the scroll() and view() timelines
Interactions where elements appear or transform on scroll were implemented with IntersectionObserver or scroll event listeners. With the animation-timeline property and scroll()/view() functions, this can be done purely with CSS.
It doesn't block the main thread for excellent performance and can be used for progress bars, parallax effects, scroll-based fade-ins, and more.
How to Apply
1
Define animation with @keyframes
2
Connect to scroll container with animation-timeline: scroll()
3
Use view() to link with element viewport entry/exit
4
Fine-tune animation active range with animation-range
Pros
- ✓ High-performance scroll animations without JavaScript dependency
- ✓ Runs on compositor thread without blocking main thread
Cons
- ✗ Complex scroll logic may still require JavaScript
- ✗ Limited support in Firefox and Safari
Use Cases
Top progress bar showing scroll progress
Applying fade-in animation when sections enter viewport