Using Figma + Framer to build a smooth mask scroll animation with no code (plus free Remix link)
Вставка
- Опубліковано 26 лип 2024
- 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
--------------------------------------------------------------------------------------------------------------
♻️ Remix the site on Framer for free: mattjumper.lemonsqueezy.com/c...
😍 Get SIMPL, the full Framer template - www.framer.com/templates/simp...
🖥️ Live demo - simpl-archway.framer.website
⚡️ Sign up for Framer for free - www.framer.com/?via=mattjumper
💪 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.
🎨 Sign up for Figma for free - figma.com
🍸 Checkout the live Simpl Things Website - simplthings.ca
🖼️ Check out my studio's site to get more Framer project inspiration or hire us to build your site - madebymod.co
🐤 Follow me on Twitter - / mattjumper
📸 Follow me on Instagram - / jumper
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.
Criminally underappreciated channel. First time in my life I have ever smashed the Like button
I literally gasped watching the first demonstration. This is a great tutorial, thank you so much!
Hah thank you!
Love it! Can't wait for more design- and dev-related content from you
Thanks PJ! It's coming, I promise 😅
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 💪
Matt is a good guy with skills. Subscribed. Framer is the future of Web Development.
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!
Thanks Ben!
you did great with your video , this is the exact animation i was thinking to get for a website im designing !! lots of love
THANK YOU for making the CURSOR SO BIG!!! 😃
Was recommended this, glad I was! 👏
this is amazing looking forward for more amazing stuff🤩🤩
cool Matt, learned a couple important details!
Thank you so much for sharing this! It's awesome!
thank you!
Thank you for sharing your knowledge, looking from now for next videos❤❤
Thank you!
Beautiful!
Looks great!
Super work Matt!
Thanks Prateek!
Thanks for the tutorial! Very cool work! 🙌
thanks for watching + the kind words! 🙏
That was great, really useful to know some more stuff on framer. Thanks!
Thanks Stewart!
When the algorithm randomly surprise you.. Dood this is spectacular.. Waiting your Playlist on coaching us more trikes .. Got Subscriber.. Keep it 100
Thanks Ahmed!
This is incredible! The gradient border hack is so creative
Thanks Danny!
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.
Awesome video! I'm pretty new to Framer and learning web design along the way, so more tutorials would be great 😁
Thanks Kyle!
Great content 😊
Great tutorial! Hope you post more videos that are a bit more beginner friendly
Awesome 👍 Cheers for the tutorial!
Thanks Alex!
super helpful man,
Isso sim é um conteúdo que vale inscrição! Parabéns pelo trabalho👏🏻👏🏻
great content, keep posting.. thanks
Thanks a lot for sharing such a cool tutorial. 😊😊
Thank you!
Super helpful video. Please keep making Framer Tuts.
Thank you, will do! 🙏
Awesome!!!
Thanks Andres:)
Very gooood
thanx Matt This is what i needed
Would love to see what you made!
crushing it, thank you! stay warm in Toronto!
thank you!! and for sure, it was -20 C last week lol
this design is cool
SO HELPFUL !!!! 😍
♥
amazing!!!!! thank you man
Thank you!!
thanks for the vid - keep posting pls!
Will do. Thank you!
Hey Matt, this is awesome, thank you! I just dropped a follow on Twitter
someone who knows wtf they are doing, nice
Super good!
thank you! 🙏
greaaaaat bro
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 ❤❤
❤ let’s goo fam
thats so sick man. Would love a collab with you one day !
love this!! please do a tutorial for making a nice portfolio landing page on framer next!! would be so helpful
thank you! ok I'll see what I can do. is there any specific section or type of component you'd want to see?
@@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?
Love the mouse motion blur
Thanks - got ScreenStudio to thank for that:)
Love it 🎉🎉🎉
I love the video. Keep making Framer Videos please
thanks Dennis!
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?
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.
Thanks!!!!
🙏
Awesome! THank you very much for your explanation, can you do a tutorial about your MOD website? it's great!
I find these very helpful. If you made more framer tutorials... u got a follow.
On it. Thanks Chaya!
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
Thanks Shivam! It's screen.studio
TOP!!!!
thank you for sharing, greetings from indonesia
Greetings + thx for the comment!
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 😂
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) ?
Thank you! Nothing like that exists inside Framer, but in CSS you can use the transform scale property.
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
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?
Love it ❤Can I use this idea for my next website project?
Yes go ahead!
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
Did u ever figure it out?
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?
Is there a way to do this but maybe with a window instead of the arch?
Great video! Is there a reason you'd export the arch as a PNG instead of an SVG?
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.
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?
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
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
keep going i give u a subscribe bro
thank you! you got it
Please make full tutorial ❤❤❤
what would you like to see?
@@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
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...
Oh and btw, love the content. Super smooth and very clear instructions!
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.
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
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.
@@mattjumper creating websites for clients without having to face webflow's learning curve. I do most of my brand design work with illustrator
@@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)
Alright. I will look into it. Appreciate you
#goARC
❤Arc
🦾🦾 thanks for sharing!!
thanks for watching! 🙏
Awesome!
Ty!