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
- Add a navbar with text or nav links and wrap each in a div container.
- Place a 2px-high line div under each link, initially set to 0% width, and use relative/absolute positioning for alignment.
- Use Webflow interactions on the link wrapper to animate the line's width from 0% to 100% on hover in, and back to 0% on hover out.
To create a line animation under navbar links on hover similar to the Fendi website in Webflow, you’ll need to combine layout styling with interaction animations.
1. Set Up Your Navbar and Link Elements
- Add a Navbar from the Add Elements panel.
- Inside the Navbar, place Text Links or Nav Link blocks for your menu items.
- Wrap each link in a div block if needed, to help control layout and position the animated line relative to the text.
2. Create the Line Element
- Under each text link, add a div block that will serve as the animated line.
- Set the class for this div (e.g.,
hover-line), and apply the following styles: - Height: 2px
- Width: 0% (this will animate to 100%)
- Background color: your desired line color
- Positioning: absolute or relative depending on parent structure
- Initial state: Make sure the line is placed beneath the text, aligned horizontally
3. Set Parent Div to Position Relative
- Set the parent container (the wrapper around the text link and line) to
position: relativeso the line stays positioned correctly beneath the link.
4. Add a Webflow Hover Interaction
- Select the link wrapper div (the one containing both the link text and line).
- Go to the Interactions (lightning bolt) panel.
- Choose + Add Trigger > Hover.
- For Hover In:
- Add a new animation
- Select the line div
- Animate the Width from 0% to 100% over, for example, 0.3s (ease out)
- For Hover Out:
- Animate the Width back from 100% to 0% over 0.3s (ease in)
5. Optional: Add Delay or Easing for a Smoother Effect
- Fine-tune the animation by adjusting timing, easing (e.g., ease-out-expo), or adding a slight delay to create a more luxurious feel like Fendi's effect.
Summary
To replicate Fendi’s navbar hover animation in Webflow, create a thin div line below each nav link, set its width to animate from 0% to 100% on hover, and control the effect with Webflow’s interactions panel. Use relative/absolute positioning for clean layout control.