Jump to content


Problems with ScrollTrigger, smooth-scrollbars and Webpack

Recommended Posts

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

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';


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

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

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.