What is a scroll stack effect?
Instead of sections simply following each other, a scroll stack makes them layer. The page feels like a stack of sheets: one stays pinned while the next one slides over it, or the top one lifts away to reveal what was underneath.
It's one of the most common transitions on premium landing pages because it marks a clear change of chapter without breaking the scroll.
The two modes
- Cover: the section that contains the widget pins to the screen, and the next section slides up and covers it — a sliding-card effect.
- Reveal: the section starts hidden behind the previous one and is gradually uncovered as the previous section scrolls up, as if it had always been there.
How to add a scroll stack in Elementor
- Place the Scroll Stack widget inside one of two consecutive top-level sections.
- Choose the Mode: Cover or Reveal.
- If you have a fixed header, set a Top Offset so it isn't covered.
- Adjust Smoothing to taste.
- Choose on which devices it's active (desktop, tablet, mobile).
- Publish and scroll.
You can use several Scroll Stack widgets on the same page: each one works on its own pair of sections.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Mode | Cover next section, or Reveal from behind | Cover |
| Top Offset | Space from the top of the viewport (for sticky headers) | 0 px |
| Smoothing (lerp) | 0 = immediate; 12 = balanced; 25–35 recommended with global smooth scroll | 12 |
| Pin Duration Override | Manual pin distance; 0 = automatic | 0 (auto) |
| Enabled on Desktop / Tablet / Mobile | Per-device switch | On / On / Off |
Why it doesn't break your layout
Many hand-made versions use CSS transform, which breaks the centering of boxed containers in Elementor. Scroll Stack uses position: sticky with an automatic spacer and a small requestAnimationFrame loop — no GSAP or heavy libraries — and it's compatible with Smooth Scroll. It also respects the visitor's reduced motion setting.
Scroll Stack vs. Stacked Cards
- Scroll Stack layers whole sections — big chapter changes.
- Stacked Cards piles up cards inside one section, leaving a strip of each one visible.
Related effects
- Horizontal Scroll — panels that move sideways on scroll.
- Sticky Scroll — scrollytelling with a fixed image.
