Animate independant border property

Design help Animations & Interactions
1

Hello,

I would like to animate the border down lines from my button menus so that when it’s on hover, the line starts to appear from left to right, as if the line would be drawn.

Unfortunately, the only animation I found for a border was to change it’s width which isn’t reflecting from what I’m searching for.

Is there a way to do this?

Best regards,
Florian

Here is my public share link: LINK
(how to access public share link)

2

here is how to do that:

3

Hello PixelGeek, you truly are a great Product Evangelist, thank so so much!

I will experiment this right away, you rock.
Very happy about this fast and perfect reply.

Sincerely,
Florian

4

Hi @PixelGeek , I just tried using your method to create this animation but I encounter some errors.

I think this occurs due to the fact we’re in a Nav Menu (which is where I need the animation), so it’s not about animating the bottom border of a button but from a Nav Link element.

  1. The size of the line isn’t spousing the size of the text button
  2. I cannot set the Nav Link as parent of the Div Block
  3. The Hover only works on the new Div Block and not the text iself, is this something we can choose to set up?

Thank you for your gracious help.

Best regards,
Florian

5

You can see the issue on this video: Failed animation - YouTube

6

I’m sorry for the spam, have you seen the issue I encounter?

7

Can you include your read-only link so we can take a closer look at how you’ve setup the structure of the interaction elements?

8

Oh yeah sure! It’s a good idea, here if the link of the project I tried it on:

https://preview.webflow.com/preview/kimmel-transports?utm_medium=preview_link&utm_source=dashboard&utm_content=kimmel-transports&preview=7dfd87989dd74eddf3ab32deb2a76e7c&workflow=preview

9
  1. The size of the line isn’t spousing the size of the text button

This is because your div that’s wrapping the underline element and nav link has a position property of static:

image

Elements set to position: absolute size themselves relative to the nearest parent that has its position property set to anything other than static — in your case that’s the Nav Menu. Setting the position property of that wrapper div to relative will fix the issue.

  1. I cannot set the Nav Link as parent of the Div Block

I’m not sure what you mean but hopefully my explanation above helps answer this one.

  1. The Hover only works on the new Div Block and not the text iself, is this something we can choose to set up?

Since your nav link class has left and right margin (to push it away from other links) it’s creating extra space within the wrapping div. Since all of your links will have this setup, I’d recommend moving the margin to the wrapper instead and removing it from the nav link — this will shrink the trigger to only the size of your text and have the added benefit of shrinking the underline as well.

That should fix the issues you mentioned, but I’ve got a couple of extra notes:

Your manually adding a class for the active state of your nav link, but Webflow does this automatically. As soon as you set a destination for the link, navigating to that destination page will show a green Current class selector for that specific link that can be used to style the active state.

Since you’re setting up a fairly complex interaction involving a group of elements that will be used for multiple links, I’d recommend setting it up as a Component. If you’re not familiar, you can read a bit more about it below:

It’s definitely a more advanced solution, but it will allow you to easily duplicate that interaction not only within your nav, but also anywhere else you’d like to use it within the site. The text and link properties can be set per instance, and if you ever want to make a change to the effect you can update the structure of the main Component and it will update all instances you’ve used on any page.

Hopefully that helps but don’t hesitate to reach out if you have any other questions or run into any issues :+1: