Horizontal Scroll Section
Pinned section where vertical scrolling translates a horizontal track of panels. Variable-width panels, snap, per-element parallax, and a progress bar.
About This Effect
A classic horizontal scroll section built on ScrollTrigger pinning. The section locks to the viewport while vertical scroll input translates a horizontal track of panels sideways, then releases cleanly when the track ends. Panels can be any mix of widths; the travel distance is measured from the track's real scrollWidth, so the layout stays accurate through resizes, font loads, and content changes. Optional snap-to-panel, per-element parallax, and a scrub-linked progress bar are all driven by data attributes.
What's Included
- Pinned horizontal scrolling driven by a single scrubbed xPercent-style tween
- Variable-width panels: distance measured from scrollWidth, not panel counts
- Snap-to-panel edges with measured snap points that survive resizes
- Per-element parallax via containerAnimation ScrollTriggers
- Scroll progress bar updated with a gsap.quickSetter for zero tween churn
- Fully responsive: functional end values plus invalidateOnRefresh
- Configurable scrub smoothing and traverse speed via data attributes
- Accessible: keyboard focus scrolls panels into view, reduced motion stacks panels vertically
Perfect For
- Portfolio and case study galleries with a cinematic sideways flow
- Product feature walkthroughs that step through panels one by one
- Storytelling chapters and timeline sequences on landing pages
- Service or process breakdowns with numbered stages
- Award-style agency sites that need a memorable scroll moment
How It Works
ScrollTrigger pins the section with pin: true and scrubs a single gsap.to tween that translates the track by scrollWidth minus the viewport width. Both the tween's x value and the trigger's end are functions, so combined with invalidateOnRefresh every resize re-measures the layout. Snap points are computed from each panel's offsetLeft on refresh and resolved through gsap.utils.snap. Parallax layers use containerAnimation ScrollTriggers tied to the main tween, and the progress bar is updated in onUpdate through a cached gsap.quickSetter.