Adesh Posted January 5, 2023 Share Posted January 5, 2023 During the combination smoothscroll and stack card jquery, I encountered a problem. Could you please tell me what I'm doing incorrectly in my code? See the Pen bGjwPea by Adesh-Evince (@Adesh-Evince) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted January 5, 2023 Share Posted January 5, 2023 Can you explain what the interaction is supposed to look like? Link to comment Share on other sites More sharing options...
akapowl Posted January 5, 2023 Share Posted January 5, 2023 Hello @Adesh Your problems do not look like they are related to GSAP, but to your lacking setup for smooth-scrollbar.js to work properly instead. While your scroll-container is the element with the class .body, you do not apply styles neccessary for it to work with smooth-scrollbar in your CSS. I just quikcly added some styles and it works now - but I give no guarantee that this is the way you should be doing it. Please check their documentation for how to properly set it up. Hope this will help though. https://github.com/idiotWu/smooth-scrollbar See the Pen bGjBEdO by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Adesh Posted January 6, 2023 Author Share Posted January 6, 2023 Thanks for you time @akapowl. Do we have any option for smooth scroll using gsap? Link to comment Share on other sites More sharing options...
GreenSock Posted January 6, 2023 Share Posted January 6, 2023 10 minutes ago, Adesh said: Do we have any option for smooth scroll using gsap? Of course! https://greensock.com/scrollsmoother It's only available for Club GreenSock members, though ("Shockingly Green" and higher). If you prefer to use a different library for smooth scrolling, that's fine but we can't support 3rd party libraries here. ScrollSmoother is very nicely integrated with the GSAP ecosystem. We created a ScrollTrigger method to make it possible to use 3rd party libraries too, though - see https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() Enjoy! Link to comment Share on other sites More sharing options...
Adesh Posted January 6, 2023 Author Share Posted January 6, 2023 Can you please check on this codepen why my stack card is not working properly? See the Pen KKBNZOz by Adesh-Evince (@Adesh-Evince) on CodePen NOTE:- The colored box at the bottom of the page has a stack card motion applied to it. Link to comment Share on other sites More sharing options...
akapowl Posted January 6, 2023 Share Posted January 6, 2023 That's because in this new (not very minimal) demo now you are using the body element as the relevant 'scroller'. ScrollTrigger will use position: fixed by default for pinning when the body is the scroller element, butposition: fixed on elements inside a container that has transforms apllied, i.e. the container added by smooth-scrollbar that is relevant for smooth-scrollbar to work, does not work as usual, since the context for the fixed position changes. The solution is to set pinType to 'transform' on your ScrollTriggers, so pinning can work in a smooth-scrolling environment. pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). 1 Link to comment Share on other sites More sharing options...
Adesh Posted January 6, 2023 Author Share Posted January 6, 2023 Hello @akapowl Thank you for your quick reply, I appreciate it! I see your argument, but could you please tell me what I should be doing right away? Or, if you have a demo, would you kindly provide it? Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 6, 2023 Solution Share Posted January 6, 2023 I already did. 7 minutes ago, akapowl said: The solution is to set pinType to 'transform' on your ScrollTriggers Link to comment Share on other sites More sharing options...
Adesh Posted January 6, 2023 Author Share Posted January 6, 2023 Ah! I understand you now. Many thanks 😊, I appreciate it. 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