I am trying to create an animation for the hover nav links. This code works somewhat well, with one flaw.
Here’s how it should work:
When the cursor enters the links, the underline should change from “scale: 0” to “scale: 1” and when the cursor moves away, it should change from “1” to “0”. And if you move from link to link, the underline should slide. And it works just like that. But when you quickly leave the link frame and go to the link again, the underline after the animation is lost, and if you go to the next link, it instantly appears. This phenomenon is more noticeable if you increase the transform from “transform 0.3s” to “transform 1s”. In fact, that is the problem, if you move the cursor away from the links and come back again while the transformation is in progress, the underline disappears. But how to solve this problem.
https://codepen.io/Darko-Markovic/pen/GgKGOYZ
Remove the transition-end rule as that happens after mouseleave and leaves the line at zero width.
/* animation.addEventListener("transitionend", () => {
animation.style.width = ""; // Reset width to its initial state
animation.style.left = ""; // Reset left to its initial state
}, { once: true });*/
When I just remove the “reset function”, when I first load the page it works the way I want it to. But after that, when the link was already covered by the cursor once, it gets the values left: , and then when the cursor covers a link again, it has a transition from the link that was last covered by the cursor (an effect that is not desired). What I did, I set the delay of the “reset function” to the same time as the “Scale” animation. I have updated the link, you can have a look.
That seems to work ok :).
Is that what you were aiming for or is there still a problem?
That’s what I had in mind. I guess it looks good. Thanks for your help in any case.
I meant to post this yesterday but probably too late now
If you offload the animation to css with a simple class change and some css variables you can reduce the JS code down to about a third of the size.
It may be of some use