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/