Gomobil

Instructions

Close-up of a car covered in soap suds during a wash, showing the front wheel and headlight.

Introduction

This template includes a custom Before / After Comparison Slider component that allows users to interactively compare two images using a draggable divider.
Built with GSAP Draggable, the slider provides a smooth and responsive way to showcase transformations, improvements, or visual differences between two states. Users can drag the divider manually to reveal the before image area or use the navigation arrows to reset the comparison position.

How it works (high level)

The script targets every element with the class:

comparison_component

Inside each comparison component, it finds two main elements:

  • comparison_before-image-wrapper
    The before image container. Its width dynamically changes based on the divider position.
  • comparison_divider
    The draggable handle that controls the image reveal.

GSAP Draggable tracks the horizontal movement of the divider. While dragging, the script calculates the divider position as a percentage of the slider width and updates the before image width accordingly.

The reset functionality listens for clicks on:

  • comparison_left-arrow
  • comparison_right-arrow

After clicking either arrow, the script waits 500ms before smoothly moving the divider back to the center position and resetting the before image width back to 50%.

How to use it

  1. Create a wrapper element for your comparison slider.
  2. Add the class:
comparison_component
  1. Add the before image wrapper element:
comparison_before-image-wrapper

This element contains the before image and will resize based on the divider position.

  1. Add the draggable divider element:
comparison_divider

This element acts as the interactive handle between the before and after images.

  1. Add navigation arrows if needed.

Left arrow:

comparison_left-arrow

Right arrow:

comparison_right-arrow

The script automatically detects all comparison components on the Home page.

Where the code lives

The script is added on the Home page only:

Home Page → Page Settings → Custom Code‍

Place it in:

Before </body> tag‍

The script requires GSAP + Draggable plugin to already be loaded in the project.

The code

Code snippet for a before/after image comparison slider with draggable divider using JavaScript.

Want to tweak it (optional)

Reset delay

Change:

}, 500);

Higher values create a longer delay before the slider resets.

Reset animation speed

Change:

duration: 0.4

Higher values make the reset movement slower.

Default comparison position

Change:

width: "50%"

For example:

width: "70%"

will make the before image start with a larger visible area.

Important notes

  1. This requires GSAP + Draggable plugin to be loaded in the project.Keep these class names unchanged:
    • comparison_component
    • comparison_before-image-wrapper
    • comparison_divider
    • comparison_left-arrow
    • comparison_right-arrow
    The script is added on the Home page only. Multiple comparison sliders can be used on the same Home page.The divider must remain inside the comparison component so GSAP can correctly calculate the drag boundaries.Removing GSAP or Draggable will prevent the comparison interaction from working.