The Image Comparison Effect on Scroll is a powerful way to create an engaging before-and-after experience on your Elementor website, allowing visitors to visually explore changes as they scroll through the page. With the Scroll Image Comparison Widget, you can smoothly reveal differences between images to showcase transformations, design updates, renovations, progress timelines, or product comparisons in a modern and interactive format. Its no-code setup inside Elementor makes it easy to customize the reveal direction, scroll timing, and even support multiple images, helping you create a polished user experience that captures attention and keeps users engaged.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below to access the Scroll Image Comparison widget.
Then follow these steps:
Step #2: Adding the Scroll Image Comparison widget to your Elementor website
To add the image comparison effect on scroll in your Elementor website, install the Scroll Image Comparison widget from the Unlimited Elements Widget library.
Step #3: Add an Image Comparison Effect on Scroll in Elementor
Now, in the Elementor editor, find the Scroll Image Comparison widget and drag it to the desired part of your page.
Add Items
Navigate to the Items tab and add the ‘Before’ and ‘After’ image items.
General Settings
Transition Type
Select the transition type:
- Slide
- Fade
- Circle Mask Reveal
- Circle Mask Reveal (Fade)
- Blur Crossfade
- Morph
Slide Edge Type
Choose the slide edge type:
- Solid
- Feather
Direction
Choose the scroll direction:
- Horizontal
- Vertical
Reverse
Enable the reverse option if required.
Sequential Reveal Overlap
Start revealing the next image before the previous one finishes.
Transition Smoothness (ms)
Sets the scroll transition smoothness in milliseconds.
Layout Settings
Scroll Behavior
Testing and Tools
Navigate to the Testing and Tools section and enable the “Show Markers” option to display on-screen indicators that help you visualize where the Start and End scroll positions are located for debugging purposes.
Wrapping it Up!
Adding an image comparison effect on scroll is an excellent way to make your website more interactive while clearly highlighting visual changes and transformations. Whether you are presenting before-and-after results, creative design revisions, or step-by-step progress, this effect enhances storytelling and improves user engagement without requiring any custom code. With Elementor’s flexible visual workflow, you can easily customize the experience to match your website design and create a smooth, professional section that leaves a strong impression on your visitors, making it ideal for portfolios, case studies, product showcases, and service pages that rely on visual storytelling and transformation highlights.