The before/after image element lets you create compelling visual comparisons that viewers can interact with by dragging a slider to reveal differences between two images. This is perfect for showcasing transformations, product improvements, or any side-by-side comparison.

To add a before/after image element to your story, hover over the right side of the editor screen and click Add an animated element.

From the available options, click on Before/After to add the interactive image comparison element to your slide.

Once you've added the element, you'll see it appear on your slide with placeholder content. The element displays both images side-by-side with a draggable separator in the middle.

To customize your images, you have two edit buttons available:

Click on Edit image 1 to configure your first image. This will open the image editing panel where you can customize various aspects of your before image.

In the image editing panel, you can:

When you click Change image, you'll see the image selection dialog with multiple options for adding your content.

You can choose from:

After selecting an image, you can crop and adjust it using the built-in editing tools.

The process for editing your second image is identical to the first. Click Edit image 2 to configure your "after" image.

You can use the same image with different filters applied, or choose a completely different image to show the transformation or comparison you want to highlight.

When viewers see your story, they can interact with the before/after element by dragging the central slider left and right to reveal more of either image.

The element displays clear labels for each side (customizable in the editing panel) and provides an intuitive way for viewers to explore the comparison at their own pace.

The before/after element works well for various scenarios:

While black and white comparisons are popular, you can use this element for any type of image comparison that helps tell your story more effectively.