What is a stacked cards effect?
Stacked cards (also called a card stack on scroll or sticky cards) is a scroll animation where content blocks pin to the top of the screen one after another. Each new card rises over the one before it, but leaves a small peek of the previous card showing, so by the end of the section the visitor sees the whole deck.
It works well because it slows the reader down: every card gets its moment on screen before the next one arrives, instead of scrolling past in a blur. That makes it a strong pattern for services, features and step-by-step stories.
How to create stacked cards in Elementor (step by step)
You don't need custom CSS or JavaScript. With Pro Effects installed:
- Create a section in Elementor and add the containers that will be your cards inside it — at least 2, ideally 3 to 5.
- Put whatever you want in each container: image, heading, text, buttons. Style them normally (background, padding, radius).
- Optional: give each container a tall min-height (for example
80vh) so the stacking is clearly visible while scrolling. - Drag the Stacked Cards widget into the same section, at the same level as the containers (as their sibling).
- In Behavior, set the Anchor top (where the cards pin, e.g.
80pxif you have a fixed header) and the Peek amount (how much of each card stays visible). - Optional: turn on the Depth effect so cards underneath shrink and dim slightly, creating a subtle 3D deck.
- Publish and scroll. The widget itself is invisible on the front end — it only controls its sibling containers, and it respects the width, height and styles you already gave them.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Anchor top | Distance from the top of the viewport where each card pins | 0 px |
| Peek amount | How much of each previous card stays visible under the next one | 20 px |
| Exit space | Scroll room after the last card before the section releases | 30 vh |
| Scale step per card | How much each covered card shrinks (0.03 = 3% per card) | 0 (off) |
| Opacity step per card | How much each covered card dims (0.15 = 15% per card) | 0 (off) |
| Transition smoothness | Easing time of the scale/opacity change | 400 ms |
When to use stacked cards
- Services pages with 4–6 cards (image + title + short description): each service stays visible once the next one stacks on top.
- Feature showcases, where every feature deserves to be read before the next arrives.
- Portfolio timelines: one project per card, and the final deck works as a visual summary.
- About sections: mission, vision, values and team, stacked for the visitor who reviews them at the end.
- Scroll storytelling: each block is its own scene and remains as a visual memory.
Avoid it for long text blocks: if a card is taller than the screen, the next one covers content the visitor hasn't read yet. Keep each card to one idea.
How it works under the hood (and why it's light)
The effect is built on native CSS position: sticky plus a small requestAnimationFrame loop for the optional depth effect — no GSAP or other animation library is loaded for it. The whole effect is about 8 KB of JavaScript and CSS before minification, and it respects the visitor's reduced motion setting.
If you have tried to build stacked cards by hand, this is the part that usually breaks in Elementor: calculating each card's top offset so the peeks line up, and keeping the section tall enough so the last card doesn't release too early. The widget does both for you from the containers you already have.
Stacked cards vs. other scroll effects
- Scroll Stack stacks whole sections (one full-screen block covering another) instead of cards inside one section.
- Horizontal Scroll turns vertical scrolling into sideways movement — better for galleries or timelines with many items.
- Sticky Scroll keeps an image fixed while the text beside it scrolls — the classic scrollytelling layout.
Pick stacked cards when you have a handful of equally important blocks and you want the visitor to see all of them together at the end.
