Optimizing performance of multiple infinite horizontal loops

[jessicsw]

Hello GreenSock! 🙂

Demo: https://stackblitz.com/edit/gsap-react-basic-f48716-oxkkxz?file=src%2FApp.js

I'm hoping to learn a bit more about the implementation set up in the demo link. For reference, I followed the GS CodePen example below. I've been observing an inconsistent jitter in the animation when scrolling and was wondering:
 

• What areas should I be looking into to troubleshoot this?
• Is the current implementation still the best approach when handling multiple infinite horizontal loops?
   

Appreciate any insight on this!

See the Pen NWBLzWy by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi @jessicsw and welcome to the GreenSock forums!

 

Given the current setup you have I don't know what can be improved. I tested in a very old laptop (10+ years) and I don't see any jittering. Since the helper function is optimized enough already. What you could try is use will-change: transform for the <li> element:

 

https://stackblitz.com/edit/gsap-react-basic-f48716-ro4uan?file=src%2FApp.js,src%2Fstyle.css

 

Beyond that I don't know what else can be done.

 

Regarding the current approach you have, it seems to work very well, so I wouldn't change anything as long as it works as expected: If it ain't broken, don't fix it

 

Hopefully this helps.

Happy Tweening!

[jessicsw]

Hi @Rodrigo! 

Thanks for taking a look and testing the animation on an older machine. I'll check out your suggestion to use will-change.