Bimal Posted September 8, 2020 Share Posted September 8, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 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: Link to comment Share on other sites More sharing options...
Bimal Posted September 9, 2020 Author Share Posted September 9, 2020 I have created a minimal demo on codepen. Hope that will be enough to debug. Thank you. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 @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 3 Link to comment Share on other sites More sharing options...
Bimal Posted September 9, 2020 Author Share Posted September 9, 2020 @ZachSaucier thank you so much for the solution. Will keep on mind for the versions. Thank you once again. Link to comment Share on other sites More sharing options...
Bimal Posted September 11, 2020 Author Share Posted September 11, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 11, 2020 Share Posted September 11, 2020 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. Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 11, 2020 Share Posted September 11, 2020 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. 2 Link to comment Share on other sites More sharing options...
Bimal Posted September 13, 2020 Author Share Posted September 13, 2020 Hi @elegantseagulls I m getting closer. Thank you once again. Link to comment Share on other sites More sharing options...
akapowl Posted September 13, 2020 Share Posted September 13, 2020 @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? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now