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

To create a line animation under navbar links on hover like on the Fendi website, you’ll need to use Webflow's Interactions and custom styling. Here's how to recreate that elegant underline effect step-by-step.

1. Structure Your Navbar Links

• Make sure each nav link is inside a container element, such as a div block, to allow positioning of the animated line.
• Assign a class to your nav link, such as Nav Link, and to the container, like Nav Link Wrapper.

2. Add the Animated Line Element

• Inside each Nav Link Wrapper, add a div block below the link text. Name it something like Underline.
• Set the Underline’s styling as follows:
• Height: 2px (or similar)
• Width: 100%
• Background Color: Matching the desired line color
• Position: Absolute
• Bottom: 0
• Left: 0
• Z-index: Below the text if necessary
• Set the parent Nav Link Wrapper to Position: Relative, so the underline is positioned within it.

3. Style the Underline Animation (Initial State)

• Set the Underline width to 0% initially.
• Use Transform > Scale X: 0 instead of just setting width (this enables smoother animations).
• Set the Transform Origin to left for left-to-right animation.

4. Create a Hover Interaction

• Go to the Interactions Panel (lightning icon).
• Select the Nav Link Wrapper, click + for a new interaction, and choose On Hover.
• For Hover In:
• Select the Underline element.
• Add an animation: Scale X from 0 to 1 over, e.g., 0.3s with ease out.
• For Hover Out:
• Add an animation that scales X back from 1 to 0 over 0.3s with ease in.

5. Optional Enhancements

• To make it feel more premium:
• Add a slight delay to the Hover Out animation.
• Use custom easing curves for a refined motion (e.g., "easeInOutCubic").
• If you want a delayed underline (like Fendi), stagger the effect or match it to closely spaced hover transitions.

Summary

To replicate Fendi’s line animation under navbar links in Webflow: wrap your link in a container, add a positioned div for the underline, and use hover interactions that animate Scale X on transform. This creates a smooth animated underline effect on hover.