DavidHDev/vue-bits

[BUG]: animations/target-cursor

Closed this issue · 1 comments

Describe the issue

When quickly moving the mouse from one cursor-target element to another and then stopping the mouse, the cursor animation will changes to the end state of the animation inside the leaveHandler function until the next mouse movement.
Specific like this:

Image

In practice, the cursor animation shouldn't change it's animation state.

In my own project, I solved this by adding a few lines of code inside the enterHandler function, between
spinTl.value?.pause(); and activeTarget = target;:

const corners = Array.from(cornersRef.value);
corners.forEach(corner => {
    gsap.killTweensOf(corner);
});

This fixes the issue described above. If you have a better idea, I'm glad to discuss it!

Reproduction Link

https://vue-bits.dev/animations/target-cursor

Steps to reproduce

Quickly (less than 0.2 seconds) moving the mouse from one cursor-target element to another and then stop the mouse. This reproduces the issue.

Validations

  • I have checked other issues to see if my issue was already reported or addressed

Feel free to open a PR