An interactive widget that allows users to visually compare two assets using a slider mechanism.
Tutorial Video:
Assets Required: (same dimension required)
Before Image(JPG/PNG/WebP)
After Image(JPG/PNG/WebP)
Steps
Add Compare widget
Upload Before Image and After Image
Properties
Live Preview: Enable to instantly view changes directly on the canvas.
Select Before Image: Upload the “before” image from the assets panel.
Select After Image: Upload the “after” image from the assets panel.
Auto Animate: Automatically transitions between before and after states.
Select Knob Image: Upload a custom toggle knob for interaction.
Background: Configure background styling properties.
Inspirations
Points to Note
Maintain identical image dimensions
FAQs
What image formats are supported in the Compare feature?
JPG, PNG, WebP and GIF formats are supported.
Does the Compare feature support video files?
No, video files are not supported in the Compare feature.
Can we use a custom knob image or hand icon?
Yes, you can upload a custom knob image or hand icon, which will replace the default control.
How many images are required for the Before & After sections?
The Compare feature supports one image for the Before state and one image for the After state.