parallax

parallax tweens yPercent over the element’s full pass through the viewport, bound to scroll position via ScrollTrigger.scrub. parallax-horizontal does the same for xPercent. Use aa-parallax-start / aa-parallax-end to set the percent range explicitly (these are percentages of the element’s own height, not pixels).

The aa-scroll-start / aa-scroll-end values are wrapped in clamp(...) automatically — that means if the element already overlaps the start position when the page first renders (typical for a hero), the animation clamps to the current scroll instead of jumping.

Attributes

Attribute	Default	Notes
`aa-animate`	(required)	`parallax`, `parallax-horizontal`
`aa-parallax-start`	`10`	starting yPercent (or xPercent for horizontal)
`aa-parallax-end`	`-10`	ending yPercent
`aa-distance`	`1`	multiplier — overrides default range to ±10 × distance
`aa-scrub`	`true`	`true` for instant, or seconds for smoothed lag
`aa-scroll-start`	`top bottom`	wrapped in `clamp(...)`
`aa-scroll-end`	`bottom top`	wrapped in `clamp(...)`
`aa-anchor`	(the element)	selector overriding the ScrollTrigger trigger

Required GSAP plugins

gsap, ScrollTrigger.

Live demo — background image (“the image moves slower than the page”)

The classic hero parallax: a full-bleed background image drifts down as the user scrolls, so the image lags behind the page motion. The trick is to make the image element taller than its container (we use height: 120%) and clip the overflow on the parent, so the parallax translate never reveals empty space.

aa-scroll-start="top top" lines up the animation’s progress=0 with the moment the top of the hero hits the top of the viewport — i.e. immediately on page load — and the implicit clamp() keeps that behavior even if the user is mid-scroll on first paint.

Hero parallax

Live demo — drifting cards (with scrub smoothing)

Different aa-parallax-start/end values per card produce a depth-of-field effect on a row of items. aa-scrub="2" smooths each card’s progress with a 2-second lag, so they feel weighty rather than locked to scroll.

Buffer rule. The moving image’s container must be sized so that the most extreme parallax translation never exposes the parent. A safe formula for the symmetric ±Y% sweep we use here:

image-height ≥ frame-height × (1 + 2 × Y / 100), then top: -(image-height - frame-height) / 2.

Below: height: 140% with top: -20% covers any sweep up to ±15% with no whitespace, even mid-scrub. Push beyond that and you’d want to scale up the buffer accordingly.