GSAP Card Stack
Stack, peel, slide or fan cards as visitors scroll.
Turns the blocks inside a section into scroll-driven cards: a stack where each card slides over the last, a peel that lifts the top card away, a sideways stack, a sideways peel, or a fanned deck that gathers into a pile — and the effect, offset, spacing and scrub can differ per device. Works in Elementor (containers and sections), Gutenberg (Group, Row, Stack, Columns and Cover blocks) and Divi 5 (sections, rows and columns).
Extension
Requirements
- One of: Elementor 3.6 or newer (containers; legacy sections work too) · the block editor (Gutenberg) · Divi 5
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Moduly with GSAP built in (the release after 0.4.2). On an older Moduly the cards show as a plain list.
In Elementor
- Switch it on in Moduly → Installed Widgets.
- Edit the page with Elementor and add a container. Put one inner container in it for each card and style the cards as you like — background, image, heading, text.
- Select the outer container, open the Layout tab and find GSAP Card Stack. Turn on Scroll Cards and pick an Effect.
- Preview or view the page and scroll down.
On a legacy section the same settings are in Advanced → GSAP Card Stack, and each column is a card.
In the editor the cards show piled up and still, the way the effect ends (Peel: the way it starts). Select the cards underneath in the Navigator, or switch Scroll Cards off while you edit them.
In Gutenberg (block editor)
- Switch it on in Moduly → Installed Widgets.
- Add a Group block (its Row and Stack variations work too), a Columns block or a Cover block, and put one inner block in it for each card — a Group with a background, an image and a heading makes a good card.
- Select the outer block and open GSAP Card Stack in the block sidebar. Turn on Scroll Cards and pick an Effect.
- Preview or view the page and scroll down.
The cards are the block's direct inner blocks: a Group's blocks, each Column of a Columns block, the blocks inside a Cover. A Columns block or a Row group is laid out as a column while the Stack effect runs. In the editor the blocks stay as you laid them out — easy to edit — and the effect runs on the live page. The block's saved content is never changed.
Card Width takes px, % or vw. Turn Off Below uses WordPress's own breakpoints: tablet and smaller is 1024 px, mobile is 781 px.
The effect, Top Offset, Spacing and Scrub Smoothing can differ per device: pick Values for → Tablet or Mobile and set them; an empty value follows the larger screen. Turn Off On ticks devices where the cards are a plain list.
In Divi 5
- Switch it on in Moduly → Installed Widgets.
- In the Visual Builder, open a section, a row or a column and go to Advanced → GSAP Card Stack. Turn on Scroll Cards and pick an Effect.
- Save and view the page.
| On a… | the cards are |
|---|---|
| Section | its rows — give each row a background and padding so it reads as a card |
| Row | its columns — laid out as a column for Stack, sharing one spot for the other effects |
| Column | its modules — each module (a text, a blurb, an image) is a card |
In the Visual Builder the rows and columns stay as laid out; the effect runs on the live page. Turn Off Below uses Divi's breakpoints: tablet and smaller is 980 px, phone is 767 px. The effect, Top Offset, Spacing and Scrub Smoothing have Divi's device icons (every breakpoint you have enabled, widescreen and ultra wide included), and On This Device switches the effect off per breakpoint.
Effects
| Effect | What happens |
|---|---|
| Stack | Each card pins below the top offset and the next one slides up over it; the cards underneath shrink and dim |
| Peel | The cards share one spot. The section pins, and the top card lifts and turns away to reveal the next |
| Horizontal stack | The cards share one spot. The section pins, and each next card slides in from the right over the last |
| Sideways peel | The cards share one spot. The section pins, and the top card slides off to the left to uncover the next |
| Deck | The cards start fanned like a hand of cards. The section pins and they gather into a neat pile — and spread again scrolling back up |
Settings
| Setting | What you can set |
|---|---|
| Scroll Cards | Turns the effect on for this container, block, section or row |
| Effect | Stack · Peel · Horizontal stack · Sideways peel · Deck. Per device |
| Card Width | Peel, Horizontal stack and Deck (per device in Elementor). Empty: full width (Deck: 340px) |
| Top Offset | Where the cards stop below the top of the screen: px (room for a sticky header) or % of the screen height. Per device |
| Spacing | How much of each card underneath peeks out, 0–200 px. Per device |
| Card Gap | Stack: extra space between the cards on their way up |
| Fan Spread | Deck: how far apart the fanned cards start. Never wider than the container — on a narrow screen the fan closes up to fit. Per device |
| Rotation | Peel and Sideways peel: how far a card turns as it leaves. Deck: the tilt between neighbouring cards. Per device |
| Tilt | How far the cards underneath turn, for a hand-stacked pile. 0: straight |
| Scale Down | How much smaller the cards underneath get; 0 keeps every card full size |
| Dim | How much darker the cards underneath get |
| Scrub Smoothing | 0–10 seconds for the cards to catch up with the scroll; 0 locks them to the scrollbar. Per device |
| Turn Off Below | Never (default) · Tablet and smaller · Mobile. On those screens the cards are a plain list |
| Turn Off On | Any devices you pick as well (Elementor: every active breakpoint; Gutenberg: Desktop, Tablet, Mobile). Divi 5: the per-breakpoint On This Device switch |
Good to know
- Stack works best with cards shorter than the screen; a taller card pins with its bottom out of view.
- Peel, Horizontal stack and Deck centre the pinned section on the screen when it fits, and pin it at the top offset when it does not.
- Visitors who ask their device for reduced motion see a plain list of cards.
- A card deck that stacks as you scroll — each card pinning a little lower than the last — is Stack with a larger Spacing (the offset between pinned cards), Scale Down 0 and, if you like, a Card Gap.
For developers
The same front-end script runs in every builder. Gutenberg and Divi elements carry the classes mdly-gcs-yes and mdly-gcs-mode-<effect> and their settings as JSON in data-mdly-gcs; the element the cards sit in has mdly-gcs__cards, and the card width is the CSS variable --mdly-gcs-card-w.