Reactjs GSAP TweenMax鼠标动画对鼠标事件的行为异常

我正在使用React创建一个公文包网站，我决定用一个个性化的光标替换默认光标。我使用GSAP TweenMax为我的自定义鼠标设置动画

除了一些奇怪的情况外，一切正常

在某些时候，当用户单击某个元素或滚动某个组件时，鼠标位置会自动设置为0,0位置（屏幕左上角）

我尝试了console.log，这是唯一一个设置鼠标位置动画的功能，但当我单击或滚动鼠标时，它甚至没有启动。（有关问题的说明，请参见底部的GIF）

这是用于设置自定义鼠标位置动画的鼠标功能

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
    });
};

使用时：

App.js

（…）
useffect（（）=>{
document.addEventListener(
“鼠标移动”，
小手鼠移动（大鼠圈，小鼠圈）
);
(...)
return（）=>{
document.removeEventListener(
“鼠标移动”，
小手鼠移动（大鼠圈，小鼠圈）
);
};
(...)
});
(...)
(...)

使用了其他鼠标手柄（mousedown、mouseup、mouseout、mouseenter、mouseover），但在出现错误时不会触发任何鼠标手柄

错误的原因：

预览1：

预览2：

---

Live网站：

您是否尝试过将输入到Tween中的e.pageX和e.pageY进行console.log（）注销？听起来这些确实是问题所在（要么未定义，要么为0）。如果您需要更多特定于GSAP的帮助，您可能希望在@Jack yes的专用论坛上发布，但当出现错误时，该功能甚至没有启动，因此我无法通过这种方式进行检查。我会在他们的论坛上发布，我没想到。谢谢

(...)
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>
(...)