How can I create a line animation under my Webflow navbar links when hovering over similar to the one found on the Fendi website?
TL;DR
- Wrap each nav link in a relative-positioned container and add an absolutely positioned div underneath for the underline.
- Style the underline with Scale X: 0 initially, then animate Scale X to 1 on hover using Webflow Interactions for a smooth sliding effect.
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
divblock, 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.