Scroll Effects
We are excited to unveil the Scroll Effects feature for Elementor, a groundbreaking addition from Spexo Addons for Elementor that revolutionizes your website-building experience. This state-of-the-art tool enables you to incorporate a wide range of scroll animations into your Elementor columns and widgets, enhancing the design of contemporary WordPress websites.
With Scroll Effects – Spexo Addons, your design elements can spring to life through various motion effects, including translation and rotation. You can also apply CSS transitions for effects like opacity and padding changes, as well as interactive animations such as video playback and dynamic SVG drawings.
Discover these capabilities for yourself on our Scroll Effects feature showcase page.
Before you start, ensure that the Spexo Addons PRO plugin is installed and activated on your website.
How to Enable Scroll Effects #
Head up to your WP Dashboard → Spexo Addons → Widget Settings tab and make sure that Scroll Effects feature is enabled.
How to apply Scroll Effects #
Scroll Effects for Elementor can be added to any column or widget within Elementor. To apply Scroll Effects to your Elementor column or widget, follow these steps:
Navigate to your Elementor widget/column settings → Advanced tab → Scroll Effects – Spexo Addons section
Scroll Effects Settings #
Before adjusting any settings, start by creating a scene: add animations to your column or widget by clicking the + Add Item button.
Each animation comes with its own set of settings, along with shared settings that apply across all animation tabs. First, we will explore each animation along with its specific settings in the item tab. Then, we will cover the shared settings found in the item tab.
Position Animations #
1. Translate Effect #
The Translate animation effect for Elementor is designed to create a transition between two position points for an Elementor element while scrolling.
- TranslateX: Define the final horizontal position in pixels or percentages that the element will be moved to along the X-axis.
- Transform Origin X: Specify the horizontal point around which the transformation is applied (Left, Center, Right, or a Custom point).
- TranslateY: Define the final vertical position in pixels or percentages that the element will be moved to along the Y-axis.
- Transform Origin Y: Specify the vertical point around which the transformation is applied (Top, Center, Bottom, or a Custom point).
2. Rotate Effect #
The Rotate animation effect for Elementor allows an element to rotate around one or multiple axes as the user scrolls.
- RotateX: Define the degree of rotation for the element around the X-axis.
- Transform Origin X: Specify the horizontal point around which the transformation is applied (Left, Center, Right, or a Custom point).
- RotateY: Define the degree of rotation for the element around the Y-axis.
- Transform Origin Y: Specify the vertical point around which the transformation is applied (Top, Center, Bottom, or a Custom point).
- RotateZ: Define the degree of rotation for the element around the Z-axis.
3. Scale Effect #
The Scale animation effect for Elementor allows you to create zoom-in, zoom-out, enlarge, or shrink effects for elements based on the scroll direction.
- Scale to Section Width/Height: Enable this option to scale the element until its width or height matches the browser window’s dimensions.
- ScaleX: Set the scaling value for horizontal resizing.
- Transform Origin X: Define the horizontal point from which the scaling effect originates (Left, Center, Right, or a Custom direction).
- ScaleY: Set the scaling value for vertical resizing.
- Transform Origin Y: Define the vertical point from which the scaling effect originates (Top, Center, Bottom, or a Custom direction).
4. Skew Effect #
The Skew animation effect for Elementor allows elements to be skewed along the X and Y axes by specified angles as the user scrolls.
- Skew X: Define the skew angle along the X-axis.
- Transform Origin X: Set the horizontal point around which the skew transformation is applied (Left, Center, Right, or a Custom point).
- Skew Y: Define the skew angle along the Y-axis.
- Transform Origin Y: Set the vertical point around which the skew transformation is applied (Top, Center, Bottom, or a Custom point).
5. Fade In and Fade Out Effects #
The Fade In and Fade Out animation effects in Elementor create smooth transitions, bringing elements into or out of view as the user scrolls.
⇨ Fade In Animation Settings:
- Select Animation: Choose “Fade In” to apply an entrance effect.
- Fade Direction: Specify the direction from which the element will fade in.
- Apply Animation On: Select the target for the fade-in effect, such as the Scroll Effects elementorElement Container.
⇨ Fade Out Animation Settings:
- Select Animation: Choose “Fade Out” for an exit effect.
- Fade Direction: Define the direction in which the element will fade out.
- Apply Animation On: Choose the target for the fade-out effect, like the Element Container.
CSS Properties Animations #
1. Opacity Effect #
The Opacity animation effect for Elementor applies a transparency effect to elements as you scroll, allowing them to appear partially transparent.
- Opacity: Define the final transparency level the element will reach at the end of the animation.
2. Border Effect #
The Border animation effect for Elementor lets you add borders to elements as users scroll.
- Border Type: Choose the border style (None, Solid, Double, Dotted, Dashed, or Groove).
- Width: Set the width of the element’s border.
- Color: Select the color for the element’s border.
- Border Radius: Define the corner radius of the element.
- Advanced Border Radius: Apply custom radius values to the element’s corners. For detailed instructions, refer to this article.
3. Padding Effect #
The Padding animation effect for Elementor adds padding or white space around elements as you scroll.
- Padding: Define the padding value (in pixels, em, or %) that the element will reach at the end of the animation.
CSS Filters Animations #
1. Blur Effect #
The Blur animation effect for Elementor reduces the focus on an element as you scroll.
- Blur Value (px): Set the blur intensity in pixels that the element will reach at the end of the animation.
2. Grayscale Effect #
The Grayscale animation effect for Elementor transitions an element from full color to a gray monochrome as you scroll.
- Grayscale Value: Define the intensity of the grayscale effect the element will reach at the end of the animation.
3. Brightness Effect #
The Brightness animation effect for Elementor applies a filter that adjusts an element’s brightness as you scroll.
- Brightness Value (%): Set the brightness level for the end of the animation. Values below 100% will darken the element, while values above 100% will increase brightness.
More Animations #
1. Color Effect #
The Color animation effect for Elementor enables a gradual change of an element’s color as you scroll.
- Select Color: Define the color that the element will transition to by the end of the animation.
2. Background Color Effect #
The Background Color animation effect for Elementor allows you to gradually change the background color of an element as you scroll.
- Select Color: Define the background color that the element will transition to by the end of the animation.
3. Font Size Effect #
The Font Size animation effect for Elementor allows for a gradual change in the text size of an element as you scroll.
- Font Size (px): Specify the text size in pixels that the element will reach at the end of the animation.
4. Letter Spacing Effect #
The Letter Spacing animation effect for Elementor enables a gradual adjustment of the horizontal spacing between text characters as you scroll.
- Letter Spacing (px): Specify the value in pixels for the horizontal spacing between text characters at the end of the animation.
5. Images Sequence Effect #
Images sequence animation effect for Elementor is used to set groups of images in sequence and show them one by one while scrolling.
- Select Images: Choose images that will be displayed in sequence while page scrolling.
6. Text Shadow Effect #
The Text Shadow animation effect for Elementor enables you to gradually modify the shadow of the text as you scroll.
- Select Shadow Color: Define the color of the text shadow that will be applied by the end of the animation.
- Blur Radius (px): Specify the blur radius of the shadow to create a soft or sharp effect.
- Horizontal Offset (px): Set the horizontal distance of the shadow from the text.
- Vertical Offset (px): Set the vertical distance of the shadow from the text.
7. Box Shadow Effect #
The Box Shadow animation effect for Elementor allows you to gradually change the shadow around an element as you scroll.
- Select Shadow Color: Define the color of the box shadow that will be applied by the end of the animation.
- Horizontal Offset (px): Set the horizontal distance of the shadow from the element.
- Vertical Offset (px): Set the vertical distance of the shadow from the element.
- Blur Radius (px): Specify the blur radius of the shadow to create a softer or sharper effect.
- Spread Radius (px): Adjust the spread radius to control the size and intensity of the shadow effect.
- Position Options: Choose between different position settings (e.g., outline, inset) for the element to define how the shadow will interact with other elements on the page.
Advanced Animations #
1. Custom Path Effect #
The Custom Path animation effect for Elementor allows you to animate elements along a custom path as the page scrolls.
- Path Type: Choose between SVG Path or Custom Path.
⇨ When using the SVG Path type, the following settings are available –
- SVG Path: Input the SVG path code. You can create paths using the Motion Path Helper.
- Stroke Thickness: Set the width of the stroke.
- Stroke Color: Define the stroke color.
- Space Between Dashes: Specify the spacing between stroke dashes.
- X Position: Set the center point of the stroke on the X-axis.
- Y Position: Set the center point of the stroke on the Y-axis.
- Zoom: Adjust the value to scale up the stroke path.
- Height: Define the height of the stroke path.
⇨ When using the Custom Points path type, the following setting is available –
- Custom Points: Input multiple points in path code format, e.g., {50,20}, {100,-50}, {200,200}.
2. CSS Class Effect #
The CSS Class animation effect for Elementor allows you to add a custom CSS class to an element, applying its styles as the page scrolls.
- CSS Class: Specify the CSS class that will be added to the Elementor element when the page is scrolled down.
The CSS class will remain applied even when scrolling back.
Repeated settings for Scroll Effects #
- Apply Animation On: Choose to apply the animation effect on the same Elementor Element Container, or select another Elementor element using a Custom CSS Selector.
- Reverse Animation: Enable this option to play the animation sequence in reverse.
- Sync with Previous Animation: Enable to begin this animation once the previous one ends.
- Delay (sec): Set a positive value to delay the animation start or a negative value to begin it before the previous animation completes.
- Sync with Whole Scene: Enable to trigger the animation at the start of the entire scene.
- Easing: Define the rate of animation changes over time.
- Disable Animation On: Select the display types on which you want to disable the animation.
General Settings for Scroll Effects #
- Perspective (px): Set a perspective value to create 3D depth when using Translate, Rotate, and Skew animation effects.
- Run All Effects Simultaneously: Enable to start and end all scroll effects at the same time.
- Loop Count: Define the number of times an animation effect should repeat before the scene ends.
- How This Animation Should Work?: Select how the Elementor element’s animations will behave within the scene.
1. Lock Page Scroll Until Animation Ends #
- Animation Order: Set the timing for when the element’s animation will be triggered.
Use this option if multiple elements in the same scene have the Scroll Effects feature enabled, allowing you to create a sequence for your animations.
For example, If the value equals ” 1 ” that means the related animations to this element will be triggered at the start of the scene. If the value equals ” 3 ” that means the related animations will be triggered after the second element animations end.
- Decrease Animation Speed By: Set a value to adjust the animation speed. Higher values will slow down the scene’s animation.
- Scrub: Controls the time delay between scrolling and the animation start. Leave blank to sync the animation directly with the page scroll.
2. Complete Animation On Viewport #
Select this option to start and complete the animation when the top of the viewport reaches the top of the section.
- Animation Duration (sec): Set the total time for the animation to complete.
- Animation Delay (sec): Set a delay time to start the animation after it is triggered.
- When the Animation Should Start: Choose the exact scroll point to trigger the animation.
- Reverse Animation on Scroll Up: Enable to play the animation in reverse when scrolling up.
3. Play Animation Only When Visible #
Select this option to start the animation when the element appears in the viewport.
- Start Animation From: Choose the specific point at which the animation should be triggered.
- Offset (%): Set an offset percentage between the top of the viewport and the point at which the animation begins.
- Decrease Animation Speed By: Adjust the value to control the animation speed; larger values will slow down the scene’s animation.
- Scrub: This option controls the time delay between scrolling and the animation start. Leave it empty for the animation to sync with the page scroll.
4. Stick to Another Element #
Select this option to trigger the element’s animation based on the behavior of another element in the viewport.
Sticky animations work only on the frontend, so to view animation changes, click on “Save and Preview” from the Elementor editor.
- Stick this Element to: Specify the CSS selector of the reference element with which the current element will stick.
- Start Sticky From: Choose when the animation for the Elementor element begins based on the reference element’s position in the viewport.
- Offset (%): Set the offset percentage between the top of the viewport and the point where the animation starts.
- Stop Sticky: Determine when the animation ends based on the reference element’s position in the viewport.
- Disable Sticky On: Select the display types on which you want to disable the sticky option.
Scroll Effects Responsive Settings #
These settings allow you to disable the Elementor Magic Scroll animation based on device type or to disable the Lock Page Scroll option according to the section height.
Conclusion #
Scroll Effects – Spexo Addons offers a variety of animation effects that empower creators and designers to craft engaging, interactive, and stunning live Elementor web pages that captivate their audience.
This guide will help you understand how the Scroll Effects feature works and how to adjust its settings to customize scroll animations on Elementor elements to suit your preferences. Explore the remaining Global Features in Spexo Addons for more enhancements.
Should you require any additional help, don’t hesitate to contact our Spexo Addons support team. We’re always here to assist you! 🌟
Functional Always active
Preferences
Statistics
Marketing
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.