Panel 01 / 05 Pin
The section pins
ScrollTrigger locks this section to the viewport the moment its top hits the top of the screen. Your scroll wheel never stops working; it just changes direction.
Horizontal Scroll Section
The section below pins in place while your vertical scroll drives a horizontal track of panels. Snap, parallax, and a progress bar included.
Scroll01
Pinned Horizontal Gallery
Keep scrolling down. The gallery locks to the viewport and translates sideways through five variable-width panels; the numbers drift with parallax and the bar at the bottom tracks progress. Scroll back up and it all reverses.
Panel 02 / 05 Translate
Vertical becomes horizontal
A single scrubbed tween maps scroll distance to the track's x position. This panel is deliberately wider than the others; the distance is measured from the track's real scrollWidth, so mixed widths just work.
Panel 03 / 05 Snap
Snaps to panel edges
Release the scroll and the track settles on the nearest panel. Tab to the button below; keyboard focus drives the scroll too.
Focusable buttonPanel 04 / 05 Parallax
Layers drift at their own pace
Every big number carries a data-hscroll-parallax value. This one moves fastest; watch it slide against the track as the panel crosses the screen.
Panel 05 / 05 Release
And lets go
When the track reaches its end, the pin releases and the page carries on scrolling vertically as if nothing happened.
Get the effectBack to vertical
The pin released and normal scrolling resumed. Scroll back up to run the whole sequence in reverse.