Mouse animation acts weirdly on mouse events

[SQR]

I'm creating a portfolio website using React and I decided to replace the default cursor with a personalised one. I used GSAP TweenMax to animate my custom mouse.

Everything works fine except for some weird cases.

At certain times, when the user clicks on an element or scrolls through a component, the mouse position animates by itself to the 0,0 position (upper left corner of the screen).

I tried console.log in the only function that animated the mouse position but It's not even fired when I click or scroll. (See gifs in the bottom for illustration of the problem)

This is the mouse function used to animate the position of the custom mouse.

export const handleMouseMove = (bigMouseCircle, smallMouseCircle) => e => {
    TweenMax.to(bigMouseCircle.current, 0.3, {
        x: e.pageX - 16,
        y: e.pageY - 16
    });
    TweenMax.to(smallMouseCircle.current, 0.1, {
        x: e.pageX - 4,
        y: e.pageY - 4
    });
};

Where its used:

App.js

(...)
useEffect(() => {
        document.addEventListener(
            "mousemove",
            handleMouseMove(bigMouseCircle, smallMouseCircle)
        );
(...)

        return () => {
            document.removeEventListener(
                "mousemove",
                handleMouseMove(bigMouseCircle, smallMouseCircle)
            );
        };
(...)
    });
(...)
<div className="cursor">
                <div ref={bigMouseCircle} className="cursor__ball cursor__ball--big" />

                <div
                    ref={smallMouseCircle}
                    className="cursor__ball cursor__ball--small"
                />
            </div>
(...)

Other mousehandlers are used (mousedown, mouseup, mouseout, mouseenter, mouseover) but none are fired when the bug occurs.

GIF of the bug:

preview 1: https://i.imgur.com/YvJC3gM.gif

preview 2: https://i.imgur.com/yyd7ZrQ.gif

Live website: http://adamchami.com/

[ZachSaucier]

Hey SQR,

 

Most likely something is undefined in these cases.

 

Please see the below thread on how to create a minimal CodePen demo of your issue as it let's us help you better: