Before / After Compare

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

BeforeAfter

Playground

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.