Before After (Paid)

Image Comparison Component for Elements

The Before After component is only available as a paid product via the Element Store.

The Before After Component is a premium comparison tool. It gives you a clean, responsive slider that lets visitors drag to compare two images, or any other content. It’s perfect for agencies, photographers, designers, architects, and anyone who needs a clear visual before-and-after effect.

It’s more flexible than a basic image comparison component. You can use any content for the before and after, customise the handle, switch between vertical or horizontal layouts, and it includes full touch support.

Before After Component Settings

Before After

The Before After component gives you a responsive, draggable comparison slider for images or other content. The following options let you control sizing, orientation, behaviour, and the content itself.

Sizing These settings define the source and play details for your video.

Height Mode Controls how the component determines its height.

• Aspect Ratio Enter a ratio such as 16/9 or 7/5. The component will always maintain this proportion regardless of screen size.

• Fixed Height

  Set the slider to be a fixed height.

• Dynamic (Content) Hide or show the video player controls. This setting only works with .mp4 files.

Orientation Sets the direction of the comparison:

• Horizontal The slider moves left and right.

• Vertical The slider moves up and down.

Animation Automatically moves the handle when the component loads, a speed can be set in seconds.

Handle

• Show Toggle the visibility of the draggable handle.

• Start Position Defines where the handle (and therefore the reveal point) begins.

Mode Choose what type of content you want to compare:

• Images A simple before/after image comparison.

• Content Allows any Components inside each side.