Scroll Image Reveal
Matt Perry
In this tutorial, we're going to build the Scroll Image Reveal example step-by-step.
This example is rated advanced 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 Scroll Image Reveal 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 Scroll Image Reveal example shows how to create a curtain reveal effect where images dramatically unveil themselves as you scroll. The effect combines a horizontal clip-path reveal that opens from the center with a subtle parallax effect on the images themselves.
This example uses three Motion hooks: useScroll to track each image's position in the viewport, useTransform to map scroll progress to clip-path values and transform properties, and useRef to target individual elements for scroll tracking.
