Using Figma + Framer to build a smooth mask scroll animation with no code (plus free Remix link)

*Remix + demo links below!* I'm going to walk you through Framer and how to make a beautiful scrolling archway mask reveal animation – with 0 lines of code! We are also going to use Figma just to create the archway mask image.

Figma and Framer are both:
- Free (!!)
- Require no coding knowledge
- Don't even require an app; all browser based!
- Allow you to collaborate with others in real-time

--------------------------------------------------------------------------------------------------------------

Contents
00:00 - Intro
00:45 - Creating the mask image in Figma
02:54 - Creating the hero wall / mask in Framer
06:10 - Creating the hero image
07:58 - Creating the hero content
09:19 - Creating the scroll triggers
12:20 - Creating the body
13:08 - Quick progress check & fixes
14:02 - Setting up the navigation
16:09 - Setting navigation scroll variants
17:16 - Setting animations for the hero
19:59 - Fixing + optimizing scroll triggers
20:27 - Making it responsive
21:50 - Outro

--------------------------------------------------------------------------------------------------------------

💪 If you decide to upgrade to a Pro version of your site on Framer, you can use the code "partner25proyearly" to get 3 months free.

This is my first video so if you find it helpful please like, comment and subscribe so I have some indicator to keep making these. This video took a long time to build so hopefully it brings some value to you.

If you have any feedback on how to make these videos better, questions about this tutorial, or requests for another video please let me know below.

[jaywalker.]

Criminally underappreciated channel. First time in my life I have ever smashed the Like button

[UrBrethren]

I literally gasped watching the first demonstration. This is a great tutorial, thank you so much!

[sameerhussain]

Matt is a good guy with skills. Subscribed. Framer is the future of Web Development.

[pjborowiecki]

Love it! Can't wait for more design- and dev-related content from you

[onigosh]

Thank you very much for the explanation! It was very easy to understand and the delivery was clear! looking forward for you next tutorial video 💪

[B_Migs]

THANK YOU for making the CURSOR SO BIG!!! 😃

[asitupadhyay]

this is amazing looking forward for more amazing stuff🤩🤩

[Benga-Eno]

That was some Webflow-level stuff bro lol nice! It's always amazing to see that you can do the most amazing stuff once you have the knowledge, even with "simple" tools like Framer. Great video bro!

[shineydas]

you did great with your video, this is the exact animation i was thinking to get for a website im designing !! lots of love

[GordanaMinovska]

Thank you so much for sharing this! It's awesome!

[dannydiscovers]

This is incredible! The gradient border hack is so creative

[holypink]

Thank you for sharing your knowledge, looking from now for next videos❤❤

[renzoabianchi]

Thanks for the tutorial! Very cool work! 🙌

[vision]

cool Matt, learned a couple important details!

[stewber]

That was great, really useful to know some more stuff on framer. Thanks!

[davidcapuzzo]

Great tutorial! Hope you post more videos that are a bit more beginner friendly

[kylehumber]

Awesome video! I'm pretty new to Framer and learning web design along the way, so more tutorials would be great 😁

[brto]

When the algorithm randomly surprise you.. Dood this is spectacular.. Waiting your Playlist on coaching us more trikes .. Got Subscriber.. Keep it 100

[fbvitorino]

Isso sim é um conteúdo que vale inscrição! Parabéns pelo trabalho👏🏻👏🏻

[ronitrajput]

Thanks a lot for sharing such a cool tutorial. 😊😊