Collection 05
Parallax Effects
ScrollSmoother adds a short catch-up to the page's own native scrolling — no scroll-jacking, no fake scrollbar — and drives each layer through a speed or lag value. Tune a demo's parameters, press Apply settings to re-register its effects, then scroll through that demo. Smoothing is created only on fine-pointer devices, and under prefers-reduced-motion no smoother, trigger, or pointer listener is created at all: every demo falls back to a readable static layout.
- 01Speed
Background Parallax
The classic treatment: a background layer scrolls slower than the copy in front of it. A speed below 1 makes the image hang back, which reads as distance behind the text.
Depth by speed
The backdrop holds back
Because only the transform changes, the text in front keeps its exact layout position while the image drifts behind it.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 02Speed
Image Parallax
An oversized image travels inside an overflow-hidden crop. ScrollSmoother's speed: "auto" measures the overflow and moves the image exactly far enough to use it without ever exposing an edge.
Auto-measured
Movement sized to the crop
The frame below hides the overscaled image's extra height; the parallax consumes exactly that overflow.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 03Layered
Text Parallax
Heading and supporting paragraph travel at different speeds. Both remain in normal document order, so the reading sequence and focus order are untouched — only the painted position differs.
Typographic drift
Two speeds, one reading order
Separating the heading from the paragraph by a small speed difference adds depth to flat text without ever reordering the document.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 04Layered
Multi-layer Parallax
Three sibling layers — never nested inside one another — each take their own speed. Keeping them siblings matters: ScrollSmoother transforms each target directly, so a nested layer would inherit its parent's movement too.
Three planes
Siblings, not ancestors
Backdrop, tint, and copy are three separate children of the stage, so each speed applies exactly once.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 05Horizontal
Horizontal Parallax
Vertical scrolling drives sideways movement. This is the one demo built on a plain ScrollTrigger rather than a speed attribute, because the travel is on the X axis and is scrubbed across the card's own scroll range.
01 · Operations
02 · Quality
03 · InspectionScroll to previewImplementation prompt
Updates as you adjust parameters.
- 06Speed
Reverse Parallax
A negative speed sends the layer against the scroll direction. Used sparingly it is a strong accent; the range stops at -1 because anything faster fights the reader's sense of direction.
Against the grain
Motion that pushes back
Scrolling down moves this backdrop up. The opposition is deliberate and stays subtle at low magnitudes.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 07Lag
Floating Parallax
Decorative status chips drift with a mix of speed and lag. Every chip is aria-hidden: they carry no information that is not already in the copy, so assistive technology skips them entirely.
Ambient drift
Decoration that knows its place
The chips float for atmosphere only. Their text repeats nothing the reader needs, so hiding them costs no information.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 08Pointer
Mouse Parallax
Layers answer the pointer rather than the scrollbar. The listener is added only behind a fine-pointer media query, so touch users get the stable composition with no hidden state and nothing to discover by hovering.
Pointer depth
The scene answers the cursor
Foreground and backdrop shift at opposite depths, which reads as parallax without any scroll involvement at all.
Pointer tracking is enabled on fine-pointer devices only.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 09Layered
Depth Parallax
A deliberately wide gap between foreground and background speeds. The larger the difference, the shallower the scene feels — which is the trade-off this demo exists to show.
Separation
How far apart is too far?
Push the two values to the extremes of their range and the illusion breaks — the layers stop belonging to one scene.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 10Lag
Lag Parallax
data-lag lets an element fall behind during fast scrolling and then catch up once the scroll settles. Unlike speed, lag is about how the element reacts to velocity rather than position.
Velocity, not position
Catching up after the scroll
Scroll quickly past this card and the panel trails behind, then settles back into place when the motion stops.
Trailing label
Scroll to previewImplementation prompt
Updates as you adjust parameters.