How to make a horizontal scroll section with GSAP

The technique in three decisions

How far to move. The track should travel its full width minus the width of the viewport, no more and no less. Computing that distance from the real elements, and recomputing it when the window changes size, is what separates a horizontal scroll that ends exactly on the last slide from one that stops short or overshoots into empty space.

How long the pin lasts. The scroll distance the reader spends inside the section is the end of the trigger. Matching it to the horizontal distance makes one pixel of vertical scroll move the track one pixel, which feels natural. Making it longer slows the section down, which suits a few large slides.

What else moves. Once the main movement works, the craft is in the secondary motion: images that shift slightly against the track for parallax, titles that reveal when their slide is centred, a progress bar. GSAP's containerAnimation lets ScrollTriggers inside the track fire based on horizontal position, as if the slides were scrolling into view normally.

A minimal version

A section containing a flex track of slides. The track moves left by its overflow while the section is pinned.

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const section = document.querySelector(".horizontal");
const track = section.querySelector(".track");
const distance = () => track.scrollWidth - window.innerWidth;

gsap.to(track, {
  x: () => -distance(),
  ease: "none",
  scrollTrigger: {
    trigger: section,
    start: "top top",
    end: () => "+=" + distance(),
    pin: true,
    scrub: 1,
    invalidateOnRefresh: true,
  },
});

.horizontal { overflow: hidden; }
.track { display: flex; width: max-content; }
.track > * { flex: 0 0 80vw; height: 100vh; }

The function values matter: x and end are recomputed on every refresh because of invalidateOnRefresh, so the section stays correct after a resize or a rotation. scrub: 1 adds a second of smoothing; use true for a strict one to one link.

Where it gets hard

Triggers inside the track. A normal ScrollTrigger on a slide does not know the slide is moving sideways, so it fires at the wrong time. Store the main tween in a variable and pass it as containerAnimation to the triggers of the slides, with horizontal start values like "left center". The main tween must use ease: "none" for this to work.

Content after the section. The pin adds vertical space equal to the scroll distance, and anything below is pushed down by that amount. If other ScrollTriggers on the page are created before this one, they measured the page without that space. Create triggers in page order, or call ScrollTrigger.refresh() after all of them exist.

Touch devices. On phones, a horizontal section driven by vertical swipes is surprising and fights with the address bar resizing the viewport. A common choice is to keep the pin on desktop only, using gsap.matchMedia(), and let the track scroll natively sideways with scroll snapping on small screens.

Keyboard and accessibility. Tabbing into a slide that is off screen does not scroll the page to it. Keep focusable elements reachable, or move the scroll position when a slide receives focus. And make sure the slides make sense read top to bottom, which is how a screen reader will meet them.

Performance

A single transformed track is cheap even with many slides. What adds cost is heavy content inside it: dozens of large images decoding at once, videos playing off screen, or filters. Lazy load images that sit far along the track and pause videos that are not visible.