I am trying to make a line animation under my navbar links when hovering over.
Something like this:
I am not an expert in coding, but I have been looking up css codes and tried embedding them into my website but I just can’t seem to get it right.
Here is my site:
https://preview.webflow.com/preview/daniels-fantastic-project-a4e7dc?preview=0a7b596fca7cf1d83cfac2fcbf22b300
Hi @DanielY
Welcome to the Webflow Community!
Good news is that you definitely don’t need code to do this, Webflow has this covered with interactions.
You can wrap your navlinks in a div, with another div centered to the bottom to make a line… add a hover interaction in and out.
Here is a sample. Let me know if you’ve managed to figure this out or not and if not, I’ll make a quick video to show you how to do this…
Also - a similar clone-able idea here from @Aaron
Oh yeah, even better! Nice find @StuM
Thank you guys! It’s working now 
How did you make the line start animating from the center?
Use can use the centre element tool, or use the parent container to centre the element. It will then appear from the middle.
Thanks, I figured it out. I was increasing the Size to show the line instead of Scaling the line. When I scaled it within a centered parent container, it worked.
Hey @j6776 
That looks the same as what is detailed above, except in this case there is no margin underneath the navigation buttons. Let me know if you have any difficulty getting this to work.
If you have anything so far, then feel free to share your read only link so we can a look for you 
Hi Mark,
Thanks for getting back to me
https://preview.webflow.com/preview/jean-323e0b?utm_medium=preview_link&utm_source=dashboard&utm_content=jean-323e0b&preview=86d2547be7a68546d9e5fcc2fc670666&mode=preview
I followed a tuto on ytube but it seems that the version has changed since the video has been done.
My trigger is correct but the animation is wrong. I assume that it is because it is not the right element that is selected
John
I was wondering if anyone has any tips for making it so that the hover animations won’t run on the ‘current’ state. I would like to keep the underline there when someone is on the current page and not have the animation run when they hover over the link while on that page.
I have the exact same question. Bump!
I’m not sure it’s possible to do natively, e.g. using Webflow Interactions. You can create the underline on hover animation, but to create one with non-hover on “current state” seems to be possible only by using custom code.
Thank you, it helps me.
Thanks for your help on this @magicmark but how do I get the link animation to mimic what you have in the video above? The default animation moves from the left to right but in your example the link starts in the middle and moves to both sides.
