mouse enter / mouse leave animation

[bouteillerAlan]

I'trying to trigger a svg animation when the user hovers a link. So in my head I got pretty much this plan: I add an event observer on the link and on mouseenter I create the animation and loop it, on mouseleave I wait to the loop to end (like that the animation is finished beautifully) and next remove the animation.

The code is the following:

// in a for loop, that loop over lets say card or project
let animateLink = null;
const link = txt.children[2];
link.addEventListener('mouseenter', () => {
  pause[`${index}`] = 1;
  animateLink = animate(svg.createDrawable(svanim), {
    draw: ['0 0', '0 1', '1 1'],
    ease: 'inOutQuad',
    duration: 2900,
    delay: stagger(300),
    loop: true,
    onLoop: () => {
      if (pause[`${index}`] === 0) {
        animateLink.pause();
        animate(svg.createDrawable(svanim), {
          draw: ['0 0', '0 1'],
          duration: 2900 / 2,
          loop: false
        })
      }
    }
  });
});
link.addEventListener('mouseleave', () => {
  pause[`${index}`] = 0;
});

So firstly, reading my code I fell this is not the way to do this. I can confirm that feeling because the animation behavior is "ok" but not perfect:

• if I move the mouse quickly hover the link the animation get a stroke
• if I hover the link then remove it, the animation end two time because of the callback on the onLoop
• the pause[${index}] stuff is not clean at all

But if I remove the animation that is place on the onLoop the svg is not displayed due to another animation when the site is loading:

.add(svg.createDrawable(svanim), {
  draw: ['0 0', '0 1'],
  ease: 'inOutQuad',
  duration: 1350,
  autoplay: true
}, 'slashed-end')

What's the animjs way of doing that kind of animation?
-> add an animation on mouseenter
-> remove it completely when mouseleave and the actual loop is finished, and conserving the 0 1 state that allow the svg to be drawn