Pinned Horizontal Panels

Vertical scroll drives a horizontal track of panels, with nested per-panel animations.

★ showcaseGSAPScrollTriggerLenis

How it works

The section pins while a tween moves the track by -(scrollWidth - innerWidth). Inner elements use containerAnimation so they trigger on their horizontal position.

Performance

Lenis is driven by gsap.ticker (one rAF loop). invalidateOnRefresh recalculates widths on resize.

Accessibility & reduced motion

Runs inside useGSAP with the effective reduced-motion flag as a dependency — reduced mode swaps scrubbed motion for simple fades. In reduced mode the panels simply stack vertically.

Playgroundscroll

Lenis lerp0.10

Scrub smoothing1.00 s

ScrollTrigger markers

Export

{
  "lerp": 0.1,
  "scrub": 1,
  "markers": false
}