React (CRA), ScrollTrigger and Smooth scrollbar Sync Pin

[GeekEagle]

Hello guys, i speak french , sorry for my english,  i hope you can understand me 😁

 

I'm not enable to Sync React with ScrollTrigger and Smooth scrollbar correctly, i need your help. It's like 3 days i'm on it, and i can't more 😓. All work perfectly without the Smooth scrollbar, but with it, the "scrolltrigger pin" make jump my targets, i tried some solutions but none of them works correctly. Could someone show me the right way to set it up ?

 

https://codesandbox.io/s/react-scrolltrigger-smooth-scrollbar-m344w5?file=/src/App.js:636-892

 

 

[akapowl]

 

Hello GeekEagle,

 

I'm not too familiar with React, so I can not really tell if this example below is all fine React-wise, but it is working now.

 

Here are some notes:

 

First and foremost you'll want to make sure that your setup is fit to work with smooth-scrollbar.js in the first place - that is nothing GSAP related.

You are having two browser-native scrollbars show up, which indicates that your setup is not really working well. 

 

I added an overflow: hidden !important to body and html, and set the width of the .scroller to auto, its height to 100vh and its overflow to hidden - the height and overflow settings are rather important for the general setup of smooth-scrollbar here. I'm not giving you a 100% guarantee that this is totally correct (as the !important I had to add strikes me as a bit odd) but it works way better now.

 

With regard to ScrollTrigger:

You are initializing smooth-scrollbar on the .scroller, but your .scrollerProxy() is pointing towards the body - you'll want to point it to the element that you are creating your smooth-scrollbar on. Also you have an onUpdate callback in your ScrollTrigger updating ScrollTrigger, which technically doesn't do anything, if I am not totally mistaken here. Instead of that you'll want to add a listener to your smooth-scrollbar instance, updating ScrollTrigger like this:

 

bodyScrollBar.addListener(ScrollTrigger.update);

 

One last thing I changed is the scroller property

 

// from...
scroller: scroller.current

//...to
scroller: scroller

 

Again, I am not to familiar with React, so I can not explain why that last thing did the trick.

 

Here is a fork of the demo you provided with all the changes mentioned above in place. I hope it helps.

 

https://codesandbox.io/s/react-scrolltrigger-smooth-scrollbar-forked-44r7iz?file=/src/App.js

[GeekEagle]

Hello Akapowl, now i know what a superhero statut means 😂, 

Thank you for these clear explanations and for your time. Everything is working fine now. I understood everything except the part concerning the markers, I will come back to it. Thank you very much.

 

https://codesandbox.io/s/react-scrolltrigger-smooth-scrollbar-m344w5?file=/src/App.js

[akapowl]

33 minutes ago, GeekEagle said:

I understood everything except the part concerning the markers

 

Don't worry about it too much. That part really only is a workaround to correct some unwanted behaviour of the markers within the context of smooth-scrollbar, which occurs due to how that library works. So you will only ever need it for testing - it won't be needed for anything to work properly on a live website (unless you wanted the markers to show there 🤷‍♂️).