GSAP анимация мыши TweenMax действует странно на события мыши - PullRequest
Новая
       7

GSAP анимация мыши TweenMax действует странно на события мыши

0 голосов
/ 20 сентября 2019

Я создаю веб-сайт портфолио, используя React, и я решил заменить курсор по умолчанию на персонализированный.Я использовал GSAP TweenMax для анимации моей мыши.

Все работает отлично, за исключением некоторых странных случаев.

В определенные моменты, когда пользователь нажимает на элемент или прокручивает компонент, позиция мыши сама по себе анимируется в положение 0,0 (верхний левый угол экрана).

Я попробовал console.log в единственной функции, которая анимировала положение мыши, но она даже не запускалась, когда я нажимал или прокручивал.(См. Рисунки внизу для иллюстрации проблемы)

Эта функция мыши используется для анимации положения настраиваемой мыши. 

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 

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

Используются другие обработчики мыши (mousedown, mouseup, mouseout, mouseenter, mouseover), но ни одна из них не запускается при возникновении ошибки.

GIF ошибки:

предварительный просмотр 1: https://i.imgur.com/YvJC3gM.gif

предварительный просмотр 2: https://i.imgur.com/yyd7ZrQ.gif

Живой веб-сайт: http://adamchami.com/

...