I have a simple underline on hover effect on the main navigation at the top. There is a div that contains the nav link and a second div for the line. I set up the container div as the interaction trigger, and the line to change its width to 100%. So far, so good.
But when you hover out the line seems to grow over its container div – like 300% bigger, let’s say, and then shrinks back to its initial state of 0%, instead of just shrinking back to 0%. There is this short third state of the interaction that I can’t control, and shouldn’t be there.
Should I just be animating the border instead? Thanks for any pointers!
Note: the navigation is shown only with an interaction on the home page so it’s easier to work on it in the Information page.