Three.js Scroll Depth Parallax — GSAP Multi-Layer 3D Drift

The Three.js Scroll Depth Parallax snippet scatters 34 translucent shapes across three depth bands and drifts them as the visitor scrolls, with near shapes racing upward while distant ones barely move — the classic parallax cue for depth — layering GSAP's ScrollTrigger with pointer tracking over core Three.js, all loaded from a CDN.

Depth encoded as a per-shape speed

Real parallax comes from one rule: closer things move more than farther things. Each shape is placed at a random Z between about -5 (near) and -50 (far), and from that Z a normalized depth value (0 near, 1 far) is computed once. That value becomes a speed of 1 - depth, stored on the shape. Scroll then lifts every shape by its home Y plus a drift scaled by its own speed, so the front layer surges while the back layer drifts lazily — depth you can feel without any explicit "layer" grouping.

Home position plus offset, never absolute

Every shape remembers its home position at startup, and each frame its live position is home plus a scroll-and-pointer offset. Nothing is ever set to an absolute coordinate mid-animation. This keeps the parallax perfectly reversible — at scroll position zero every shape is exactly back home — and means adding a shape is just one more entry in the field with its own remembered origin.

Size, opacity, and spread also read depth

Depth doesn't only drive motion. Nearer shapes are scaled larger, rendered more opaque, and scattered across a tighter spread, while far shapes are smaller, more transparent, and flung wider. Because all four properties derive from the same depth value, a shape reads as genuinely near or far the instant it appears — the motion parallax then reinforces a hierarchy the static frame already establishes.

Pointer parallax layered on scroll parallax

On top of the scroll drift, pointer movement nudges each shape horizontally — again scaled by its speed — and tilts the camera slightly. This produces a second, independent axis of parallax so the scene responds to the mouse even when the visitor isn't scrolling, giving the composition a living, holographic quality. The two parallax sources add cleanly because both are expressed as offsets from the home position.

A camera dolly for extra depth cueing

As scroll progresses, the camera itself dollies inward a few units, which subtly changes the perspective convergence and amplifies the sense of moving into the field rather than merely watching it shift. The dolly is driven by the same scrubbed value as the drift, so it too reverses exactly on scroll-up.

scrub: 0.7, pinned, and mix-blend text

A numeric scrub smooths both parallax sources against noisy input, and an overlaid title using mix-blend-mode: overlay sits between the depth bands so shapes appear to pass in front of and behind the type. This same offset-from-home technique underpins the parallax hero snippet in 2D; here it runs in real 3D depth. Pair it with a scroll particle assembly or a color morph centerpiece.