A draggable before/after slider that reveals two images with a clip-path mask.
A before/after image slider that works entirely with CSS clip-path and pointer tracking. No canvas, no WebGL, just clipping.
The "after" image sits on top of the "before" image and is clipped with inset(0 0 0 50%). The four values are top, right, bottom, left. Changing the left value reveals more or less of the top image.
Static split at 50%
Loading...
Track the cursor's X position relative to the container and map it to a percentage. The clip-path updates on every mouse move, creating the drag-to-reveal effect.
Click and drag to compare
Loading...
Add a vertical line and grabber at the split point so users know where to grab. The hit area is 40px wide, with the visible line centered inside. Moving onMouseMove to the window prevents losing the drag when the cursor leaves the container.
Vertical handle with cursor hint
Loading...
Add onTouchMove alongside onMouseMove using useRef for the dragging state. This avoids an unnecessary re-render on every pointerdown, and handles both mouse and touch input.
Works on touch and mouse
Loading...
Adjust the starting position to control which image is revealed by default. The CSS custom property --position drives both the clip-path and the handle position.
Adjust the slider to set starting position
Loading...
Tweak the starting position and handle style. The code updates in real-time.
Loading...