Image reveal slider: Step-by-step tutorial
Matt Perry
In this tutorial, we're going to build the Image reveal slider example step-by-step.
This example is rated 3/5 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+
290+ examples & 35+ tutorials
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Image reveal slider example shows how to create an interactive slider that reveals a color image from its grayscale version. The same basic pattern can be used for comparisons between any two images.
We'll learn how to make this UI both with pointer and keyboard operation.
To do so, we'll use several key Motion APIs:
The
motioncomponent to create animated elementsuseMotionValueto track the slider positionuseTransformto convert position values into visual propertiesThe
dragprop for interactive dragginganimatefor triggering the keyboard-driven animations
