One of the compelling things when designing a page or template using Elementor is that you can apply some animation effects to the page/template you are working on. One of which is a scrolling effect which we will cover in this article. Scrolling effect itself is a feature available on Elementor Pro. So, you need to upgrade your Elementor to the pro version in case you haven’t done so. You can read our previous article to learn the differences between Elementor Free vs Elementor Pro.
What is scrolling effect?
It is a type of animation effect that occurs when users are scrolling mouse on a page. Be it up or down. The effect can be vary depending on your setting. Elementor itself offers 6 effect options:
- Vertical Scroll: Objek will move vertically upon mouse scroll
- Horizontal Scroll: Objek will move horizontally upon mouse scroll
- Transparency: Object appears as transparent before the mouse scroll
- Blur: Object appears blur before the mouse scroll
- Rotate: Object makes a rotation move upon mouse scroll
- Scale: Object appears in a certain scale before the mouse scroll
You can apply a scrolling effect whether on a section, column, or widgets.
How to apply a scrolling effect in Elementor
As we mentioned, scrolling effect is one of the Elementor Pro features. In other words, you need to use Elementor Pro to use the feature. In this example, we will show you how to apply a Horizontal Scroll effect. As the name suggests, this effect will make an object to have a vertical movement when the mouse is scrolling. This effect is great when combined with Lottie.
Below is an example before the Horizontal Scroll effect is applied.
And here is the example after the Horizontal Scroll is applied.
Note: The example above uses Lottie. Read this article to learn more.
Adding the scrolling effect
Again, you can apply the scrolling effect whether to a section, column, or widget.
First off, select an element (section, column, or widget) you want to apply the scrolling effect to and go to the Advanced tab on the left panel and open the Motion Effects block. Enable the Scrolling Effects option.
Since we want to apply the Horizontal Scroll effect, click the pencil icon on the Horizontal Scroll option to make the settings such as direction (left or right), speed, and viewport (user’s visible area).
You can apply multiple scrolling effects if you want to. Simply click the pencil icon on other scrolling effect options to apply other scrolling effects.
That’s it. Once done editing the page, you can publish/update it. You can also disable the scrolling effect on a certain device type. Simply remove the device you want to disable the scrolling effect on by clicking the X icon on the Apply Effects On field.