Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kresogalic

ScrollToPlugin dont work on scroll

Recommended Posts

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;
        }
    };
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

 

 

  • 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.
×