How to Apply a Scrolling Effect in Elementor

Updated: October 8, 2022

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.