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

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


♻️ Remix the site on Framer for free: https://mattjumper.lemonsqueezy.com/c...

😍 Get SIMPL, the full Framer template – https://www.framer.com/templates/simp...

🖥️ Live demo – https://simpl-archway.framer.website

⚡️ Sign up for Framer for free – https://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 – https://figma.com

🍸 Checkout the live Simpl Things Website – https://simplthings.ca

🖼️ Check out my studio's site to get more Framer project inspiration or hire us to build your site – https://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.