TweenLite - анимация, добавляющая больше пикселей, чем указано

Question

Я создаю вертикальную карусель, которая состоит из 4 разделов. У меня есть внешняя оболочка, настроенная на всю высоту и ширину окна, и внутренняя оболочка, абсолютно расположенная внутри этой внешней оболочки.

Я пытаюсь анимировать его с помощью колесика прокрутки мыши, но он добавляет слишком много пикселей?

Вот код для события mousewheel: (я использую прокручиваемый плагин)

$('.carousel-outer-wrapper').on('mousewheel', function(event) {
        var carousel = $('.carousel-wrapper');
        TweenLite.to(carousel, 1, {top: "+=50px"});
    });

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

Как я могу гарантировать, что карусель будет скользить ровно на 50 пикселей?

Answer 1

Я нашел решение моей проблемы.

Это не объясняет, почему анимация добавляла дополнительные пиксели, которые не были кратны 50, но это останавливало слайдер от многократного запуска функции.

Я изменил свой код на следующий, и теперь он работает:

    var blockedSlider = false;

    $('.carousel-outer-wrapper').on('mousewheel', function(event) {
        if (blockedSlider == false) {
            blockedSlider = true;
            var carousel = $('.carousel-wrapper');
            TweenLite.to(carousel, 1, {top: "-=50px", onComplete:function() {               
                blockedSlider = false;
            }});            
        }
    });

Answer 2

Два варианта по моему скромному мнению:

• Только анимация, когда анимация в покое.
• Используйте глобальную переменную в качестве значения назначения, добавьте (или удалите) эту переменную. А также TweenLiteбудет использовать только эту переменную в качестве места назначения.

Пример № 1:

if (!TweenMax.isTweening(carousel)) { // only execute when the tween on this object is not running
  // your code for tween goes here.
}

Пример № 2:

destY = 0;
$('.carousel-outer-wrapper').on('mousewheel', function(event) {
  destY += 50;
  var carousel = $('.carousel-wrapper');
  TweenLite.to(carousel, 1, {top: destY});
});