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

Get started

Let's start by creating the basic structure of our component:

function ImageRevealSlider({ src = "/images/example-image.jpg", step = 50 }) {
    const containerRef = React.useRef(null)

    return (
        <div ref={containerRef} className="container">
            <div className="image-container">
                <img src={src} alt="Image" className="image" />
                <img
                    src={src}
                    alt="Image in black and white"
                    className="image overlay"
                />
            </div>

            <div className="slider" tabIndex={0}>
                <div className="handle">
                    <LeftRightIcon />
                </div>
            </div>

            <Stylesheet />
        </div>
    )
}

/** Copy icons and styles from example source code */

This creates our basic structure with two images - the original color image and a grayscale overlay - plus a slider with a handle that users will interact with.