Horizontal Scroll Section

Vertical-scroll section where content translates sideways via scroll-driven animation. Pure CSS with position: sticky and animation-timeline.

Overview

A section that translates a horizontal row of content sideways as the user scrolls vertically. The browser still scrolls normally — the row just animates in response to scroll position. No scroll-jacking.

Anatomy:

An outer .stage taller than the viewport — its height controls how long the horizontal pass lasts
A .track that is position: sticky, viewport-sized, with overflow: hidden
A .row inside the track containing the horizontal content
animation-timeline: view() on the row drives a translate-X animation from the stage's scroll progress
Reduced-motion users get a wrapped vertical layout

HTML

CSS

.stage {
  block-size: 400vh;  /* taller stage = longer horizontal pass */
  position: relative;
}

.track {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.row {
  display: flex;
  gap: var(--size-l);
  padding-inline: 5vw;
}

.row > article {
  flex: 0 0 70vw;
  max-inline-size: 50rem;
  padding: var(--size-xl);
  border-radius: var(--radius-l);
}

@supports (animation-timeline: view()) {
  .stage { view-timeline-name: --hstage; }
  .row {
    animation: scroll-left 1s linear forwards;
    animation-timeline: --hstage;
    animation-range: cover 0% cover 100%;
  }
  @keyframes scroll-left {
    /* end translate = row width − viewport width + edge padding */
    to { transform: translateX(calc(-1 * (4 * 70vw + 3 * var(--size-l) - 100vw + 10vw))); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .row   { animation: none; flex-wrap: wrap; }
  .track { block-size: auto; overflow: visible; }
  .stage { block-size: auto; }
}

Notes

Tune the end translate based on how many cards × their width. The formula in the demo (4 * 70vw + 3 * gap - 100vw + 10vw) leaves the last card centred.
The stage height controls timing. 400vh gives ~3 viewport-heights of vertical scroll across which the horizontal pass happens. Halve it for a snappier pass, double it for a slower one.
Named view-timeline. view-timeline-name on the stage and animation-timeline on the row decouples the animated element from the timeline source — useful when the element and the scroll trigger aren't the same node.
Don't use this for primary navigation flow. Horizontal-on-scroll is a feature presentation pattern, not a way to read essential content. Reduced-motion fallback is essential.