Horizontal Scroll Section

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML anywhere in your <body>:

Code snippet omitted: it ships with the download.

That's it. The section pins when it reaches the top of the viewport and the track translates left as the user scrolls down, releasing when the last panel arrives.

Using It With Your Own Design

Put ordinary page above and below it. The effect needs nothing else to work, but a rail that starts at the top of the document is just a horizontal page: the visitor never feels it turn. Give it a section of normal vertical scrolling before the pin and more after it, and the hand-off from down to sideways becomes the moment people remember. The demo does this with an opening spread and a closing aftercare section; both are plain markup with no effect attributes on them at all.

Two details worth copying from the demo:

• The section above is just under one viewport tall (min-height: 82svh), so the top edge of the first panel shows below the fold. The page announces the rail before you reach it.
• Its reveals are CSS-only (animation-timeline: view() for the closing section), so nothing competes with ScrollTrigger for the scroll, and both end on the visible state — an unsupported browser or reduced motion lands on a readable page rather than a blank one.

What the effect requires of your markup: a [data-hscroll] section containing a .hscroll-track with at least two .hscroll-panel children. Panel widths are free; travel is measured from the track's real scrollWidth.

What is only the demo's CSS: everything named .stage*, .plate*, .rail-cue*, .rail-progress*, .page-intro, .page-outro, .rule-row*, .intro-* and .outro-*. The effect never reads any of them.

The non-obvious CSS the effect depends on:

• .hscroll { height: 100svh; overflow: hidden } — the pin measures this, and the overflow is what hides the rest of the track.
• .hscroll-track { display: flex } with panels that do not shrink (flex: 0 0 …), or scrollWidth collapses to the section width and the track has nowhere to travel.
• The .no-js and @media (prefers-reduced-motion: reduce) blocks that unpin the section and stack the panels vertically. Keep both halves: they are the only thing standing between JavaScript being unavailable, or motion being turned down, and a page with four fifths of its content parked off-screen.

Options

All options are data attributes on the [data-hscroll] element unless noted.

Responsive Behavior

The tween's x value and the trigger's end are both functions, and the trigger uses invalidateOnRefresh: true. Every ScrollTrigger.refresh() (window resize, orientation change, font load) re-measures scrollWidth, the pin distance, and the snap points. No manual resize handling is needed.

Initialization also waits for document.fonts.ready so panel widths are measured with the final fonts.

Accessibility

• Reduced motion: with prefers-reduced-motion: reduce, the section is not pinned; panels stack vertically as normal page content. This is enforced twice: a CSS @media fallback (works even without JavaScript) and a gsap.matchMedia() branch that adds .hscroll--static
• Keyboard navigation: focusable content inside panels stays reachable. A focusin listener on the track converts the focused panel's position into the matching page scroll position, so tabbing into an off-screen panel scrolls the pinned section to reveal it (using lenis.scrollTo when Lenis is present)
• Focus visible: :focus-visible styles on buttons match :hover
• Semantics: give the section an aria-label; decorative parallax numbers use aria-hidden="true"

Reduced Motion Behavior

When prefers-reduced-motion: reduce is set:

• No pinning, no horizontal translation, no parallax
• Panels display stacked vertically at full width
• The progress bar is hidden

Lenis Smooth Scroll

Lenis is optional and auto-detected. When ScrollTrigger is present, Lenis and ScrollTrigger share GSAP's ticker (autoRaf: false) to keep pinned scrubbing synchronized; Lenis is also used for keyboard focus scrolling. The effect works with native scrolling when the Lenis script tag is omitted.

Code snippet omitted: it ships with the download.

Browser Support

Modern browsers (ES6+). Not compatible with IE11.

Dependencies

Required:

• GSAP 3.12+
• ScrollTrigger plugin

Optional:

• Lenis (smooth scroll integration; effect works without it)