Before / After Compare — React Component

Drag a vertical handle to compare two images side-by-side. Supports mouse and touch, optional labels, custom start position, and any aspect ratio.

Motion Effectshovercomparesliderbefore-afterimageinteractivedragcursor

Before / After Compare

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

beforeImage

src URL for the before (left) image.

afterImage

src URL for the after (right) image.

beforeLabel

Optional text label on the left side.

afterLabel

Optional text label on the right side.

initialPosition

Starting slider position as 0–100%.

Generated JSX

Copy this into your page.

<Compare
  beforeImage=""
  afterImage=""
  beforeLabel=""
  afterLabel=""
  initialPosition={50}
/>

Animation effects

hover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Before / After Compare

The Before/After Compare component renders two images with a draggable divider the user controls to reveal either side. Mouse drag, touch, and keyboard input are all supported via Framer Motion gesture recognition. The divider handle has a spring-snapping interaction that stays under the cursor precisely. Use it to demonstrate product transformations — design tool output, image processing, code generation before/after — or any visual comparison.

Common use cases

Design tool output demonstrations
Image processing and AI generation showcases
Before/after product feature displays
Visual comparison and A/B test illustrations

Installation