ScrollMagic + SmoothScroll заикание

Итак, я создал на своем веб-сайте эффект плавной прокрутки, работает нормально, но у меня проблема с Scrollmagic. При прокрутке вниз перевожу элементы, но тормозит. Много. Когда я отключаю свой скрипт плавной прокрутки, все снова работает нормально.

Кстати: я использую Webpack и GSAP для анимации.

Я предполагаю, что Scrollmagic не знает об анимации, поэтому использует конечное значение, а не текущее. Но я не могу понять, как это исправить

Вот моя плавная прокрутка:

import { TweenLite } from 'gsap';

const html = document.documentElement;
const body = document.body;

const scroller = {
  target: document.querySelector('.scroll-container'),
  ease: 0.1, // <= scroll speed
  endY: 0,
  y: 0,
  resizeRequest: 1,
  scrollRequest: 0,
};

let requestId = null;

TweenLite.set(scroller.target, {
  rotation: 0.01,
  force3D: true,
});
window.addEventListener('load', onLoad);

function onLoad() {
  updateScroller();
  window.focus();
  window.addEventListener('resize', onResize);
  document.addEventListener('scroll', onScroll);
}

function updateScroller() {
  const resized = scroller.resizeRequest > 0;

  if (resized) {
    const height = scroller.target.clientHeight;
    body.style.height = `${height}px`;
    scroller.resizeRequest = 0;
  }

  const scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

  scroller.endY = scrollY;
  scroller.y += (scrollY - scroller.y) * scroller.ease;

  if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
    scroller.y = scrollY;
    scroller.scrollRequest = 0;
  }

  TweenLite.set(scroller.target, {
    y: -scroller.y,
  });

  requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}

function onScroll() {
  scroller.scrollRequest += 1;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

function onResize() {
  scroller.resizeRequest += 1;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

И часть Scrollmagic:

import $ from 'jquery';
import * as ScrollMagic from 'scrollmagic';
import { TweenMax, TimelineMax, Power0 } from 'gsap';
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap';

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);

const controller = new ScrollMagic.Controller();

$('.big-outline-text').each(function() {
  const tl = new TimelineMax();
  const child = $(this);

  if ($(this).hasClass('right-to-left')) {
    tl.to(child, 2, { x: -300, ease: Power0.easeInOut });
  } else if ($(this).hasClass('left-to-right')) {
    tl.fromTo(child, 2, { x: -300 }, { x: 0, ease: Power0.easeInOut }, '+=1');
  }

  const scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.9,
    duration: '110%',
  })
    .setTween(tl)
    .addTo(controller);
});

$('.bottom-to-top').each(function() {
  const tl2 = new TimelineMax();
  const child = $(this);

  if ($(this).hasClass('bottom-to-top')) {
    tl2.fromTo(child, 2, { y: -300 }, { y: 100, ease: Power0.easeInOut });
  }

  const scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.9,
    duration: '220%',
  })
    .setTween(tl2)
    .addTo(controller);
});

Я уверен, что я не первый, у кого возникла эта проблема, но я не нашел ответа.