Skip to main content

Horizontal Scroll — Playground

01Aurora
02Ember
03Forest
04Ocean
05Plum
06Slate
Drag the vertical scroll on the right — the pinned panels travel sideways.
Center Focus — options
Sample option — updates as you tweak
// On the Section (Section → Animations → Horizontal Scroll), with 2+ column "panels":
'horizontal_scroll' => [
    'mode' => 'coverflow',
    'coverflow' => [
        'panel_width' => '80vw',
        'intensity'   => 0.5,
    ],
],

Horizontal Scroll is a Section-level control — Section → Animationstab → Horizontal Scroll. Build the Section with 2+ columns as the panels; the Section pins and its row translates sideways as you scroll (or free-drag in Drag / Flick). Pure sticky + one passive scroll listener; honours reduced motion (panels flow normally).

Pick a style on the right and drag the vertical scroll on the stage's right edge — the pinned panel row travels sideways, exactly as on a real page (Drag / Flick instead lets you grab and throw the strip). This runs the real runtime: the same track transform for the track-level styles and the verbatim per-panel recipes (center focus, 3D carousel, parallax, fade, blur, arc, wave, zigzag, grow). Tune panel width and intensity. The Sample option updates as you tweak.

Where it lives

Horizontal Scroll is a Section-level control — Section → Animations tab → Horizontal Scroll. Build the Section with 2+ columns as the panels. The Section pins and its row translates sideways as you scroll; pure sticky + one passive scroll listener, honours reduce motion, and loads only on pages that use it.

← Back to Horizontal Scroll