Tutorial: Animated Navbar in Framer (New Trend)
✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, I'm going to walk you through my step-by-step process of creating an animated responsive navigation bar without any code. We're going to learn about components, interactions, and scroll variant effects, so make sure to stick around until the end.
→ Remix the tutorial project: https://framer.university/resources/a...
→ Mod site: https://madebymod.co/
0:00 - Introduction
0:45 - The inspiration
1:19 - Remix link
2:03 - Base of the navigation bar
3:28 - Grabbing our logo
4:38 - Inserting our logo
7:43 - Preparing for mobile responsiveness
10:19 - Last tweaks & positioning the navbar
13:55 - Adding links
14:07 - Advantages of components in Framer
15:07 - Creating a component
17:53 - Adding the scroll effect
21:37 - Adjusting the animation
22:25 - Optimizing for mobile breakpoint
31:45 - Final design & additional resources
Follow me on:
X: / learnframer
Instagram: / framer.university
Watch video Tutorial: Animated Navbar in Framer (New Trend) online without registration, duration hours minute second in high quality. This video was added by user Framer University 25 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,519 once and liked it 296 people.