How to use Image Comparison Widget with Elementor Magic Scroll Addon

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.

Image Comparison on scroll using Magic Scroll for Elementor addon


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”.
Elementor Image Comparison Widget Display Options
Image Comparison Widget Setting

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”.

Compare Option in Elementor Magic Scroll Select Animation dropdown list
Image Compare Option in Elementor Magic Scroll Addon

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 (%).
Elementor Magic Scroll "How this animation should work" Setting
Magic Scroll General Options

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.

Related Docs:

Leave a Reply

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.