Scrolling Stacked Card

⚠️ This is an Extension, not a module. Scrolling Stacked Card does not appear in the Divi Builder module list. It adds a Scroll Stack settings group to the Design tab of Divi Sections.

How It Works

You build one Section, and place several Rows inside it. When you scroll to that section, the section pins in place, and the Rows inside it become the cards that stack on top of one another.

In other words:

• The Section is the container that gets pinned — it does not stack onto other sections.
• The Rows inside that one section are the cards. Each row slides in and stacks over the previous one as you scroll.
• By default, the extension auto-detects the section's direct child rows as cards. You don't need to configure anything for this.

How to Enable

Step 1: Go to WordPress Admin → Divi Essential → Extensions

Step 2: Find Scrolling Stacked Card and toggle it On

Step 3: Open any Divi Section in the Divi Builder

Step 4: Go to the Design tab → Scroll Stack section

Step 5: Toggle Enable Scroll Stack on and configure your settings

Step 6: Click Save — the stacked card effect goes live on the front-end

Settings Reference

Enable Scroll Stack

Type: Toggle Default: Off

Activates the stacked card scroll effect on the section. All other Scroll Stack settings become visible and active once this is enabled.

Custom Card Selector

Type: Text Field Default: Empty (auto-detect)

Enter a custom CSS selector to define which child elements are treated as individual stack cards. Leave empty to let the extension auto-detect cards from the section's child elements.

💡 Example: Enter .et_pb_row to target Divi rows as stacking cards, or .my-card-class for a custom class applied to specific modules. Use this when auto-detection targets the wrong elements in complex layouts.

Stack Position (%)

Type: Slider Unit: % Default: 20%

Controls where each card pins vertically within the viewport as the stack builds. Lower percentages pin cards higher on screen; higher percentages pin them lower.

Stack Offset

Type: Slider Unit: px Default: 15px

The visible vertical gap between stacked cards. When multiple cards are layered, each card peeks out from behind the one on top by this amount — creating a visible layered depth effect.

Card Spacing

Type: Slider Unit: px Default: 150px

Controls the scroll distance required to transition from one card to the next. Higher values mean the visitor needs to scroll further before the next card comes into view — creating a slower, more deliberate pacing.

Scrub Smoothness

Type: Dropdown Default: 2 — Medium

Controls how smoothly the stacking animation follows scroll input. Higher values add more easing and momentum:

Easing

Type: Dropdown Default: Power2 In-Out

Controls the acceleration curve of each card's animation — how it speeds up and slows down as it moves into position:

Anticipate Pin

Type: Toggle Default: Off

When enabled, ScrollTrigger begins preparing for the pin slightly before the scroll position reaches the section — preventing a brief visual jump at the moment cards begin stacking.

💡 If you notice a visible layout shift or jump when the stacking begins, enable Anticipate Pin. It is off by default because it is not always needed.

Scale Effect

Type: Toggle Default: On

When enabled, cards that are lower in the stack (further back) scale down slightly — creating a depth illusion where background cards appear smaller than the front card. This is the foundational depth effect and is enabled by default.

Rotation Effect

Type: Toggle Default: Off

When enabled, each card rotates slightly as it moves into or out of the stack — adding a dynamic tilt to the stacking transition. Works well for playful or creative layouts; less appropriate for formal or corporate designs.

Blur Effect

Type: Toggle Default: Off

When enabled, cards lower in the stack receive a progressive blur — simulating depth of field. The front card stays sharp; cards behind it become increasingly blurry. Creates a strong sense of visual depth when combined with Scale Effect.

Opacity Fade

Type: Toggle Default: Off

When enabled, cards lower in the stack fade toward transparency — they become more see-through the further back they are. Can be used alone or combined with Blur Effect and Scale Effect for a layered depth treatment.

Effect Combinations

Mix and match the four visual effects to achieve different aesthetic results:

Quick Reference

Tips & Best Practices

01 — Use 3–6 cards for the best experience Too few cards (2) makes the effect feel like a standard scroll. Too many (8+) can feel exhausting. 3–6 cards gives visitors a clear sense of progression without overstaying its welcome.

02 — Start with Scale Effect only, then layer more Scale Effect alone already creates a convincing stacked depth. Add Blur or Opacity Fade only after testing — combining all four effects at full strength can feel visually heavy.

03 — Card Spacing 150–200px is the sweet spot The default 150px gives each card enough screen time to be read before the next arrives. For text-heavy cards, increase to 200–250px. For image-only cards, 100–150px works well.

04 — Keep Stack Offset at 15–20px for the most natural feel This communicates "there are more cards behind this one" without revealing too much content below. Values above 30px start to feel like a fan rather than a stack.

05 — Power2 In-Out easing is the safest default It mirrors how physical objects naturally accelerate and decelerate — making the stacking feel believable rather than mechanical. Only change easing if you have a specific stylistic reason.

06 — Enable Anticipate Pin if you see a jump on entry If the section snaps or jolts when the stacking begins, turn on Anticipate Pin. It compensates for the pin transition and removes the visual stutter.

07 — Use Custom Card Selector for complex layouts If your section contains mixed Divi modules and only some should stack, use Custom Card Selector with a CSS class to target exactly the right elements without restructuring your layout.