Jump to content
Search Community

ScrollSmoother perfomance issues

wpsoul test
Moderator Tag

Recommended Posts

I tested smoothscroll and it's great addition to GSAP. And it works greate on pages with big elements. But I found huge perfomance drop on pages with many small elements a a lot of DOM elements.

 

I copied whole page of site so you can see. When you scroll over section with product grid, perfomance is dropped down and I see huge jumping while scroll. When scroll is over next elements - it's restored (but still not perfect). 

 

Is any dependencies in ScrollSmoother on elements for page?

 

Ps you can see better what I mean if you open Codepen in full page (looks like compact look has no such issue). 

See the Pen NWXOQmw by igor-sunz (@igor-sunz) on CodePen

Link to comment
Share on other sites

Performance optimization is a very deep topic. It'd take a lot of time to isolate exactly what's causing the problems there but...

  • It looks like you're using some kind of third party parallax animation tool. That may be problematic.
  • You've got a lot of CSS transitions/animations going on. Again, could be problematic.
  • Have you tried setting will-change: transform for elements that you're moving around? 
  • I've got a relatively fast computer, so I didn't notice anything terrible but when I did a quick performance recording in dev tools, I saw a LOT of paint/GPU/compositing going on (that's unrelated to GSAP). 
  • Does it help at all if you turn OFF the normalizeScroll feature? 

By the way, which product grid are you talking about? I see two. The "Deals and Coupons"? 

 

I'll contact you privately about an experimental feature that might help a bit. 

Link to comment
Share on other sites

I don't think that parallax or css is the reason because parallax is made on GSAP and part of page where I see some jumping has no animations. 

 

I removed all scripts except GSAP and removed all css transitions. And I still see some jittering over part where I have product grid. The only difference from other parts is that it has a lot of DOM elements (prices, buttons, images, etc). 

 

Interesting thing that I tried the same page on my computer which has much better GPU and I don't see issues. So, it's something GPU related or OS related. I have problem on Macbook PRO, but it has good enough card with 8GB and powerful CPU. 

 

P.s I tried your feature with section option - it didn't help. Please, note, you need to test on full screen. Click on "Edit on Codepen" for this. 

Link to comment
Share on other sites

11 hours ago, OSUblake said:

You can try setting will-change on the content. It might make the text blurrier during scrolling, but it can improve performance.

 

#smooth-content {
  will-change: transform;
}

 

 

This helped, scroll is much smoother and I don't see huge perfomance drop over area with product grid. 

 

I have one more question, because I see similar perfomance problem with scrub parameter and ScrollTrigger. 

 

Imagine I have 10 elements on page and all of them have different animations for GSAP. Is any difference in perfomance if I make 10 timelines and attach timeline to ScrollTrigger.create OR I make 10 gsap.from({scrollTrigger:{...}},...) ? 

Link to comment
Share on other sites

6 hours ago, wpsoul said:

Imagine I have 10 elements on page and all of them have different animations for GSAP. Is any difference in perfomance if I make 10 timelines and attach timeline to ScrollTrigger.create OR I make 10 gsap.from({scrollTrigger:{...}},...) ? 

I doubt you'd ever notice any practical difference whatsoever, but technically it'd be slightly more efficient to have them in one timeline attached to one ScrollTrigger. But again, the difference is so minuscule that it's probably not worth worrying about. 

Link to comment
Share on other sites

  • 1 month later...
On 4/16/2022 at 11:14 AM, GreenSock said:

I doubt you'd ever notice any practical difference whatsoever, but technically it'd be slightly more efficient to have them in one timeline attached to one ScrollTrigger. But again, the difference is so minuscule that it's probably not worth worrying about. 

 

On 4/15/2022 at 1:21 PM, GreenSock said:

Performance optimization is a very deep topic. It'd take a lot of time to isolate exactly what's causing the problems there but...

  • It looks like you're using some kind of third party parallax animation tool. That may be problematic.
  • You've got a lot of CSS transitions/animations going on. Again, could be problematic.
  • Have you tried setting will-change: transform for elements that you're moving around? 
  • I've got a relatively fast computer, so I didn't notice anything terrible but when I did a quick performance recording in dev tools, I saw a LOT of paint/GPU/compositing going on (that's unrelated to GSAP). 
  • Does it help at all if you turn OFF the normalizeScroll feature? 

By the way, which product grid are you talking about? I see two. The "Deals and Coupons"? 

 

I'll contact you privately about an experimental feature that might help a bit. 

Hey @GreenSock I migrated from locoscroll to Gsap and everything works great except when I have giant pages that my clients insist on doing.

From the first version of smoothscroll to the second official version using matrix, the performance has improved a lot but I still have some tripidations mainly at the time of ease out of the scroll.

I was going to suggest a scroll by section I believe it is interesting but it looks like it is being tested I would like to test if this is true.

Thanks in advance and a pleasure to use GSAP.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...