Guide to Scroll‑Driven Animations with CSS
June 26, 2025Guide to Scroll‑Driven Animations with CSS
CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS.
1. Three Parts of a Scroll‑Driven Animation
- Target: the element you animate.
- Keyframes: defines the animation steps.
- Timeline: controls animation based on scroll/view, not time.
2. Using scroll() Timeline
Instead of time, the animation progress depends on the user scroll. Example:
footer::after {
content: "";
position: fixed;
bottom: 0;
left: 0;
height: 1em;
width: 100%;
background: gold;
animation: progress-expand;
animation-timeline: scroll();
}
@keyframes progress-expand {
from { width: 0%; }
to { width: 100%; }
}3. Accessibility Tip
Wrap animations with reduced‑motion preference check:
@media not (prefers-reduced-motion) {
footer::after {
animation: progress-expand;
animation-timeline: scroll();
}
}4. Advanced: Custom Scroll/View Timelines
Use scroll(nearest block), named timelines, view(), animation-range, and timeline-scope to fine-tune behavior.
Scroll-driven animations now work natively in Safari 26 beta and Chrome 115+, offering smooth, hardware-accelerated UX.
Blog
What’s New in ECMAScript 2025
Jun 30, 2025
What’s New in ECMAScript 2025 On June 25, 2025, Ecma International officially approved ES2025, adding several useful features: 1. 📦 Import At...
CSS Specificity: Layers vs BEM vs Utility Classes
Jun 26, 2025
CSS Specificity: Cascade Layers vs BEM vs Utility Classes This article compares three approaches to managing CSS specificity — BEM, utility‑f...
Stop Copy-Pasting Code! Learn How to Use Traits in Laravel the Right Way
Jul 01, 2025
🚫 Stop Copy-Pasting Code! Ever duplicated slug logic or logging across multiple models? Laravel's Traits got your back. 1. What’s a Trait?...
React Labs: View Transitions & Activity
Jun 17, 2025
React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...
Color Everything in CSS – Simple Guide
Jun 26, 2025
Color Everything in CSS – Simple Guide Today we’re diving into CSS colors: how to define them, especially with modern methods like lab(...
How OAuth Works
Jun 29, 2025
How OAuth Works OAuth is a protocol that allows third-party applications to access user data without sharing passwords. It's the backbone of secure a...
