How to Fade Element on Scroll Using Elementor Magic Scroll Addon

Premium Magic Scroll addon from the Premium Addons Pro plugin is a fantastic feature to create scroll animations and effects. If you’re not familiar with Elementor Magic Scroll, please take a look at this article.

In this article, we’re going to show you how to fade an Elementor element on scroll using the Elementor Magic Scroll addon.

Elementor Magic Scroll Fade In and Fade Out Effects


1. Add an Elementor Element to The Page

You can use the fade effect with any Elementor element, after inserting the element. All you need to do is to navigate to your Element Advanced Setting -> Premium Magic Scroll -> Enable Magic Scroll.

2. Add the Fade effect to Elementor element

Click on “Add item” -> Select Animation -> Fade In or Fade Out. In the video above we used both effects (Fade In then Fade Out) to get this smooth Fade look.

In addition, you can choose the fade direction from the field below the select animation field.

Fade In Effect In Magic Scroll Feature
Premium Magic Scroll for Elementor Fade In Effect

Elementor Magic Scroll General Settings

  • How This Works: We used “Lock Page Scroll Until Animation Ends” so the element keeps in the viewport till the animation ends before jumping to the next Elementor section.
  • Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example.
Elementor Magic Scroll Addon General Setting
Magic Scroll General Options

You Did It!

Now you can create fade animations using the Magic Scroll feature. We look forward to seeing what you will create.

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.