Jump to content
Search Community

Optimizing performance of multiple infinite horizontal loops

jessicsw test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

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...