How can I create a line animation under my Webflow navbar links when hovering over similar to the one found on the Fendi website?

Creating a line animation under your Webflow navbar links can enhance your site's interactive elements. Follow these steps to achieve an effect similar to the Fendi website.

​

1. Design the Base Navbar

• Open your Webflow project and navigate to the page where you want the navbar.
• Add a Navbar component from the Add panel.
• Style your navbar links to match your design preferences.

​

2. Create the Line Element

• Insert a Div Block under each navbar link using the Navigator panel.
• Name the Div Block (e.g., "Line") for ease of reference.
• Set the height of the Line to your desired thickness (e.g., 2px) and the width to 0%.
• Position the Line using absolute positioning at the bottom center of the navbar link.
• Choose a background color to match the line when it animates.

​

3. Add Interactions for Hover Effect

• Select the Navbar Link you want to animate.
• Open the Interactions panel (lightning bolt icon).
• Click on “Element Trigger” and choose “Mouse Hover.”
• Add an Animation and name it (e.g., "Line Expand").

​

4. Set the Hover In and Hover Out Animations

• For Hover In:
• Add a new transform action for the “Line” Div Block.
• Animate the Width from 0% to 100%.
• Set the duration to around 0.2s for a smooth transition.
• For Hover Out:
• Add another animation that reverses the first.
• Animate the Width back from 100% to 0%.
• Set the same duration to ensure consistency.

​

5. Duplicate for All Navbar Links

• Copy and paste the Line Div Block under each navbar link.
• Repeat the interaction setup for each link to ensure the animation is consistent across the navbar.

​

Summary

To create a line animation under navbar links in Webflow, design a base navbar, create a line element with absolute positioning, and use interactions to animate the line on hover. Adjust the timings and repeat for each link to ensure a cohesive effect.