05 / Scroll-driven

Horizontal Scroll Section

You scroll down; the content travels sideways. A list you ranked becomes a row you compare across.

also called pinned horizontal scroll · sideways gallery

Changing the axis changes what the content means: a stack implies rank, a track implies comparison. Travel must be measured from real content — a track that barely overflows reads as a glitch, not a journey.

How it is built

/* --travel is the track's overflow, measured from its content */ transform: translateX(calc(-1 * var(--travel)));

Exhibit 02 · Night side