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/