Gsap ScrollTrigger not working with smooth scrollbar and react js

[Bimal]

Hi Guys,
I m pretty new to GSAP and REACT Js. I m having problem with gsap ScrollTrigger and smooth scrollbar. They work fine separately, Code I implemented might be wrong but cant figure out what is wrong with my code.

 

Note: If I remove "scrollable" className from the component then gsap works.

Hope someone will help me. Thank you for you time.

 

 

 

See the Pen jOqxZeV by bimalpariyar (@bimalpariyar) on CodePen

[ZachSaucier]

Hey Bimal and welcome to the GreenSock forums. If you'd like help debugging, please create a minimal demo of the issue. This thread covers how to do so:

 

[Bimal]

I have created a minimal demo on codepen. Hope that will be enough to debug.

Thank you.

[ZachSaucier]

@Bimal You need to connect ScrollTrigger and smooth-scrollbar similar to how the demo in the .scrollerProxy() docs shows.

 

This includes upgrading the version number of ScrollTrigger to be one where .scrollerProxy() exists. It also includes using the scrollable section as the target for your smooth scroll:

See the Pen gOreYva?editors=0010 by GreenSock (@GreenSock) on CodePen

[Bimal]

@ZachSaucier thank you so much for the solution. Will keep on mind for the versions.
Thank you once again.

[Bimal]

Hi @ZachSaucier sorry to bother you once again, but i ran into another problem once again.

On first load everything works as expected, but while returning to the animating page from another page or route animation does not work.

I have added the code to let you see the problem. I hope you will take a look at it.

Many thanks in advance.

[ZachSaucier]

I'm not very good with React. Perhaps @elegantseagulls or someone else can step in and help there.

 

Since the first one appears to be loading I would think that doing a ScrollTrigger.refresh() once the page is navigated back to would fix it but I don't know what even that is in React. It's possible that you might need to destroy and recreate the smooth scrolling and/or ScrollTrigger functionality when the page is navigated back to.

[elegantseagulls]

Hi @Bimal,

 

It looks to me like you're not doing any garbage cleanup on componentWillUnmount() {  } . I'm guessing that's what's causing the issues. If you navigate away from the page, then go back to it another scrollTrigger gets added on top of the original one (same with gsap animations), and I think it's conflicting with itself.

 

Basically you'll want to set an id to your scrollTriggers and use the .kill() method on them (and your tweens/timelines) when the component is unmounted.

[Bimal]

Hi @elegantseagulls I m getting closer.

 

Thank you once again.

[akapowl]

 

@Bimal

 

I noticed, you add a listener to your smoth-scrollbar with ScrollTrigger.refresh on it - that probably is not a good idea.

bodyScrollBar.addListener(ScrollTrigger.refresh); 

 

 

You might run into performance problems further down the road.

I did the same initially and this is, what @GreenSock helpingly advised me with doing so in this thread:

 

 

 

Quote:

"You certainly shouldn't be calling refresh() on every update. One of the great benefits of ScrollTrigger is its ability to do all the complex calculations up front (on refresh()) to figure out where things are in the natural flow of the document and then while scrolling it ONLY has to look at a single value and do some simple comparisons. That makes it super fast while scrolling. In order to do the up-front calculations properly, it literally has to revert everything ScrollTrigger-related (unwrap the elements, remove the inline styles it applied, unpin things, put the animations back to their start, etc.), then do the measurements, then put things back. Again, that typically only happens when the page loads (and when you resize or activate a tab after it was hidden) so the performance hit is negligible. It's well worth the up-front effort so that it can be crazy fast while your users actually do their scrolling. 

 

So if you're calling refresh() all the time like that, it totally makes sense that performance would bog down."

 

 

 

 

 

I wonder, does

bodyScrollBar.addListener(ScrollTrigger.update); 

not work for you?