close
Motion+

Scroll Image Reveal

Images reveal with a clip-path curtain effect as you scroll. Uses useScroll with element targeting and useTransform for clipPath and scale.

Time
5 min
Difficulty
Intermediate
Access
Motion+
>Live exampleOpen in new tab

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.