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 of the Magic Scroll Addon to get to know more about this feature and the options included in it.
This tutorial shows how to use the Elementor mage Comparison widget in Premium Addons plugin with Elementor Magic Scroll addon.
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.
1. Use Elementor Image Comparison Widget.
Navigate to your website page > from the Elementor editor, drag the Image Comparison widget from Premium Addons, and drop it in your section.
In this tutorial, we will walk through the options that need to be enabled to achieve the desired effect.
From Premium Image Comparison widget setting > navigate to Display Options
- Use With Magic Scroll: Set it to “Yes”.
2. Add Image Compare scroll effect in Elementor Magic Scroll.
Go to your widget’s Advanced tab, navigate to Premium Magic Scroll, switch it on, then click on “Add Item”. From the “Select Animation” dropdown list scroll down and choose “Image Compare”.
Elementor Magic Scroll General Settings
- How This Works: We can use “Lock Page Scroll Until Animation Ends”. This will keep the Image widget in the viewport till the comparison slider reaches the end before jumping to the next Elementor container/section or we can use “Play Animation When Only Visible“.
- Offset: If you chose “Play Animation When Only Visible” you can set screen offset in percentage (%).
Good Work!
You managed to make your Elementor image comparison to work on scroll with Elementor Magic Scroll addon. We’re looking forward to seeing what you will come up with.
