---
title: "Mask Scroll Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Jakub Okupnik · Backgrounds. Overview This is a customizable Mask Scroll Reveal component for Framer, utilizing vector masks for seamless transitions."
canonical: "https://framer.elliotli.dev/component/mask-scroll-reveal"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Mask Scroll Reveal

# Mask Scroll Reveal

Customizable Vector Mask Scroll Reveal

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

![Mask Scroll Reveal preview image 1](https://framer.elliotli.dev/og/component/mask-scroll-reveal/5e46c61e8f1ebcc8/1600x1200.jpg)

## Summary

Overview This is a customizable Mask Scroll Reveal component for Framer, utilizing vector masks for seamless transitions.

## Description

### Overview

This is a customizable Mask Scroll Reveal component for Framer, utilizing vector masks for seamless transitions. It enables dynamic, scroll-triggered animations with full control over shapes and timing. Copy it to your project and use the property panel to craft unique transitions effortlessly.

![Component control panel](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hwpldlct-JP8FjG1gxe3I2JuulO77QezBh4gFIw)Component control panel

## How to use the component?

1.  Upload your media
    
    -   **Custom vector image** (preferably logo, short slogan or shape). Bold shapes work best.
        
    -   **Background Media** (image or video)
        
    -   **Foreground Media** (image or video)
        
    -   If you don't want to use images or videos for the background or foreground, feel free to leave these sections empty.
        
        If you leave **Background Media** empty, the component automatically uses the **"Fallback Background"** color (which you can customize as you wish).If you leave **Foreground Media** empty, the component automatically applies the **"Vector Overlay Color"** to fill your uploaded vector.
        
2.  Adjust mask properties
    
    -   Set **Starting Mask Size**
        
    -   Set **Ending Mask Size**
        
    -   Set **Scroll Length**
        
        If you want the mask to reach its final size before the user finishes scrolling through the section, adjust it here:
        
        ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hwpldlct-u7Sw6bxkiYs5p2N8a2XAPkdUJ2a8CO)
3.  If you want the mask to be filled with a selected overlay color at the start of the animation, choose a color in the **Vector Overlay Color** property.You can also set the **Start Overlay Opacity** and define the exact moment the overlay will fade out (for example, after 50% of the scroll progress).
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hwpldlct-BONSK5WIIVWsDeSZjvzCJXuCAh6D1Q)

Share it, remix it, have fun!

Jakub Okupnik

Follow for more content

[\[X profile\]](https://x.com/JakubOkupnik)

[\[okupnik.com\]](https://okupnik.com)

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

-   All · #1503

## Details

- **Author**: Jakub Okupnik
- **Published**: 2026-04-15
- **Updated**: 2026-04-14
- **Added**: 2026-04-08
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background