The Image Compare component allows you to reveal images with an interactive slider, making it easy to showcase before-and-after visuals. This feature is ideal for storytelling, highlighting transformations, or adding a dynamic, engaging element to your page.
When to Use Image Compare
Use Image Compare when you want to:
Display before and after images (e.g., design changes, renovations, edits).
Highlight comparisons between two visuals (e.g., old vs. new product designs).
Add an interactive storytelling element to make content more engaging
Configuration options
Double-clicking on the image compare element on your canvas opens the configuration options. From here, you can hide the handles and animate the split line.
Parameter | Options |
Hide handles | Remove the icon/shapes indicating handles. |
Left handle and Right handle | Change the icon/shape |
Animate split line | Automatically move the slider back and forth |
Animation duration | Control how long a full animation loop takes (in seconds) |
Best Practices
Use images with identical dimensions for a smooth comparison.
Upload high-quality visuals to ensure clarity and detail.
Consider adding labels or captions like “Before” and “After” to avoid confusion.