ScrollTrigger delayed and choppy for some users

[pinksharpii]

I'm developing a new home page for a client of ours and it looks great for me and a few others on the team. But my PM says it's very laggy and choppy for her, with portions of the page not animating right away, and jumping down the page a few seconds after scrolling.

We're both using Chrome on Mac with a trackpad but she tried other browsers on her computer and experienced the same issues there too.

I tried making a codepen but there's just so many moving parts. You can view the code and example on our dev site here https://dev.collective-reflection.com/
This is my first time using GSAP for this kind of purpose. It's been years since I've touched this library but I think I did it all correctly. But if there's anything in my GSAP events that are inefficient or wrong, please let me know.

I'm tempted to try the SmoothScroller plugin to see if that would make a difference but it's a large purchase and I'd like to understand if the issue lies with me and my code first before committing, or perhaps something on her computer since it seems to work on other team members' computers. I just don't know enough about GSAP to point her in a direction to fix the scrolling on her computer if that is indeed the issue.

[Rodrigo]

Hi @pinksharpii and welcome to the GreenSock forums!

 

Performance is a deep topic that can have many moving parts and ways to affect/improve it. Right now I see that you're using a few number of images and moving them from the sides to the center. It seems that you're using xPercent for moving those. Is hard to think about that causing any issues in a particular browser. Perhaps you could try setting will-change: transform on those images' CSS in order to see if there is any improvement.

 

Are you both using the same computer with the same hardware? If so it could be other tabs opened or other apps clogging her CPU.

 

If you keep having issues I'd try to create everything inside an SVG canvas and move things in there since that will have it's own coordinates system, but I cannot guarantee you that there will be an improvement in performance. The best bet to get a great performance is using WebGL. I'd pick PIXI since I've used it in the pass with excellent results, but that will mean more work in order to set everything up properly and make it responsive. Not a lot of extra work, but you'd have to re-create everything.

 

Hopefully this helps.

Happy Tweening!