---
title: "ScrollMaskReveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Fahad Shahid · Sections. Scroll to reveal layered mask images"
canonical: "https://framer.elliotli.dev/component/scrollmaskreveal"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ScrollMaskReveal

# ScrollMaskReveal

Scroll to reveal layered mask images

[View on Framer](https://framer.com/marketplace/components/scrollmaskreveal/?via=elliot-li)

![ScrollMaskReveal preview image 1](https://framer.elliotli.dev/og/component/scrollmaskreveal/fdb3cbb6d1a11287/1600x1200.jpg)

## Summary

Scroll to reveal layered mask images

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6722

## Details

- **Author**: Fahad Shahid
- **Price**: $10.00
- **Published**: 2026-04-15
- **Updated**: 2026-04-15
- **Added**: 2026-04-14
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes