Clip Reveal Image pro

A picture that wipes open from a mask as it scrolls into view while settling from a slight zoom.

Scroll inside the preview to try it.

Customize

Picture address, for example /images/hero.jpg (empty = gradient)

Gradient used when there is no picture

Picture width (px)

Picture height (px)

Reveal duration (ms)

Starting zoom. It settles to 1 as it opens

Corner roundness (px)

Which way the picture opens

Hide and replay every time it scrolls in (off = only once)

import ClipRevealImage from './ClipRevealImage';

<ClipRevealImage />

Checking your access…

Dependencies: none