How Do You Add The Magic Scroll to Elementor?

Updated on June 24, 2024 by Editorial Team
Table Of Content

Do you want to add a magic scroll effect on your Elementor website? Adding a magic scroll effect can make your website visually appealing. This effect allows the content animation to run forward and back as the user scrolls down and up, creating a smooth and visually appealing transition.  

You can easily add a magic scroll effect on most of the widgets of The Plus Addons for Elementor.

Required Setup

How to Activate the Magic Scroll?

This feature is enabled by default on some of the selected widgets of The Plus Addons for Elementor. You don’t need to enable it separately.

Key Features

  • Add scrolling effect – You can easily add a scrolling effect on a widget.

How to Add a Magic Scroll Effect on a Widget in Elementor?

Add one of the listed below widgets of The Plus Addons for Elementor and follow the steps – 

1. Go to Advanced > Plus Extras

2. Turn on the Magic Scroll toggle.

Magic scroll setting

From the Scroll Options section, you can set when the animation starts and ends by setting an offset and duration value.

3. From the Initial Position section under the Initial tab, you have to set the initial state of the object. Here, you’ll find the following options – 

(X) / Horizontal Distance – To set the initial horizontal position.

(Y) / Vertical Distance – To set the initial vertical position.

Opacity – To set the initial opacity.

Scale Value – To set the initial scale value.

Rotate Value – To set the initial rotate value.

4. Then, from the Final Position section under the Final tab, you have to set the final state of the object. You’ll find the same options as in the initial position.

Now, as per your settings, you’ll see the object animating back and forth as you scroll up and down.

Magic scroll demo

Supported Widgets

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X