With Premium Magic Scroll, a feature in Premium Addons Pro for Elementor, you can effortlessly apply fade effects to elements as users scroll down your page. Adding smooth scroll animations to your Elementor website can enhance user experience and make your content more engaging.
In this guide, we’ll walk you through the step-by-step process of adding a fade effect using Premium Magic Scroll, along with use cases where this effect can improve your website design.
Why Use the Fade Effect on Scroll?
The fade effect is a subtle yet powerful animation that enhances content visibility and provides a modern feel. It is particularly useful for:
- Hero Sections – Gradually introduce key headlines and CTAs as users scroll.
- Product Features – Highlight different features of your product/service in an interactive way.
- Testimonials & Reviews – Make user reviews more engaging by fading them into view.
- Portfolio & Image Galleries – Add a professional touch to showcase creative work.
- Blog Posts & Content Sections – Keep visitors engaged by revealing content dynamically.
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.
Step 1: Add an Elementor Element to Your Page
You can apply the fade effect to any Elementor element, such as images, text blocks, buttons, or entire sections. Simply:
- Open your Elementor editor and insert the desired element.
- Navigate to the Advanced tab in the Elementor panel.
- Locate Premium Magic Scroll and toggle the switch to Enable Magic Scroll.
- Apply the Fade Effect
- Once Magic Scroll is enabled:
- Click on “Add Item” to insert an animation.
- In the Animation Type dropdown, select Fade In or Fade Out.
- Adjust the Fade Direction (if needed) for more control over the effect.
Pro Tip: You can combine Fade In and Fade Out effects on the same element for a seamless transition, as demonstrated in our example.
Step 2: Adjust Magic Scroll General Settings
To fine-tune the animation behavior:
- Lock Page Scroll Until Animation Ends: This keeps the element visible in the viewport until the animation is fully completed.
- Decrease Animation Speed By: Control how fast or slow the fade effect appears. Slower animations create a dramatic impact, while faster ones feel more dynamic.
See It in Action!
Curious about how this effect looks? Watch our demo video above to see how we applied both Fade In and Fade Out animations.
If you’re new to Premium Magic Scroll, check out this article for a deeper dive into its features.
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.
