Text horizontal inifinite loop performance

[decemberly]

I want to animate an infinite text loop, that runs horizontally through a svg mask.

I've tried the GSAP helper "horizontalLoop" (modified it a little to work with svg text), and it works pretty well, except that it's not as smooth as I would want it to be. The text stops and then moves faster to catch up sometimes (not much but noticeable).

All examples that I can find using the same helper seems to also have the same issue, so I think it's not related to the svg.
Any ideas on how to make it smoother? 

See the Pen JjeRBRX by decemberly (@decemberly) on CodePen

[mvaneijgen]

Hi @decemberly welcome to the forum! 

 

Has it maybe to do with the default ease of "power1.out" that every tween has by default in GSAP and setting  ease: "none", on your tween fixes the issue? 

[decemberly]

Thank you. Good suggestion! The ease is already set to "none" in the horizontalLoop helper (line 34), so it doesn't solve the issue.

[Cassie]

I can't replicate this, do you have steps to replicate or information about the browser/hardware you're on?

[GreenSock]

Yeah, I don't see any problems either. What are we missing @decemberly? 

[decemberly]

Okay, perhaps it's a hardware issue then. Thanks for testing!