motion-image-compare
Before/after slider with a draggable, spring-damped handle. Drop two images into the before and after slots
— drag, click, or use the arrow keys to reveal.
Preview — Horizontal
Before
After
Preview — Vertical
Top
Bottom
Usage
Sizing
The host fills its container's width and clips overflow. Give it an explicit height (or use an aspect-ratio container) — slotted images stretch to 100% × 100% with object-fit: cover.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 50 | Initial split position as a percentage (0–100) |
| | | "horizontal" | "vertical" | "horizontal" | Drag axis |
| | | number | 0.25 | Spring bounciness of the snap-to-cursor animation |
| | | number | 0.45 | Spring duration of the snap-to-cursor animation, in seconds |
Slots
| Slot | Type | Default | Description |
|---|---|---|---|
| | element | — | The left/top image (visible behind the clip) |
| | element | — | The right/bottom image (revealed by dragging) |
Accessibility
The handle is a focusable role="slider" with aria-valuemin/max/now.
Use ← / → (or ↑ / ↓ in vertical mode) to nudge the split by 2%, hold Shift for 10% jumps.
Slotted images are kept as the source of truth; remember to write meaningful alt text.