Build animated mobile navbars with framer-motion and TailwindCSS

Let's build a fully animated mobile navbar with framer-motion and TailwindCSS. This is a great way to add more creative flair to your projects.
I did a talk on this exact topic at React Chicago's March meetup, the source code (and a demo website) are available here:
Source code: github.com/sha...
Demo site: building-anima...
---
👋 my name is Shaun, I'm a former premed major turned software engineer and I'm making videos on creative web development.
🐦 Twitter: / shaunchander
🌐 Website: shaunchander.me
#react #framermotion #tailwindcss

[@mrjosh65]

love this. your teaching is so easy to understand. just smooth!

[@ilmanmanarulqori5632]

keep going!!!! 🎉 Another framer motion tutorial

[@yuricodesbot]

love this !! looking forward to more of your content

[@lucasfidalgo04]

Thank you!

[@victordavilaamelinckx2904]

Great stuff!

[@MorpheusMusics]

Love it!

[@satindersingh9671]

You are awesome 😎

[@zombinebrain]

Thanks! Spent so much time searching why it triggers animation on open, but not on close.

[@JudahSullivan]

I know when using next/router for page animations I had to provide a key to children for it to work. But haven’t seen much issue without keys when using it and some examples on the website didn’t require it 🤷🏾‍♂️ not too sure there better safe than sorry lol loved the tutorial ! Truly helped me understand the useCycle

[@namev0id]

Great tutorial ! Thanks a lot man

[@josh4play.youtube]

thank you very much for this

[@humphreeyy]

thanks you

[@DanteMishima]

Please Zoom in your editor next time and you're blocking part of the code

[@srshah]

Hey I'm working on NextJS, for some reason my center span is thick, and the animation from X to 3bars doesn't play.
Do you have any insights on this problem?