A row of panels slides past horizontally while the visitor simply scrolls vertically: the section is pinned and the panels move along with the scroll pace. Perfect for a product showcase, portfolio or timeline. Everything you place inside becomes one panel. The technical name is GsapHorizontalScroll.
Use this block when you want to break the usual top-to-bottom rhythm of a page for a short, memorable section — a product showcase, a portfolio of projects, or a step-by-step timeline. Because the section pins itself while the panels move, visitors don't need to scroll sideways manually; regular vertical scrolling drives the effect.
Keep it to a handful of panels — three to five works well — since each one needs enough scroll distance to feel deliberate rather than rushed. Pair panels with a GsapReveal for the content inside each panel if you also want a fade-in as it appears.
Choosing this over a regular scroll
On a webshop, this block works well for highlighting a handful of key product features or variants side by side, letting a visitor page through them without leaving the product page. On a portfolio site it's a strong fit for a small gallery of case studies, presented as a sequence rather than a grid. On a professional services site it suits a step-by-step process explanation — "Discovery", "Proposal", "Delivery", "Support" — where the horizontal motion reinforces that the steps happen in order.
The most common mistake is adding too many panels: each one needs enough scroll distance to feel deliberate, so five panels already asks for a fair amount of vertical scroll room, and ten turns a short, memorable moment into a slog. Another is putting essential content only inside a panel without any visual cue that the section responds to scrolling differently from the rest of the page — a subtle arrow or "scroll" hint at the section's start helps first-time visitors realise what's happening. Always check the effect on a touch device before shipping it; pinned horizontal motion driven by vertical scrolling can feel different on mobile than on a mouse-driven desktop.
Wrap individual panel content in GsapReveal if you also want each panel's content to fade in as it becomes active, rather than sitting fully visible the moment the section is entered. If you need a swipeable gallery without the pinned-scroll behaviour — for example a simple image carousel — a Swiper block is usually the simpler choice.
Because the pin briefly takes over scroll behaviour, keep the panel count and any images inside reasonably lightweight — large unoptimised images inside a pinned section are more noticeable to visitors than the same images in a normal scrolling layout, since they stay on screen for the section's full scroll distance.
Example
Panel 1
Panel 2
Panel 3
The prompt for this example
Create a section with three panels that slide past horizontally while you scroll.