scrolltriggerproxy Problems with ScrollTrigger, smooth-scrollbars and Webpack

[yasserzakaria1993]

Hello BEST Team ever,
first of All, Thank you very much for this amazing work on GSAP 3  .

I have weird issue when I tried to implement smoothscrolling with scrolltrigger.
I'm getting this error in the console and the scrolltrigger is failing to trigger any animation with scrolling

I'm using this code to connect scrolltrigger with smooth-scrollbars

import Scrollbar from 'smooth-scrollbar';
import {gsap} from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default () => {
  
  const scrollContainer = document.querySelector('[smooth-scroll-container]');
  
  const bodyScrollBar = Scrollbar.init(scrollContainer, {damping: 0.075, delegateTo: window});
  bodyScrollBar.track.xAxis.element.remove();
  bodyScrollBar.setPosition(0, 0);

  ScrollTrigger.scrollerProxy(scrollContainer, {
    scrollTop(value) {
      if (arguments.length) {
        bodyScrollBar.scrollTop = value;
      }
      return bodyScrollBar.scrollTop;
    },
  });
  bodyScrollBar.addListener(ScrollTrigger.update);
}

By the way smooth-scrollbar is working very well

 

sorry for the lack of proper info as I don't know how to address this problem properly.

Thanks in advance

[ZachSaucier]

Hey yasserzakaria1993. Can you please try to recreate the issue in a minimal form on a site like CodeSandbox so that we can edit the code ourselves?

[yasserzakaria1993]

dose CodeSandbox  support webpack ??

as I didn't use it before

 

[ZachSaucier]

Why do you need webpack? I created a basic demo that you can fork here: https://codesandbox.io/s/objective-glitter-v3ch6?file=/src/App.js

[GreenSock]

For the record, that error message sounds like you're trying to do ScrollTrigger-related things before there's even a window or document.body object defined. Those are necessary for proper registration. So make sure you wait until those exist before you gsap.registerPlugin(ScrollTrigger) or run any ScrollTrigger code.