On Scroll Effects allow you to create scroll-driven visual interactions that affect entire containers. Unlike standard entrance animations—which trigger once when elements enter the viewport—On Scroll Effects remain active as the user continues scrolling, enabling dynamic parallax, sticky behavior, reveals, masks, and more.
Note: These effects are available only on Containers (Elementor Flexbox containers) and appear in Advanced → Scroll Effect:
Available Scroll Effects
When you open the Scroll Effect dropdown, you can choose from a variety of interaction types:
Simple Sticky
Keeps all child elements fixed in place during scroll.
Sticky Scale
Sticks the content while gradually scaling it:
Sticky Scale Small
A subtler scale version:
Sticky Scale Alt
Alternative motion curve for the sticky scale behavior:
Sticky Scale & Blur
Scales the content and gradually blurs it:
Sticky Scale & Blur Small
The same effect with reduced intensity:
Sticky Parallax
Creates a parallax-like sticky movement:
Sticky Mask
Applies a mask that animates as the user scrolls:
Sticky Mask Grow
Applies a mask that animates as the user scrolls:
Reveal Mask
Unmasks the current section from behind another:
Scroll Effect Controls
Each scroll effect includes two key controls:
TOP Offset
Defines how far from the top of the viewport the scroll effect should begin.
- Measured in px, vh, or %.
- Useful for controlling when stickiness, scaling, or masking should activate.
Items Offset
Controls the offset applied to items inside the container while the scroll effect is active.
- Also measured in px, vh, or %.
- Useful for sequencing or shifting child elements relative to scroll position.
