Horizontal Gallery

ScrollVanilla JS · zero dependenciesScroll axis swap via one transform

scroll inside ↓ (the cards travel sideways)

-- fps

prefers-reduced-motion detected — position follows scroll directly, no inertia

X-ray · layers

Slidevertical scroll → horizontal travel

Inertiathe row glides after your wheel

Progress dotswhich card is centered

Parameters

Cards5

Card width230 px

Glide0.12

Track length1600 px

your version · updates as you tinker

How this effect works

The gallery never scrolls horizontally at all. The section pins (sticky again), and the vertical progress is re-spent as a horizontal transform: row.x = -progress × (rowWidth - viewWidth). Your thumb does what it always does — scrolls down — and the page answers sideways. That axis swap is the entire wow; it works because scrolling down is free and scrolling sideways is awkward, so you get the exotic direction at the comfortable price.

The inertia layer stops the row from being glued to the scrollbar: the drawn position chases the true position by a fraction per frame (the glide slider), so wheel steps become one continuous cruise, and it eases to a stop like something with mass. The dots quantize progress to the nearest card — the "you are here" for a journey with stations.

Production notes: prefers-reduced-motion: position maps directly, no glide · one transform on the row per frame · give the track ~300px of vertical room per card or the journey feels rushed · the copied snippet is self-contained with its own demo scroll box.