[0]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676779
[0]: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...
[1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...
That method is GPU accelerated too, so it is performant compared to some js solutions, and has worked well in every browser for around a decade
I like the idea of the scroll-timeline though, just keen to understand what the advantage is for this
Edit: if the body has class="no-sda", it uses a js fallback.
This approach adds a single class to the image container and that's it. Plus you can control many aspects of the animation such as entry/exit ranges, and make it control other properties like opacity or color, for example.
I know browser support is still lacking, but it will get there eventually. I'm not using this in production code yet, but I think it's useful to experiment with these new CSS APIs.
Obvious comparison note would be that the "new" method currently enjoys somewhat limited browser support (no Firefox without a flag, and only since Safari 26)
Can only see it on chrome though =/. I switched to Safari as the lesser of two data-harvesting evils. Or rather, with an iPhone I've already chosen my overlord. I also switched to Kagi. Trying to deGoogle myself.
Fedora 44 Kernel: x86_64 Linux 7.0.10-201.fc44.x86_64 Firefox 151.0.2
https://developer.chrome.com/docs/css-ui/scroll-driven-anima...
Edit: Their reference works and has some really nice demos. Must be an iframe problem. https://scroll-driven-animations.style/#demos
jun 02, 2026
Parallax effects have a long history, and while there are countless ways and libraries to achieve them, a new CSS-native way was recently made possible with CSS Scroll-driven animation timelines.
The usual recipe was a scroll event listener in JavaScript, recalculating positions on every frame and nudging an element up and down.
Scroll-driven animations handle all of that with CSS. Handling parallax animations with CSS has a few advantages: performance should be better as it runs it off the main thread, but my favorite part is the simplicity with which the whole thing becomes a small block of declarative styles, that can be applied with a single utility class. Here is the full code for the class:
.parallax {
view-timeline-name: --parallax-tl;
view-timeline-axis: block;
overflow: hidden;
& > * {
scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
animation: parallax auto linear both;
animation-timeline: --parallax-tl;
animation-range: cover;
will-change: translate;
}
}
@keyframes parallax {
from {
translate: 0 calc(var(--parallax-offset, 20) * -1%);
}
to {
translate: 0 calc(var(--parallax-offset, 20) * 1%);
}
}
The trick is view-timeline-name. It creates a view progress timeline, a timeline whose progress is measured by how far the .parallax element has travelled through the scrollport. It reads 0% the moment the element starts to enter the viewport and 100% once it has fully left. view-timeline-axis: block tells it to track movement along the block axis, which is the vertical one in a normal writing mode.
On the child, animation-timeline: --parallax-tl swaps the animation's clock from time to that timeline. From there the rest of the animation line falls into place:
auto for duration, because the duration now comes from the timeline rather than a number of secondslinear so scroll progress maps straight onto movement,both to hold the start and end frames outside the active range⚠️ Note: The animation-timeline longhand property is not part of the animation shorthand and must be declared separately. Furthermore, animation-timeline must be declared after the animation shorthand as the shorthand will reset non-included longhands to their initial value.
The keyframes do the actual work. With the default offset, the child slides from translate: 0 -20% to translate: 0 20% as you scroll past it. Because it moves at a different rate to the container around it, you get that sense of depth.
The child translates by up to the offset percentage of its own height in each direction, so if the child were exactly the same size as its container, shifting it up or down would expose a strip of empty space.
The child needs to be scaled up in order to have a margin to move into. It needs the offset's worth of extra height above and below, so twice the offset overall:
scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
With the default offset of 20, the child is rendered at 140% of its size, the surplus is clipped by overflow: hidden on the container, and there is always enough content to cover the box no matter where in the ±20% travel it sits.
The neat part is that both the translate and the scale read the same --parallax-offset variable. Turn the offset up for a stronger effect and the scale grows to match it, so the cover stays correct on its own. One value to tune, and the gaps never come back:
<div class="parallax" style="--parallax-offset: 30;">
<img src="…" />
</div>
will-change: translate is the last piece, a hint that this element's translate is about to change so the browser can promote it to its own layer ahead of time.
Parallax is movement tied to scrolling, and some people would rather not have it. It's good practice to respect that by disabling the animation for anyone with prefers-reduced-motion: reduce. In this case, we can just turn off the animation and scale:
@media (prefers-reduced-motion: reduce) {
.parallax > * {
animation: none;
scale: 1;
}
}