Image reveal slider
An image reveal slider that uses Motion's drag functionality to create a before/after image comparison with a sliding reveal effect. It includes keyboard accessibility and smooth animations.
Introduction
The Image reveal slider example shows how to build an interactive before/after image comparison slider. By dragging a handle left and right, users can reveal or hide a black-and-white overlay to compare two versions of the same image.
This example uses several powerful APIs from Motion: motionValue to track the slider's position, styleEffect to efficiently update styles based on Motion values, mapValue to transform the slider position into CSS properties, and animate to create smooth spring animations when snapping to boundaries or responding to keyboard input. We'll also use clamp to constrain values within boundaries.
The example includes elastic resistance at the edges, keyboard navigation with arrow keys, and smooth spring animations that give the slider a physical, responsive feel.