Scroll-pinned horizontal panels

A section that stays pinned while vertical scrolling slides a row of step panels sideways, then releases.

scrollscroll-effectdata-scroll-effecthorizontalpinnedstepsprocessinteractive

About this block

data-scroll-effect="horizontal" turns scroll distance into sideways movement. The markup shape matters: the section, then one pin (its first child), then one track (the pin's first child) that holds the panels.

How to customize it

  • data-scroll-runway is how many screens of scrolling the effect lasts (default 3). data-scroll-speed scales the travel and data-scroll-direction="reverse" runs it the other way.
  • data-scroll-smoothing (0 to 1) eases the motion toward the scroll position.
  • Visitors who ask for reduced motion get a normally scrollable row instead of the pin.
  • Add or remove panels inside the track; the travel adjusts to the track width.
Previous
Navigation
Next
Stripe

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library

Dropdown menu

CSS-first click dropdown with trigger button and option panel. Zero JavaScript required.

Animated cards row

Three feature cards with staggered scroll-triggered fade-up entrance animations.

Accordion FAQ

Collapsible FAQ built on native details/summary elements, so it opens and closes with no JavaScript. Only one answer is open at a time.

Modal dialog

Click-triggered modal with backdrop overlay, content panel, and close behavior.

Newsletter popup modal

Popup that opens once per visitor when the page loads, with an email signup form. Closing it is remembered, so it doesn't come back.

Cookie consent banner

Fixed bottom bar that auto-shows on first page load. Persists accepted/rejected state in localStorage. Shows only once per visitor.

Logo marquee

Logo strip that scrolls sideways in a seamless loop and pauses on hover. Logos sit grey and faded until hovered.

Hover lift card

Card with hover lift animation. Floats up on hover, settles on release.

Contact CTA with modal form

Accent-coloured CTA card whose button opens a centred contact modal with a name, email and message form. Fits bento grids, footers and pre-footer bands.

Image carousel

Image slideshow that shows one photo at a time, with previous and next arrows and dot indicators.

Tabs content switcher

Tabbed interface with 3 panels. Click a tab to show its content and hide the others; the active tab is underlined in the primary colour.

Steps that follow the scroll

A sticky step list and a "Step 2 of 4" counter that follow whichever section is on screen as the visitor scrolls.