Scroll Image Comparison
Widget for Elementor
The Scroll Image Comparison Widget reveals differences between images as users scroll, creating a smooth and interactive before and after experience. Easily showcase transformations, design changes, or progress with customizable reveal direction, timing, and multi-image support.
Scroll Image Comparison
Visualize Stunning Transformations
With this widget, you can compare images using an engaging scroll-driven reveal effect. As visitors scroll the page, images progressively transition over a base image, allowing you to showcase transformations, edits, and visual progress in a smooth and immersive way. It’s perfect for presenting design improvements, photo edits, product transformations, architectural progress, UI redesigns, and other visual changes in a modern, interactive way.
Direction
Versatile Layouts for Every Use Case
Transition Type
Stunning Transitions
Labels
Labels for Enhanced User Experience
Labels in the Scroll Image Comparison widget add meaningful context to your visuals by helping users quickly identify each stage of the comparison. They make it easier to understand the changes as images reveal during scrolling. Labels are especially useful for highlighting before and after states, editing stages, design improvements, or transformation steps, ensuring viewers immediately understand what each image represents.
Flexibility
Extensive Design Widget Settings
Control how the comparison transitions with flexible scroll-based settings. Choose the reveal direction and adjust animation timing, overlap between images, and transition behavior. You can also fine-tune how each image appears and sequence timing, allowing the next image to begin revealing before the previous one finishes. These controls give you the freedom to create anything from a clean linear comparison to a dynamic layered storytelling effect, ensuring a smooth, engaging, and highly customizable experience for your audience.
Why Should You Use the Video Comparison Widget?
Popular Use Cases for the Before & After Widget
Scroll Image Comparison Widget Frequently Asked Questions
A Scroll Image Comparison widget allows you to compare images through a scroll-driven reveal effect instead of a traditional slider. As visitors scroll the page, overlay images gradually appear over a base image, making it easy to highlight visual differences, transformations, or step-by-step progress smoothly and interactively.
The Scroll Image Comparison widget is available in the Unlimited Elements Pro version.
- Go to the Unlimited Elements Widget Library.
- Use the search bar and search for “Scroll Image Comparison.”
- Hover over the widget in the search results and click Install.
- Open any page with Elementor and drag the Scroll Image Comparison widget into your layout.
You’re now ready to start creating interactive scroll comparisons on your Elementor website.
The Scroll Image Comparison widget supports multiple transition styles to reveal images smoothly as users scroll. Available transitions include Slide, Fade, Circle Mask Reveal, Blur Crossfade, and Morph, allowing you to choose the visual effect that best matches your design and storytelling needs.
Yes, the Scroll Image Comparison widget allows you to control the reveal direction. You can choose horizontal or vertical reveal, and also enable reverse direction for both, giving you full flexibility over how images appear during scrolling.
The Scroll Image Comparison widget offers flexible styling options to match your website’s design. You can customize reveal direction, transition styles, animation timing, and image overlap behavior. Labels can also be styled to clearly describe each stage of the comparison, and spacing or visual emphasis can be adjusted to create a clean, polished, and engaging visual experience.
Yes, the Scroll Image Comparison widget allows you to customize the slide divider. You can choose between solid and feather divider styles, and adjust feather smoothness to control how softly the images blend during the reveal, helping you achieve the exact visual effect you want.
Yes, the Scroll Image Comparison widget is fully responsive and works smoothly across desktop, tablet, and mobile devices. It automatically adapts to different screen sizes, ensuring a seamless scroll experience and clear image comparisons on any device.
Yes, you can use multiple Scroll Image Comparison widgets on the same page. Each widget works independently, allowing you to create multiple comparison sections with different images, transitions, and settings without affecting one another.
Yes, the widget supports multiple overlay images, allowing you to create step-by-step comparisons instead of limiting you to just a simple before and after view.
The widget is optimized for smooth scrolling and efficient rendering, ensuring good performance.
