Skip to main content

jun 02, 2026

🔗 CSS-native parallax effect

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 timeline

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 seconds
  • linear 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.

# Scaling to avoid empty spots

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.

# Motion preferences

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;
	}
}

# Update - 07/06/2026

The day this post was published it got a lot of attentions on Hacker News, even getting up to the first spots of the front page. This was a first time for me, honestly it was fun to receive so much attention, totaling almost 25k views in a single day, although it came with a spectrum of all kinds of feedback.

Analytics dashboard

It made me rediscover a CSS property that I haven't heard in years. Turns out, also the perspective CSS property allows to achieve a CSS-only parallax effect. While I think that using animation-timeline is cleaner and more configurable, this was great feedback. The more techniques in our toolbox, the better.

Around half of the comments were about the lack of an interactive demo of the parallax effect. This is something I've already had spent time thinking about. When I created this blog I wanted it to be a minimalistic scratchpad of ideas, drafted in markdown and stylized with CSS. I feared that the moment I started to add previews, write MDX files or have subroutes for demos, then keeping up this blog would become a drag.

But given the interest around frontend dev techniques, and future posts that I have in the pipeline, I've modernized a simple drop-in web-component that I built for this exact purpose and I'll see how this works. Here's the demo.

Photo by Josefin on Unsplash

Since this post received a lot of attentions, I've decided to send out a newsletter every time I post new interesting snippets. Subscribe with the form below the post to receive it. There is an RSS feed too!

# Resources