Image reveal slider

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 motion component to create animated elements
• useMotionValue to track the slider position
• useTransform to convert position values into visual properties
• The drag prop for interactive dragging
• animate for triggering the keyboard-driven animations