smallio Posted April 18, 2022 Share Posted April 18, 2022 Hi all, I just wondered the best practices when using Scrolltrigger and any smooth scroll library? I appreciate you guys want isolated code examples but due to the nature of this problem being sitewide I can't really do that. I'd really appreciate a bit of insight on how to make scrolling interactions less laggy in general. All I'm really doing is using a bunch of scroll triggers, nothing complicated and under 250 lines of code so really it should not be lagging. I don't need someone to fully audit the code or anything, rather I'd appreciate if someone could just have a quick look in the inspector and see if there's anything standing out that's causing my issues. I've come up with a few things that could be causing the problem. - Image size - RAF triggering too much - Not using dynamic scroll triggers with "for each" etc Here's my site i'm using scrolltrigger x asscroll - https://scrollablegsapdemo.webflow.io/ Link to comment Share on other sites More sharing options...
Cassie Posted April 18, 2022 Share Posted April 18, 2022 Hey there! Some of your images being around a MB in size would be my first guess. The site seems to be perfectly smooth on my device though. If you're struggling with IOS, it may be worth trying out ScrollSmoother to see if it works for your use case any better?https://greensock.com/scrollsmoother/ 2 Link to comment Share on other sites More sharing options...
smallio Posted April 18, 2022 Author Share Posted April 18, 2022 @Cassie Thanks for the reply! Awesome, I'll try scaling those down. Does GSAP natively kill RAF loops which are not in view? EG are all the scrollers updating and requesting info all the time or are they just doing it upon triggers? Link to comment Share on other sites More sharing options...
smallio Posted April 18, 2022 Author Share Posted April 18, 2022 4 minutes ago, Cassie said: Hey there! Some of your images being around a MB in size would be my first guess. The site seems to be perfectly smooth on my device though. If you're struggling with IOS, it may be worth trying out ScrollSmoother to see if it works for your use case any better?https://greensock.com/scrollsmoother/ I'll try the smooth scroller as well 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 18, 2022 Share Posted April 18, 2022 ScrollTrigger pre-calculates positions and then just checks against those values, so the issue won't be the ScrollTriggers themselves. ☺️ from the docs... Quote Highly optimized for maximum performance - scroll events are debounced, updates are synchronized with GSAP and screen refreshes, resize recalculations are throttled, etc. Link to comment Share on other sites More sharing options...
smallio Posted April 18, 2022 Author Share Posted April 18, 2022 2 minutes ago, Cassie said: ScrollTrigger pre-calculates positions and then just checks against those values, so the issue won't be the ScrollTriggers themselves. ☺️ from the docs... Awesome, just watched your little video on it. Great work, I've been waiting for GSAP to natively make a smooth scroll library. Have not been on the forums in a few years and super happy to see you guys have finally done it! Going to give this a run now. Also great demonstration, super clear. 1 Link to comment Share on other sites More sharing options...
PointC Posted April 18, 2022 Share Posted April 18, 2022 I thought that name sounded familiar. Welcome back and good to see you again @smallio. Where have you been hiding the last few years? 2 Link to comment Share on other sites More sharing options...
smallio Posted April 18, 2022 Author Share Posted April 18, 2022 4 minutes ago, PointC said: I thought that name sounded familiar. Welcome back and good to see you again @smallio. Where have you been hiding the last few years? Haha cheers Craig, working a lot mate! Setup a few businesses (which I 100% could not have done without learning GSAP - Big love to the team), and now back to really dive deep now I have a bit more time and things are running smoothly Hope you're well mate, how is everything your end? 2 Link to comment Share on other sites More sharing options...
PointC Posted April 18, 2022 Share Posted April 18, 2022 All good my friend. Still helping as many people as we can around here. You probably missed the launch of my tutorial site during your hiatus. https://www.motiontricks.com/ Let us know if you have any questions diving back into GSAP. Happy tweening. 3 Link to comment Share on other sites More sharing options...
smallio Posted April 18, 2022 Author Share Posted April 18, 2022 2 minutes ago, PointC said: All good my friend. Still helping as many people as we can around here. You probably missed the launch of my tutorial site during your hiatus. https://www.motiontricks.com/ Let us know if you have any questions diving back into GSAP. Happy tweening. Very cool mate congrats! I shall do. 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