Stop Using JS for Scroll Animations: Meet Scroll-Timeline
Grab a coffee, friend. We need to talk about that heavy JavaScript library you are probably using just to make a header shrink or a progress bar move. It is 2026, and the days of hijacking the main thread with scroll listeners are officially over. We finally have scroll-timeline, and it is a total game-changer for both performance and developer sanity. Imagine creating complex parallax effects with the same ease as a simple hover transition.
How we suffered before
Remember the struggle? To create a simple parallax effect or a reading indicator, we had to attach an event listener to the window scroll. Then came the “scroll-jank” – that stuttering mess when the browser could not keep up with the JavaScript calculations and the rendering at the same time. We tried to fix it with requestAnimationFrame, debouncing functions, or bringing in heavy-duty libraries like ScrollMagic or GSAP. While those tools are powerful, they are often overkill for simple UI polish. We even spent time styling the scrollbar in all modern browsers just to make things look cohesive, but the logic remained bulky and JS-dependent. It was a lot of code for something that should have been native.
The modern way in 2026
Now, we have CSS Scroll-driven Animations. The core idea is simple: instead of an animation progressing over time (seconds), it progresses over scroll distance (pixels or percentage). Using scroll-timeline, we can define a named timeline on a scrollable container. Then, we link any element’s animation to that timeline using animation-timeline. It is declarative, it is readable, and most importantly, it runs off the main thread. If you have already mastered managing scroll behavior with overscroll-behavior, this is the natural next step in your CSS journey. You are no longer calculating offsets; you are just describing how things should look at the start and end of the scroll.
Ready-to-use code snippet
Here is a classic example: a reading progress bar that grows as you scroll down the page. Notice how we do not need a single line of script to make this happen.
/* 1. Define the animation as you normally would */
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* 2. Setup the scroll container and name the timeline */
body {
scroll-timeline-name: –reading-timeline;
scroll-timeline-axis: block; /* ‘block’ refers to the vertical scroll axis */
}
/* 3. Link the progress bar element to the scroll timeline */
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #ff4757;
transform-origin: 0 50%;
z-index: 100;
/* The magic happens here: no duration in seconds, but ‘auto’ */
animation: grow-progress auto linear;
animation-timeline: –reading-timeline;
}
Common beginner mistake
The most common pitfall is forgetting the animation-duration. Even though the animation is driven by scrolling and not time, the CSS specification still requires a duration value (set to auto or any time value like 1s) for the animation to actually initialize. If you omit it, your animation might just sit there doing nothing, leaving you scratching your head. Also, ensure your scroll-timeline-name is defined on an actual scrollable parent; if the container does not have overflow: auto or scroll (or it is the body), the timeline will not have any range to work with and your animation will stay stuck at the first frame.
🔥 We publish more advanced CSS tricks, ready-to-use snippets, and tutorials in our Telegram channel. Subscribe so you don’t miss out!
