sscash Posted May 8, 2021 Share Posted May 8, 2021 I was searching on Google and your forum to solve this issue, but nothing. I had to write you brilliant minds here. 1. This your demo https://codepen.io/GreenSock/pen/mdVyPvK 2. I just need it to work with scroll content. "Scroller" This is the code to make the site have that smooth and disappearing scroll bar. gsap.registerPlugin(ScrollTrigger); let bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document, }); ScrollTrigger.scrollerProxy(".scroller", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); bodyScrollBar.addListener(ScrollTrigger.update); But I can't have both 1 https://codepen.io/GreenSock/pen/mdVyPvK 2. Scroller works together. Any solution will be highly appreciated. See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted May 9, 2021 Share Posted May 9, 2021 Hey there @sscash - welcome to the GSAP forums. 34 minutes ago, sscash said: This is the code to make the site have that smooth and disappearing scroll bar. It actually isn't the code for the smooth-scrollbar. This is: https://unpkg.com/smooth-scrollbar@8.6.2/dist/smooth-scrollbar.js The first part of the code-snippet you posted is the initialization of that plugin and the second is the .scrollerProxy, which is so to say the middleman between that smooth-scrollbar and ScrollTrigger. Since that smooth-scrollbar is a third-party plugin and not related to GSAP at all, it is not supported in these forums. If you want to get started with that plugin but don't have any experience with it so far, I would recommend checking out their website first. https://idiotwu.github.io/smooth-scrollbar/ After that you could dig deeper and check the general documentation on their Github page, that also contains a link to their advanced API documentation. You sure can have both, ScrollTrigger AND that smooth-scrollbar. If after the implementation you still have problems hooking it up to ScrollTrigger, we'll be happy to help. 1 Link to comment Share on other sites More sharing options...
sscash Posted May 9, 2021 Author Share Posted May 9, 2021 Thanks for the swift and detailed response. I was thinking its related to GSAP, is there any plugin or function from GSAP that have such functionality? Link to comment Share on other sites More sharing options...
akapowl Posted May 9, 2021 Share Posted May 9, 2021 There is a ScrollTrigger-native helper function that you can utililze for smooth-scrolling. You can find it it the documentation for the .scrollerProxy() (the last demo on that page). Just FYI, it contains a workaround for v3.6.1 with regard to ScrollTrigger's snapping, that might be removed later on. More about that in this thread here 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