Scroll-driven · 1.3
Scroll-pinned horizontal gallery
A train window. You move forward, the landscape moves across.
A pinned section that translates a wide track on X, so the page scrolls down while the content travels sideways.
4 knobs
How it actually works
The single most-copied award-site pattern, and the one with the worst reputation, both for the same reason: it takes the axis the reader is holding and quietly swaps it. Done well it is a corridor. Done badly it traps a trackpad user in a section they cannot leave and destroys scroll-position restore.
Pin the section, then tween the wrapper's x to -(scrollWidth - innerWidth), scrubbed against the track. The one number that matters is that end value, and it is the one everybody hardcodes and then breaks on resize. Per-item parallax is layered on top: each panel's inner art translates against the track at its own rate, which is what stops six rectangles sliding past as one rigid plank.
The knobs, named
Track length, scrub lag, per-item parallax rate, easing. None of these are sourced. The article this pattern comes from names no parameters at all, so all four are our design against the mechanism.
| Knob | Source | What it teaches |
|---|---|---|
| Track length | ours | Vertical scroll spent on the horizontal travel. Short is a flick; long is a corridor. This is the trap-the-user knob. |
| Scrub lag | ours | Catch-up time on the X translation. A little makes it feel like a heavy carriage; none makes it feel bolted to the scrollbar. |
| Parallax rate | ours | How far each panel's art counter-travels inside its frame. At 0 the track is one rigid plank. |
| Easing | ours | Applied to the travel, not to the scroll. Anything but linear means the same scroll distance covers different ground at different points, which reads as a gearbox. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
INFERRED
The index marks this INFERRED: described as "the single most-copied award-site pattern" from Codrops "On-Scroll Horizontal Parallax Gallery" plus Webflow/Lenis showcases, but no specific award site was rendered to confirm it. Not upgraded here.
- Seen on
- Near-ubiquitous per the source; Codrops horizontal-parallax gallery. No rendered artifact.
- Dependencies
- GSAP ScrollTrigger (+ Lenis) in the source; vanilla sticky + one rAF (ours)
- Difficulty
- moderate — trivial to make, hard to make feel right and survive resize
- Performance
- Transform-only, so it is cheap. The panels are the cost if you put real images in them; here they are gradients.
- Accessibility and the floor
- Notorious for trapping trackpad users and breaking scroll-position restore. Ours degrades to a native horizontal swipe track below 760px and under reduced motion: same content, same order, no pin, no hijack.
Notes
Composability. Do not combine with the ring (1.13) or the arrival (1.17): all three claim the reader's forward axis and they will fight.