Atomic Element · Pro
Services, steps or case studies pin and peel away one card at a time as the page scrolls. Fill each card with your own elements, pick an animation, and skip the sticky-position CSS.
The short answer
Stack Cards is an Elementor 4 Atomic Element from Animation Addons for Elementor that creates the stacking cards scroll effect: cards pin and peel away as the page scrolls, each new card sliding over the last. Every card is a real atomic container you fill and style yourself, and the scroll motion runs on GSAP ScrollTrigger with no code.
Most "Elementor V4 compatible" addons are classic v3 widgets running on V4. Stack Cards is a native Atomic Element.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite: a deck with card children) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Stack Card (four on a fresh drop); add, duplicate, remove and drag to reorder from the Cards list |
| Animations | 10 deck animations; Scroll Stack is the default. The deck also carries its own overlap and easing settings |
| Presets | 10 ready-made deck designs under Apply Preset; a fresh drop lands on "Scroll Stack — Showcase" |
| Responsive | Card styles set per breakpoint in the Elementor 4 Style tab |
| Limit | A deck needs at least 2 cards to stack. On the canvas, cards sit in a flat list for editing; use Preview Animation to see the motion |
| Requires | Animation Addons for Elementor (free) + Animation Addons Pro |
| Plugin version | Animation Addons 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Stack Cards, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
Full-width cards, each in a brand color from Variables, with a large service name, two lines of copy and a button.
Two-column step cards: a screenshot on the left, the step title and one line on the right. Only one step is on top at a time.
Edge-to-edge image cards with the client name in small caps and a "View the story" link over a dark overlay.
Three plan cards; each pins as the next slides up, so a phone shows one plan in full. The middle plan uses an accent Variable.
Off-white cards with one value in large serif type and a sentence underneath. No images: the stack reads like a manifesto.
Alternating light and dark week cards with the module title, three bullets and a "Live session" tag.
Features
Every option below is a real control in the Stack Cards panel or part of how the element renders. Nothing here needs custom code.
Each card is an atomic element. Put a heading, image, list or a whole two-column layout inside, and style one card or all of them with one Class.
The Cards list in the panel adds, duplicates and removes cards and renames them. Duplicate copies a card with its content and styles. Drag a row to reorder: the list order is the stacking order.
Pick from 10 deck animations. Preview Animation plays the real timeline on the canvas, and a scrub slider stops it at any percentage so you can judge the pose before choosing.
Apply Preset offers 10 deck designs, each with four styled cards plus the deck's own animation, overlap and easing. A fresh drop applies "Scroll Stack — Showcase" so you start from a real pile, not an empty list.
Built on the atomic base
Why it mattersThe effect lives on the deck, the content in the cards. Change the animation without touching content, or restyle every card through one Class.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, then open a page with the Atomic Editor on.
Drag Stack Cards into a full-width section. It lands with four cards and the "Scroll Stack — Showcase" design.
In the Cards list, rename, add, duplicate or reorder cards, then select each card on the canvas and fill it with your elements.
Choose an animation, then click Preview Animation or drag the scrub slider to check the motion.
Style the cards in the Style tab and save the shared look as a Class.
Publish, then scroll the live page on desktop and a phone.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor 4 on its own | Animation Addons Stack Cards |
|---|---|---|
| Ready-made stacking cards element | None among the atomic elements in 4.3.3 | Yes |
| Scroll-linked motion | Free Interactions: Page load and Scroll into view only. Pro adds While scrolling with a custom effect | Built in: 10 deck animations on ScrollTrigger |
| Engine | Motion library | GSAP |
| Adding a card | Build and offset another container yourself | Add or duplicate in the Cards list |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's While scrolling interaction moves one element with the scroll, and sticky containers can fake a stack. Stack Cards packages deck, timing and preview in one element.
Who it's for
The people who get the most out of it, and what they use it for.
Presenting services or process in a memorable scroll.
Turning "how it works" into a guided sequence.
Showing one project at a time.
FAQ
In Elementor 4, drag the Stack Cards element from Animation Addons for Elementor onto the page. It arrives with four cards and a ready design. Fill each card with your elements, choose one of the 10 animations and check it with Preview Animation. Stack Cards pins and slides the cards as the visitor scrolls, with no code.
No. Elementor 4.3.3 ships atomic Heading, Paragraph, Button, Image, SVG, Video, Div Block, Flexbox, Grid, Tabs and Accordion, but no stacking cards element. Stack Cards from Animation Addons for Elementor fills that gap as a native Atomic Element that works with Classes and Variables.
Yes. Each Stack Cards card is an atomic container, so it takes headings, text, images, buttons, lists or a full Flexbox layout. Select the card on the canvas and drop elements in. Keep each card's content short enough to fit one screen so the stacking stays readable.
Stack Cards runs on phones as well as desktops, and a stack suits small screens because one card shows at a time. Card styles take per-breakpoint values in the Style tab, so reduce padding and type size for mobile. Keep every Stack Cards card shorter than a phone screen, or the next card covers content before it is read.
Stack Cards animates with GSAP. Animation Addons Pro includes Lazy Animation, which loads GSAP only when an animated element nears the viewport, Reduced Motion settings, and LiteSpeed Cache and WP Rocket compatibility. Compress images inside Stack Cards cards; they cost more than the animation.
Yes. Stack Cards cards are atomic elements rendered into the page HTML, so headings and text inside the cards are crawlable like any other section. The stacking is motion applied on top of that markup. Use a real heading hierarchy inside the cards, as you would elsewhere on the page.
No. Stack Cards needs Animation Addons for Elementor and Animation Addons Pro, but not Elementor Pro, and runs on Elementor Free with the Atomic Editor on. With only the free plugin, Stack Cards shows in the panel as a locked card with an upgrade link, so administrators can see it before buying.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Stack Cards on the same page or template.
a free way to show steps in a vertical list when you don't need scroll motion.
reveal card detail on interaction instead of on scroll.
animated calls to action inside each card.
a drawn line or icon beside a stack of process steps.
when the cards should come from posts instead of being written by hand.
Ten deck animations, real atomic cards, no sticky-position CSS. Need something free? The Timeline element lays out the same steps as a static vertical list.
