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.
Requirements:
- You will need the Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that the Elementor Magic Scroll feature is enabled so you can find them in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
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.
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.
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.
