GeekEagle Posted February 21, 2022 Share Posted February 21, 2022 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 Link to comment Share on other sites More sharing options...
akapowl Posted February 21, 2022 Share Posted February 21, 2022 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 1 1 Link to comment Share on other sites More sharing options...
GeekEagle Posted February 21, 2022 Author Share Posted February 21, 2022 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 1 1 Link to comment Share on other sites More sharing options...
akapowl Posted February 21, 2022 Share Posted February 21, 2022 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 🤷♂️). 2 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