Infinite marquee animation is jerky (isn't totally smooth) sometimes

[Banddev]

I have an infinite marquee animation on all sides of the page.

The linked animation is jerky or isn't totally smooth, sometimes the repeat is not working well so you can easily see that there is something wrong, basically the repeat jump/glitch in a weird way

the problem is that it is not happening all the time, but sometimes, so I am unsure how to show you the issue.

maybe it uses too much CPU, can't keep going with the calculations, and it gets mad?

is there a more "CPU efficient way" to do this animation?

I feel like I am overcomplicating a simple animation but I am not sure how to improve it in order to make it smoother.

thanks

 

edit: I created a screencast video so it would be easier to see the issue see > 

 

See the Pen abRGrbo?editors=1010 by mp1985 (@mp1985) on CodePen

[Rodrigo]

Hi,

 

You could give the Horizontal and Vertical endless loop helper functions a try and see if it improves performance:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Here  is an example of the Horizontal function:

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

 

Here is an example of the Vertical version

See the Pen MWXPgKm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Banddev]

thanks @Rodrigo

 

how can I check if it is a performance issue or just something wrong with my code?

do you think that an infinite animation on 28 elements will have a crazy impact on performance and can cause this problem?

is there too much going on and the browser can get mad with the calculations?

 

[GreenSock]

3 hours ago, Banddev said:

how can I check if it is a performance issue or just something wrong with my code?

Use Dev Tools to do a performance audit. That's a very deep topic and beyond the scope of help we can provide for free in these forums, but you are welcome to contact us if you'd like to explore paid consulting services. 

 

That "jump" in your video certainly looks to me like a logic issue, not a performance issue. 

 

3 hours ago, Banddev said:

do you think that an infinite animation on 28 elements will have a crazy impact on performance and can cause this problem?

It's not usually about the number of elements necessarily (I've had 3000 going at one time with excellent FPS) - it's much more about a lot of other factors like how many pixels you're asking the browser to repaint on every tick, which properties you're animating, whether those cause reflow, and MANY other factors. Performance problems are almost never due to the GSAP code. I'd guess that 95%+ of the time it comes down to graphics rendering bottlenecks in the browser. 

 

Be careful about having really tall/long elements animating because you're asking the browser to repaint a LOT of pixels on every tick. Try adding will-change to any elements you're animating too. 

 

Good luck!