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.
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.
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:
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).
Share it, remix it, have fun!
Jakub Okupnik
Follow for more content
Jakub Okupnik
