Skip to main content

Compare

Written by Bonzai

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

  1. Add Compare widget

  2. Upload Before Image and After Image

Properties

  1. Live Preview: Enable to instantly view changes directly on the canvas.

  2. Select Before Image: Upload the “before” image from the assets panel.

  3. Select After Image: Upload the “after” image from the assets panel.

  4. Auto Animate: Automatically transitions between before and after states.

  5. Select Knob Image: Upload a custom toggle knob for interaction.

  6. Background: Configure background styling properties.


​Inspirations

  1. Maybelline

  2. Jims Cleaning


​Points to Note

  • Maintain identical image dimensions
    ​

FAQs

  1. What image formats are supported in the Compare feature?

    JPG, PNG, WebP and GIF formats are supported.
    ​

  2. Does the Compare feature support video files?
    No, video files are not supported in the Compare feature.
    ​

  3. 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.
    ​

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

Did this answer your question?