Beautiful Animated Nav Bar with React & Framer Motion

Summary

In this video, the creator explores the interactive and animated elements of cal.com's landing page, focusing on recreating a navigation bar with a dynamic 'pill' that follows the cursor. Using React and Framer Motion, the tutorial guides viewers through building the animated pill effect, utilizing Tailwind CSS for styling. The process involves setting up state for animating width and position, using refs to determine element dimensions and offsets, and handling hover states for a seamless user experience.

Takeaways

• 🔗 The video discusses creating a navigation bar with an animated pill effect using React and Framer Motion.
• 🎨 The pill effect follows the cursor and changes the text color based on its position, using a 'mixed blend mode' of 'difference'.
• 💻 The tutorial starts with a basic layout using Tailwind CSS, emphasizing that other styling methods can be used.
• 📐 The navigation bar is structured with an unordered list, positioned relatively to allow absolute positioning of the pill.
• 🖌 The pill is styled with a 'pointer' cursor, padding, and text transformations to match the design requirements.
• 🌐 The use of 'z-index' ensures the pill sits behind the text for the desired visual effect.
• 📊 The 'getBoundingClientRect' method is used to dynamically set the width of the pill based on the hovered element.
• 🔄 Framer Motion's 'motion' component is utilized to animate the pill's width, opacity, and position.
• 🔄 The 'useState' hook is employed to manage the pill's animation states, such as width, opacity, and left offset.
• 🔍 The tutorial suggests using 'useRef' to get the dimensions and position of the hovered tab for accurate animation.
• 🔙 An 'onMouseLeave' event is implemented to reset the pill's opacity, ensuring it disappears when the cursor leaves the navigation bar.

Q & A

What is the main focus of the video?

The main focus of the video is to demonstrate how to recreate a cool animated navigation bar with a following cursor effect using React and Framer Motion.

What is the 'animated pill' mentioned in the video?

The 'animated pill' refers to a small, pill-shaped element that follows the cursor around when hovering over different sections of the navigation bar.

Why is the 'tactile almost paper-like feel' of Cal.com highlighted in the video?

The 'tactile almost paper-like feel' is highlighted because the video creator appreciates the unique and engaging brand experience that Cal.com has built into their design, and wants to emulate similar interactions.

What role does Tailwind CSS play in the video?

Tailwind CSS is used for styling the layout in the video. It's noted that even if viewers are not using Tailwind CSS, they can apply the same styling concepts using other methods.

What is the purpose of setting the position of the unordered list to 'relative'?

Setting the position of the unordered list to 'relative' is necessary because it allows for the absolute positioning of the cursor element relative to the list, which is required for the animation effect.

How does the 'mixed blend mode' with the value 'difference' affect the text color?

The 'mixed blend mode' with the value 'difference' is used to create an effect where the text color changes based on the background color behind it. If the text is white on a white background, it turns black, and vice versa for a black background.

What is the significance of the 'cursor' component in the video?

The 'cursor' component is significant because it represents the animated pill that moves and changes width based on the user's cursor position over the navigation tabs.

How is the width of the animated pill determined in the video?

The width of the animated pill is determined dynamically based on the width of the tab element that the cursor is hovering over.

What is the purpose of using Framer Motion in the video?

Framer Motion is used to animate the position, width, and opacity of the cursor element smoothly as the user interacts with the navigation bar.

How does the video handle the cursor animation when the mouse is not hovering over any tab?

When the mouse is not hovering over any tab, the video handles the cursor animation by setting the opacity back to zero using an 'onMouseLeave' event, effectively hiding the cursor.

What additional insights does the video offer for extending the functionality?

The video suggests that one could extend the functionality by adding scale, different colors, rotation, or turning it into a full navigation with links.