Skip to main content

Sticky Card Stack — Playground

01Discover
02Design
03Build
04Refine
05Ship
Drag the vertical scroll on the right — each card pins in turn and the covered cards transform.
Card Stack — options
Sample option — updates as you tweak
// On the Section (Section → Animations → Sticky Card Stack), with 2+ column "cards":
'sticky_stack' => [
    'mode' => 'stack',
    'stack' => [
        'top_offset' => 40,
        'gap'        => 18,
        'intensity'  => 0.5,
    ],
],

Sticky Card Stack is a Section-level control — Section → Animationstab → Sticky Card Stack. Build the Section with 2+ full-width columns as the cards; each becomes position: sticky and pins in turn, transforming per style as it's covered. Pure CSS + one passive scroll listener; honours reduced motion (cards just stack).

Pick a style on the right and drag the vertical scroll on the stage's right edge — each card pins in turn while the covered cards transform, exactly as on a real page. This runs the real runtime: the cards are position: sticky with staggered tops, and the same cover(i) measure (how far each card is covered by the next) drives the per-style transform. Tune pin offset, stagger and intensity. The Sample option updates as you tweak.

Where it lives

Sticky Card Stack is a Section-level control — Section → Animations tab → Sticky Card Stack. Build the Section with 2+ full-width columns as the cards. Pure CSS + one passive scroll listener; it honours reduce motion (the cards just stack) and loads only on pages that use it.

← Back to Sticky Card Stack