ScrollMagic + SmoothScroll stuttering

Question

So I've created a smooth scroll effect on my website, works nice, but I'm having an issue with Scrollmagic. When scrolling down, I'm translating elements, but it stutters. A lot. When I disable my smooth scroll script, everything works fine again.

BTW : I'm using Webpack and GSAP for the animations.

My guess is Scrollmagic isn't aware of the animation so it's using the end value, not the current one. But I can't find out how to fix this

Here is my smooth scroll :

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

And the Scrollmagic part :

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

I'm sure i'm not the first one having this problem, but i couldn't find any answer.

Answer 1

I managed to solve my issue with a refresh function for the scrollbar. Like in this codepen https://codepen.io/emraher/pen/GPRJEZ?editors=1010

They set the scrollbar and the scrollmagic scene as vars, and then this little gem

var elem = document.querySelector(".content");
var scrollbar = Scrollbar.init(elem)

scrollbar.addListener(() => {
scene.refresh()
 })