The Scroll Effects feature allows you to add smooth, scroll-based transitions to elements, bringing motion and interactivity to your layouts. Using dynamic transformations tied to scroll position, you can create more engaging and visually rich pages — directly inside the Elementor page builder, without custom code.
Scroll Effects are available for the following elements:
Containers: Wrap any type of content and elements, giving you full control over complex layouts and animations.
Image (from pixfort Elements)
Auto Video(from pixfort Elements)
How Scroll Effects Work
Scroll Effects are based on two main states:
Start: This state represents the element’s default position when it first appears in the page (initial viewport entry).
End: This state is reached when the element’s default position aligns with the center of the viewport.
As the user scrolls between these two points, the Scroll Effects feature smoothly interpolates the values you define, creating fluid animations.
Supported Transform Options
Within Scroll Effects, you can control the following properties:
Opacity
Scale
Rotation (type and value)
Offset X
Offset Y
Skew X
Skew Y
Each property supports different values for the start and end states, allowing you to create subtle or dramatic motion effects depending on your design needs.
Adding Scroll Effects (Example: Containers)
Containers are the most powerful way to use Scroll Effects, as they can contain any combination of elements such as text, images, buttons, and videos.
To enable Scroll Effects on a Container:
Select the Container in the Elementor editor
Open the Container Settings
Go to the Effects tab
Under Scroll Effect, select Advanced Transform
From there, you can configure the start and end values for each supported transform.
Container > Effects > Scroll Effect > Advanced Transform
Using Scroll Effects with Image and Auto Video Elements
Scroll Effects are also available for Image and Auto Video elements from pixfort Elements.
To enable Scroll Effects on these elements:
Select the Image or Auto Video element
Open the element settings
Locate the Scroll Effect option
Select Advanced Transform
You can then apply the same transformation options to create smooth, scroll-based transitions.
