How to Make a Unique NextJS Navigation Bar with Framer Motion
HTML-код
- Опубликовано: 7 июн 2024
- 🚀 Elevate your navigation designs to new heights with the dynamic combination of NextJS and Framer Motion in this tutorial! Join me on a comprehensive journey where we'll craft a distinctive navigation menu from the ground up.
🔗 Access the tutorial files here: tutorials.emersonvisuals.com/...
📚 NextJS Installation Guide for Beginners: nextjs.org/docs/getting-start...
🔧 Node and NPM Installation Guide: docs.npmjs.com/downloading-an...
🚀 Discover More Tutorials: tutorials.emersonvisuals.com
Video Timeline:
- 00:00 - Introduction
- 00:27 - Important files
- 00:52 - Installing Next, SASS and Framer Motion
- 03:28 - building and designing basic landing page
- 05:52 - Navbar.tsx structure
- 09:53 - Navbar SCSS styling
- 09:53 - Navbar SCSS styling
- 20:18 - Navbar active state SCSS styling
- 25:07 - Navbar Usestate Functions
- 28:46 - Framer Motion to Navbar
- 34:05 - Conclusion
Unlock the potential of unique navigations with the dynamic duo of NextJS and Framer Motion! 💻✨
The music used in this video is "Chill Day" by LAKEY INSPIRED. You can find more of his music on his official RUclips channel: ruclips.net/channel/UCOmy...
This track is licensed under the Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License. You can read the full license here: creativecommons.org/licenses/...
The music is promoted by NCM goo.gl/fh3rEJ.
Hey everyone, thanks for watching! If you would like to see more NextJS content feel free to check out my previous tutorial here ruclips.net/video/uYrtKrn3Gy0/видео.html
Thank you for putting this together and offering it up. I am interested in learning Framer Motion, so this was great. It was helpful for me to comment out the 'prefers-color-scheme: dark' media query in the global.css file. That way I could follow along and produce the same result in the browser. Also, the burger menu effect, developed from scratch, is straightforward but very cool. Really enjoyed working through this. Thanks again!
Thanks so much for the amazing feedback! I’m glad you enjoyed the video!
Hey great video! Anyway, I would suggest to have some preview of what you're doing at the start of the video. Thanks a lot.
Hey mate, no worries if you skip the video to the 0:02 second mark you’ll see the preview. 😊
Framer motion is sweet.
100%
That good man
Can you able to do next.js and firebase project if no able to do ok fine 😊
Hey mate! That sounds cool - my channel focus more on design, but i can add it to my list of future videos and see how I go. Thanks heaps for the support 😊