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
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?...
Laravel 12.18.0 Update
Jun 17, 2025
Laravel 12.18.0 Update The Laravel team released version 12.18.0 with several cool updates: String encrypt() & decrypt() helpers are...
ECMAScript 2025 Detailed Update Guide for Frontend Developers
Jul 06, 2025
🔍 ECMAScript 2025 – Detailed Feature Guide All new ECMAScript 2025 features with code examples and explanation of their importance for front...
Essential React Native UI & Interaction Components
Jul 01, 2025
Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....
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...
Analyze Laravel Projects with Introspect
Jul 01, 2025
Analyze Laravel Codebases with Laravel Introspect If you’re doing a complex refactor or building dev tools, Laravel Introspect helps you quer...
