How it works
The component pins itself to the screen while you scroll. Each image you add sits stacked on top of the previous one, hidden behind a mask. As you scroll down, that mask peels away — from bottom to top, top to bottom, or side to side — revealing the next image underneath. Once all images have been revealed, the section releases and the page scrolls normally again.
Setting it up
Start by uploading your Main Image — this is what visitors see first. Then upload Mask 1 Image, which is the first image to be revealed on scroll. If you need more transitions, hit Add Mask Image as many times as you like (up to 10). Each added image can be removed individually if you change your mind.
Properties
Main Image — the default starting image
Mask 1 Image — the first image revealed on scroll
Add Mask Image — adds more images to the sequence, each with a remove option
Reveal Direction — choose Bottom→Up, Top→Down, Left→Right, or Right→Left
Scroll Speed — controls how much scrolling it takes to complete each transition
Smoothing — lower values feel silky and slow, higher values feel snappy and immediate
Corner Radius — rounds the corners of the image frame
Good to know
All images are centered and fully visible at all times; nothing gets cropped. The component works best when placed inside a full-width section on your page.
Fahad Shahid
