Beautiful Animated Nav Bar with React & Framer Motion

Today we'll build animated navigation tabs, inspired by Cal, using React, TailwindCSS and Framer Motion!

📚 Project Links

🔗 My Links

Timeline:
0:00 - Introduction
0:35 - Initial setup & overview
2:11 - How mix blend mode works
3:03 - Creating the background cursor
4:18 - Animating the cursor on hover
10:45 - More ideas and other approaches

[fonshiynwatobi]

I just know if i watch and practice enough of these videos maybe 1 day i'll be good at frontend development

[HKRazieL]

This was a great video explaining in just enough detail to not be boring but informative, great job!

[anuvette]

all of your videos are sooo chef's kiss ahhh ive been learning so much!!

[Gabrielmfd]

Thanks, Tom! I'm learning a lot from your videos!

[balaonavegantes]

Thanks for putting some ideas into code that I would never have had the technical ability to do on my own.

[theintjengineer]

You're good at explaining stuff.
Thanks.

[-not-found-service]

wow, thanks bro <3, I like these animation videos to use with tailwind and react

[mckaymower]

I think this solution is very clean! Sam Slikoff's solution is great, but requires distortion fixes which can make the code a bit more messy imo.

[bcuyc]

hello, i am facing issue when i implement the code i dosnt get the same output earlier i was using bootstrap in that same project i am using this do i need to setup up someting first than tailwind..

[Imjoshnewton]

I’ve done this on a couple of different navigation menus but always for the active state never for a hover. When I do it for active, I always just said “cursor” to top-0 bottom-0 right-0 left-0 and use layout animations. Is there a benefit to animating with directly instead of using a layout animation?

[hazemezz]

My best Framer motion Youtuber ever 🧡 + what is the name of your vs code theme ?

[MarkoKozlica]

Just a suggestion, make this with Vanilla JS and CSS :D :P BTW great video as always...

[Dreamslol]

Sad framer motion dosen't exists for Svelte.
That was very fun too watch, nice video :)

[МихаилАндросюк-шц]

much easier to do it with layoutId feature

Here’s a humble dumb question 🙋🏽‍♂️: this can be recreated within framer in a few seconds. What’s the benefit of coding it?