Как при движении мыши(mousemove) сделать плавную карусель, которая передвигалась бы за мышкой?

Question

[Alex Clean]

Только начал писать код, для наглядности:

const onMouseDown = (evt) => {
    let posX = evt.pageX;
    let current = 0;

    const onMouseMove = (evt) => {
        if (evt.pageX < posX) {
            posX = evt.pageX;
            current -= 5;
        } else {
            posX = evt.pageX;
            current += 5;
        }

        menuList.style.transform = `translateX(${current}px)`;
    };

    menuList.addEventListener('pointermove', onMouseMove)
};


menuList.addEventListener('pointerdown', onMouseDown);

Если перевести в слова, то сперва зажимаем левую кнпоку мышки и slider начинает ходить за мышкой, проблема в том, что он ходит слишком резко, без плавности и инерции. Но если сделать transition, то все будет ужасно дергаться.

Суть вопроса в следующем, как вообще реализовывать mousemove, pointermove так, чтобы была плавность? Можно ли это сделать с transition или есть другие способы? Я давно сталкиваюсь с этой проблемой и так не смог ее адекватно решить. Я просто не знаю как совместить transition и mousemove..

Answer 1

[Alex Clean]

Ответ оказался не так очевиден, как казалось. Везде pointermove работал плавно, кроме firefox. Это же касается события scroll. Суть в том, что firefox, в отличии от других браузеров, не успевает отрисовывать фреймы за движением мышки пользователя. Потому решение оказалось банально простое: реализовать тротлинг или же использовать requestAnimationFrame().

Статья, которая помогла решить проблему

Answer 2

[Артем]

В вашем коде, чтобы создать плавный переход, необходимо добавить CSS свойство "transition" для элемента, который вы двигаете, то есть для "menuList". Например, можно добавить "transition: transform 0.2s ease-out" для плавного перехода.

Также можно добавить более сложные эффекты перехода, например, использовать "cubic-bezier" или "ease-in-out" вместо "ease-out", чтобы создать более плавный эффект.

Например, измененный код может выглядеть так:

const onMouseDown = (evt) => {
    let posX = evt.pageX;
    let current = 0;

    const onMouseMove = (evt) => {
        if (evt.pageX < posX) {
            posX = evt.pageX;
            current -= 5;
        } else {
            posX = evt.pageX;
            current += 5;
        }

        menuList.style.transform = `translateX(${current}px)`;
    };

    menuList.addEventListener('pointermove', onMouseMove);
    menuList.style.transition = 'transform 0.2s ease-out';
};

menuList.addEventListener('pointerdown', onMouseDown);

Это создаст плавный переход, когда вы будете двигать мышь над элементом "menuList". Вы можете настроить значение свойства "transition-duration" и "transition-timing-function" для создания нужного эффекта перехода.

Comments

[Alex Clean]

Спасибо за ответ. И в целом, это я знаю. Проблема в том, что когда я добавляю transition, то list просто дергается ужасным образом.