Skip to content

[BUG]: animations/target-cursor #84

@xzadudu179

Description

@xzadudu179

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions