ScrollToPlugin dont work on scroll

[kresogalic]

I am trying to create slow smooth scroll on website in React and it doesn't work, this is what I tried so far.

 

constructor(props) {

        super(props);

        this.state = {

            scrollTime: 0.5, // Speed

            scrollDistance: 100, // Scroll easing distance

            ticking: false,

        };

    }

 

componentDidMount() {

        window.addEventListener('mousewheel', this.mousewheelHandler, false);

        window.addEventListener('DOMMouseScroll', this.mousewheelHandler, false);

 }

 

mousewheelHandler = (event) => {

        event.preventDefault();

 

        let { scrollDistance, scrollTime, ticking } = this.state;

 

        // // SLOW SCROLL

        var slowScroll = () => {

            var delta = event.wheelDelta / 120 || -event.detail / 3;

 

            var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

            var finalScroll = scrollTop - parseInt(delta * scrollDistance);

 

            TweenLite.to(window, scrollTime, {

                scrollTo: {

                    y: finalScroll,

                    autoKill: true

                },

                ease: Power1.easeOut,

                autoKill: true,

                overwrite: 5

            });

            ticking = false;

        };

 

        if (!ticking) {

            requestAnimationFrame(slowScroll);

            ticking = true;

        }

    };

[GreenSock]

Are you getting any errors? Do you have tree shaking enabled? If so, I bet ScrollToPlugin is getting dumped by your build process. Do you have a demo, perhaps on stackblitz or codepen? It's tough to troubleshoot blind. Oh, and autoKill:true should only be inside of the scrollTo object. I'm also curious why you have overwrite:5. 

 

From what I can tell, your ticking variable wouldn't be getting set properly either because you've got it as a local variable in the scope of that function. 

 

We'd be happy to try to assist if you can provide a reduced test case. 

[OSUblake]

27 minutes ago, GreenSock said:

From what I can tell, your ticking variable wouldn't be getting set properly either because you've got it as a local variable in the scope of that function. 

 

That's the first thing I noticed. You'd have to use setState to set your ticking variable, but I don't think that is a good idea. setState causes a render, and it doesn't run in sync with requestAnimationFrame.

 

I would use a property like this.

 

constructor(props) {
  super(props);
  
  // use requestId instead of a ticking flag in case you need to cancel animation frame
  // cancelAnimationFrame(this.requestId);
  this.requestId = null;
}

mousewheelHandler = (event) => {
  event.preventDefault();
  
  var slowScroll = () => {
  
    ...
    
    this.requestId = null;
  };
  
  if (!this.requestId) {
    this.requestId = requestAnimationFrame(slowScroll);
  }
}

 

 

Using the ScrollToPlugin with wheel events can be pretty wasteful. You're creating and killing a bunch of tweens, really only using the last one. This shows how many tweens have been created, and how many of those tweens have been overwritten. Creating new tweens can also make the scrolling jerky.

 

See the Pen wRwZKL by osublake (@osublake) on CodePen

 

 

Another approach.

 

See the Pen VrXOOM by osublake (@osublake) on CodePen

 

 

That demo really isn't scrolling anything, but there are some in this thread that use a similar technique.