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

[@UrBrethren]

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

[@mattjumper]

Hah thank you!

[@sameerhussain2579]

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

[@jaywalker.]

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

[@animagix]

Love the mouse motion blur

[@mattjumper]

Thanks - got ScreenStudio to thank for that:)

[@brto]

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

[@mattjumper]

Thanks Ahmed!

[@manhaki]

this design is cool

[@dannydiscovers]

This is incredible! The gradient border hack is so creative

[@mattjumper]

Thanks Danny!

[@prateekkeshari]

Super work Matt!

[@mattjumper]

Thanks Prateek!

[@See_thru_it_all]

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

[@holypink4488]

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

[@mattjumper]

Thank you!

[@TimOlukayodeAjayi]

Super helpful video. Please keep making Framer Tuts.

[@mattjumper]

Thank you, will do! 🙏

[@forgris-lx5rf]

thanks for the vid - keep posting pls!

[@mattjumper]

Will do. Thank you!

[@sultanchaa]

This is hella cool!

[@shineydas129]

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

[@pjborowiecki2577]

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

[@mattjumper]

Thanks PJ! It's coming, I promise 😅

[@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!

[@mattjumper]

Thanks Ben!

[@고담이-w4p]

thanx Matt This is what i needed

[@mattjumper]

Would love to see what you made!

[@lfgraf]

crushing it, thank you! stay warm in Toronto!

[@mattjumper]

thank you!! and for sure, it was -20 C last week lol

[@GrowWithDennis]

I love the video. Keep making Framer Videos please

[@mattjumper]

thanks Dennis!

[@isurus0]

someone who knows wtf they are doing, nice

[@Samibravo832]

Was recommended this, glad I was! 👏

[@olalekanisaac4342]

Super good!

[@mattjumper]

thank you! 🙏

[@asitupadhyay5647]

this is amazing looking forward for more amazing stuff🤩🤩

[@vision3690]

cool Matt, learned a couple important details!

[@md.jahidhossainmridha6453]

Great content 😊

[@xMUSiCLiF3x]

love this!! please do a tutorial for making a nice portfolio landing page on framer next!! would be so helpful

[@mattjumper]

thank you! ok I'll see what I can do. is there any specific section or type of component you'd want to see?

[@jasonkwilliamson]

@@mattjumper I'm super brand new to framer and even struggling for basics like a infinite scrolling logo bar, can you teach us some basics?

[@yamix.brands]

i loved that video exactly the technicals & the way frames works as needed i would love if you share the text to logo like in your website i tried to do it today for 3 hours thinking about it & i couldn't reach it haha ❤❤

[@telobeli]

insane bro

[@AndresGutierrez-sz2oc]

Awesome!!!

[@mattjumper]

Thanks Andres:)

[@fbvitorino]

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

[@alexjthurman]

Awesome 👍 Cheers for the tutorial!

[@mattjumper]

Thanks Alex!

[@stewber]

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

[@mattjumper]

Thanks Stewart!

[@ronitrajput3934]

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

[@mattjumper]

Thank you!

[@alsjourney]

thats so sick man. Would love a collab with you one day !

[@chaya973]

I find these very helpful. If you made more framer tutorials... u got a follow.

[@mattjumper]

On it. Thanks Chaya!

[@iklxsss]

I just need to recreate the same effect of the body scrolling overtop the hero page. for the life of me, I cannot figure this out

[@DVikingMan]

Did u ever figure it out?

[@thewebstylist]

Beautiful!

[@onigosh6015]

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 💪

[@clovermk1635]

amazing!!!!! thank you man

[@mattjumper]

Thank you!!

[@GordanaMinovska]

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

[@mattjumper]

thank you!

[@faisalamru9067]

Hello Matt, I would like to inform you that I am using your web design template for my College project, and I sincerely thank you for the tutorial.

[@renzoabianchi]

Thanks for the tutorial! Very cool work! 🙌

[@mattjumper]

thanks for watching + the kind words! 🙏

[@WyseOwls]

Hey Matt, this is awesome, thank you! I just dropped a follow on Twitter

[@ernestoaragon6765]

Awesome! THank you very much for your explanation, can you do a tutorial about your MOD website? it's great!

[@양지선-l1d]

Nice work! I love it. I want to interact by clicking on the asset in content layer, but the wall layer blocks it. Do you know the way how to click on the asset in content layer?

[@NikhilKumar-f2b7h]

super helpful man,

[@yoka_bit]

Love it ❤Can I use this idea for my next website project?

[@mattjumper]

Yes go ahead!

[@kylehumber]

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

[@mattjumper]

Thanks Kyle!

[@Bananshak]

great content, keep posting.. thanks

[@davidcapuzzo]

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

[@erimoitinho]

Hey @mattjumper, thanks for the tutorial. I am trying to replicate it but with the hero section being in the middle of a long page. I couldn't find a way to make it work due the fixed positioning. Ay tips would be appreciated 😂

[@oussamajaafar5287]

greaaaaat bro

[@ariakepo]

thank you for sharing, greetings from indonesia

[@mattjumper]

Greetings + thx for the comment!

[@guidoparacolli4112]

hi, thanks for sharing the work, I would like to know how to insert a collection of works or a grid of images after the animation of the arc. you are so helpfull

[@dimitrygalamiyev1133]

SO HELPFUL !!!! 😍

[@mattjumper]

♥

[@lodeluyckx]

Looks great!

[@rajuprithvi]

Awesome!

[@mattjumper]

Ty!

[@AmjadKhan-rz6nu]

Love it 🎉🎉🎉

[@mattjumper]

[@donaquin]

Thanks!!!!

[@mattjumper]

🙏

[@malock11]

Awesome work Matt, this was really good for your first video! Keep up the good work and looking forward to more Framer videos. Quick question, what browser are you using?

[@mattjumper]

Thank you! I'm using Arc by The Browser Company (arc.net). Currently it's invite-only but if you DM me on Twitter (@mattjumper) I can send you one.

[@shivamrai979]

Love the interaction Matt and the tutorial was also super useful. Looking forward to more framer tutorials. Could you tell me which tool did you use to record your screen in 4k? Coz mine always gets compressed & quality drops when I post it on Insta or twitter

[@mattjumper]

Thanks Shivam! It's screen.studio

[@MACH_SDQ]

Very gooood

[@marianlucas6212]

Maybe the best tutorial I have seen in a while 🙌 DO you know of any good way to scale buttons, or other elements like I can do in Figma with (CMD+K) ?

[@mattjumper]

Thank you! Nothing like that exists inside Framer, but in CSS you can use the transform scale property.

[@spetauskas]

if you made photo zoom in just a little bit, when scrolling out of frame, it would be 100 times better effect :)

[@Yoyobeats.98]

Can I ask something? from where did you learn all this? how do you know when all these layers need to get positioned and all? how do you even remember that?

[@avelinileva]

TOP!!!!

[@apoorvaagarwal6051]

Matt could you please help in understanding why did we create separate stacks for hero-scroll-1 and hero-scroll-2 when we placed all the content inside hero stack

[@mattjumper]

the hero content is set to fixed, so we are using the hero-scroll-1 and -2 that are set to relative to basically take up the same amount of space for the scroll and control scroll triggers

[@DVikingMan]

Is there a way to do this but maybe with a window instead of the arch?

[@gtsb]

Great video! Is there a reason you'd export the arch as a PNG instead of an SVG?

[@mattjumper]

Thanks! I agree an SVG would be better (both quality and file size) but I found vectors in Framer are a bit finicky especially when scaling. If you can get an SVG to scale properly in there I'd definitely do that.. just didn't want to make the tutorial any more complex.

[@NehalGadkar-v4j]

Can't we do the same thing in figma?

[@AmjadKhan-rz6nu]

Please make full tutorial ❤❤❤

[@mattjumper]

what would you like to see?

[@AmjadKhan-rz6nu]

@@mattjumper please make more videos like this on all sections and let me remind you, most people including me are searching for web animations from figma to real so your channel will grow and people will love it I m sure

[@guapshonen]

Hi, quick question. As a brand designer i just started learning framer, do you think learning figma is necessary first? As framer started as a prototyping tool

[@mattjumper]

If you’re a brand designer what are you trying to achieve in Framer? I’d imagine all your work would be done in Figma.

[@guapshonen]

@@mattjumper creating websites for clients without having to face webflow's learning curve. I do most of my brand design work with illustrator

[@mattjumper]

@@guapshonen Oh gotcha - I'd still recommend learning Figma tbh as it brings a lot of value beyond just designing a website (90% of my brand work is done in Figma now)

[@guapshonen]

Alright. I will look into it. Appreciate you

[@NidaKazi-e6b]

When i try the subtract on mask and bg it dosen't give me the same result as you, it instead cuts of both the parts and i'm only left with the arc. what am i doing wrong?

[@tahafurkanguler4823]

After doing the subtract operation, make the border radius of the mask 800px again and it will be fixed.

[@oussamajaafar5287]

keep going i give u a subscribe bro

[@mattjumper]

thank you! you got it

[@timdekker1770]

I'm busting my headaround this. Not sure how to do this in Figma, but is there a way i can create a different shape instead of a Arch? I'd love to get this to work with let's say a Lightbulb i created instead...

[@timdekker1770]

Oh and btw, love the content. Super smooth and very clear instructions!

[@mattjumper]

Yep, pretty much would go about it the same way as in the video. Make a frame, drop in your graphic and fill in all the space outside the negative space. Will likely need to use the exclude option.

[@jaishobhit162]

Do anyone have Code for this ?

[@akivamajowka5742]

#goARC

[@mattjumper]

❤Arc

[@eugenc6048]

🦾🦾 thanks for sharing!!

[@mattjumper]

thanks for watching! 🙏