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

# Resources