Three.js Scroll Horizontal Gallery — GSAP Coverflow

The Three.js Scroll Horizontal Gallery snippet takes plain vertical page scroll and turns it into a horizontal pan across a strip of six 3D panels — the scrollbar slides the whole gallery sideways while each panel rotates coverflow-style toward the camera — using core Three.js and GSAP's ScrollTrigger plugin, both loaded from a CDN.

Vertical scroll, horizontal motion

The defining trick of this pattern is decoupling input direction from output direction: the visitor scrolls down as usual, but a single scrubbed value moves a Three.js Group along its X axis, so the panels slide left across the viewport. This "vertical-in, horizontal-out" gallery is one of the most requested scroll effects because it lets a horizontal showcase live inside an ordinary vertical page without hijacking the scrollbar's native behavior or fighting touch devices.

Panels in a group, panned as one

All six panels are added to a single THREE.Group at fixed X offsets a constant gap apart. Scroll never touches the individual panels' base positions — it only moves the group. Panning the container rather than each panel means the strip's layout is defined once, and lengthening the gallery is just a matter of adding another panel and letting the travel distance recompute from the panel count and gap.

Coverflow depth derived from screen position

Each frame, every panel's world X (its own offset plus the group's current pan) is used to compute two things: a Y rotation clamped so the panel turns to face the camera as it nears center and angles away toward the edges, and a small negative Z push proportional to its distance from center so off-center panels recede slightly. This is what gives the flat strip its sense of 3D depth — panels at the focus stand upright and forward, while their neighbors tilt back like album covers in a coverflow.

Emissive glow marks the focused panel

The panel nearest the center also gets the most emissive intensity, fading to zero as it slides away. Because this is computed from the same distance-from-center value that drives rotation and depth, the highlight tracks the focus automatically — there is no separate "which panel is active" state to keep in sync; the geometry's position *is* the state.

One scrubbed value, a derived index

The group's X is tweened from 0 to minus the full strip width so the last panel ends centered, and ScrollTrigger's onUpdate maps self.progress to a 1-of-6 counter for the on-screen index. Keeping a single source of truth — the scrubbed pan — means the visible index, the rotations, the depth, and the glow all derive from it consistently, and scrolling back up reverses every one of them exactly.

scrub: 0.6 and a pinned stage

A numeric scrub smooths the pan against noisy wheel and trackpad input, and pinning the stage for +=450% gives each panel a comfortable moment at center. The same pinned-scrub-derive approach powers the scroll camera path flythrough; here it drives a lateral pan instead of forward travel. Pair it with a scroll particle assembly intro or a product stages close-up section.