Image reveal slider
Matt Perry
In this tutorial, we're going to build the Image reveal slider example step-by-step.
This example is rated expert difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Image reveal slider tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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.
