5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Ta5b,

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.

How to use the component?

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

[X profile]

[okupnik.com]

5a:[["$","$L5d",null,{"post":{"id":"019d903c-ede9-7e58-b52b-981ab63afc27","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","slug":"jakub-okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aoWk5dJwaWhC4VfZOy5J","resolved":true,"title":"Mask Scroll Reveal","body":"$5e","bodyJson":null,"introduction":"Customizable Vector Mask Scroll Reveal","slug":"mask-scroll-reveal","author":{"framerUserId":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","slug":"jakub-okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/aoWk5dJwaWhC4VfZOy5J/mask-scroll-reveal-hbh0rZDOPcRNMBtuYxQy34vpF1bg1b","metadata":{"tint":{"h":204,"s":42,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-08T19:35:11.347Z","updatedAt":"2026-04-14T21:51:31.875Z","publishedAt":"2026-04-15T08:23:25.417Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ScrollMaskReveal-kxiuIp.js@cOfcvhoAnA4UCakEbTqF","previewUrl":"https://incredible-employees-638816.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"cOfcvhoAnA4UCakEbTqF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":25,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T08:23:25.417Z","updatedAt":"2026-04-15T08:23:25.417Z","reported":false}}],"$L5f"]

Suggested for you