# Before After (Paid)

{% hint style="success" %}
The Before After component is only available as a **paid product via the Element Store.**
{% endhint %}

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.

{% embed url="<https://youtu.be/J0eU66LRuro>" %}

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

{% columns %}
{% column width="50%" %}

#### 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.
  {% endcolumn %}

{% column width="50%" %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2Fend8OyrXyR0RIwiE5VdY%2FCleanShot%202025-11-20%20at%203%E2%80%AF.13.53%402x.png?alt=media&#x26;token=fc6a6024-8157-4e14-a265-3cfe63533247" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}