ScrollTrigger and ScrollSmoother discrepancy with max scroll distance

[Lee Probert]

I need to calculate the overall scroll distance when using ScrollTrigger and ScrollSmoother together. It seems there is no way to get the actual distance that will be traversed when using ScrollSmoother. The easing calculations add a significant amount of pixels to the distance compared to ScrollTrigger.

 

I need to normalise this value so I can sync up the scroll to a ThreeJS animation.

 

Check out the Codepen and scroll the page. You will see that the ScrollTrigger value stops way before the actual end.

 

Is there a way to calculate the actual scroll distance when using ScrollSmoother?

 

-----

 

UPDATE: this is fixed (see below for the solution) - the Codepen is now a WORKING example of using `ScrollSmoother` and the fix is to ensure you use its internal instance of `ScrollTrigger` to get the correct `.end` value.

See the Pen VYjmRBO by leeprobert (@leeprobert) on CodePen.

[Rodrigo]

Hi,

 

I'm not 100% sure of what you're trying to do, but keep in mind that ScrollSmoother basically works on top of ScrollTrigger, so a ScrollSmoother instance has a ScrollTrigger instance that you can tap into for the start and end values, get the current scroll position and other ScrollTrigger properties and methods:

 

https://gsap.com/docs/v3/Plugins/ScrollSmoother/scrollTrigger

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroll()

 

All you have to do is this:

const smoother = ScrollSmoother.create({
  //...
});

// Get the ScrollSmoother ScrollTrigger instance
console.log(smoother.scrollTrigger.end); // Max scroll value of the ScrollSmoother instance

 

Finally remember we have a normalize utility method just in case:

https://gsap.com/docs/v3/GSAP/UtilityMethods/normalize()

 

Hopefully this helps

Happy Tweening!

[Lee Probert]

Yes. I am using the ScrollTrigger instance to log what it says is the max scroll distance, but the actual distance is much more when you log it. Take a look at the Codepen debug UI. At the start, it can give you what it thinks the max scroll distance is, but it can’t pre-calculate the actual max distance.

[Rodrigo]

Yeah be sure to wait after all the ScrollTrigger instances are created. In your demo I logged the end value after this line:

console.log('Initialization complete');
// Get the ScrollSmoother end value
console.log("smoother end", smoother.scrollTrigger.end);

And the reported value was correct.

 

Also there is no need for this:
 

window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
  ...
});

ScrollTrigger detects resize events and internally debounces the refresh method, so you don't need to call the refresh method there, is overkill.

 

Hopefully this helps

Happy Tweening!

[Lee Probert]

I just checked the source code, and you are correct, my code doesn't use the `ScrollSmoother` internal instance of `ScrollTrigger` ... we were using a separate instance that wasn't tied to the smoother at all. This was giving the inaccurate result.

[Rodrigo]

Ok, let us know if using the ScrollTrigger instance of ScrollSmoother works out for you!