Magic Scroll is a global addon in Premium Addons Pro. It allows you to create sophisticated scroll animation and effects on your Elementor pages. Before we get into this article, we recommend checking the documentation article to get to know more about this feature and the options included in it.
This tutorial shows how to use the Elementor Image Comparison widget in Premium Addons plugin with Elementor Magic Scroll addon to create a before after slider that works on page scroll.
Why Use Elementor Image Comparison with Magic Scroll?
Adding an interactive Image Comparison feature to your Elementor website enhances user engagement, making it ideal for before-and-after images, product showcases, design comparisons, and more.
Where Can You Use This Feature?
- Photography Portfolios: Show before-and-after editing results.
- E-commerce Stores: Display product transformations (e.g., makeup, furniture makeovers, weight loss comparisons).
- Real Estate Listings: Highlight home renovations or staging effects.
- Medical & Beauty Websites: Demonstrate treatment results.
- Design & Development Showcases: Compare website or branding redesigns.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that Elementor Magic Scroll feature and Image Comparison widget are 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-by-Step Tutorial
1. Add the Elementor Image Comparison Widget
- Open your Elementor editor and navigate to the page where you want to add the effect.
- Drag and drop Elementor Image Comparison Widget from Premium Addons into your section.
- Customize the images and labels according to your needs.
- Navigate to the Display Options of the widget and set “Use with Magic Scroll” to Yes.
2. Enable Magic Scroll for Image Comparison
- Click on the Advanced tab in the widget settings.
- Scroll down to the Premium Magic Scroll section and switch it On.
- Click Add Item and select “Image Compare” from the Select Animation dropdown menu.
3. Configure Magic Scroll Settings
- Lock Page Scroll Until Animation Ends: This option keeps the Image Comparison widget visible until the user completes the comparison before scrolling to the next section.
- Play Animation When Only Visible: Triggers the effect only when the widget is in view.
- Offset: Adjust the scroll offset percentage (%) if using “Play Animation When Only Visible.”
Final Thoughts
Great job! 🎉 You managed to add a before after image slider that works on scrolling.
Let us know how you’re using this effect on your Elementor site in the comments! Need more Elementor tips? Check out our Premium Addons documentation for more tutorials!
