Animated text on path keeps jumping / glitching

[Neal Fletcher 0 Likes (Newbie)]

I'm animating some text on a path back and forth, quite a simple animation but occasionally the type keeps jumping and glitching. If you watch the demo on codepen you'll see some letters, quite randomly and sporadically jump or flip over.

 

You might have to watch it a few times as some times it happens more than others – I can't seem to figure out why it's happening or find a fix, any ideas or help on this would be massively appreciated!

See the Pen oNoJjZg by neal_fletcher (@neal_fletcher) on CodePen

[OSUblake 18,497 Likes (Superhero)]

Welcome the forums @Neal Fletcher

 

That definitely seems like a browser rendering issue. I can remove GSAP from the equation and it still has the same issues.

 

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

 

Maybe some of our SVG gurus like @PointC might know of a workaround.

 

[PointC 14,429 Likes (Superhero)]

I think that's coming from the path. That path has some overlapping points. (Often the result of merging shapes.) Here's an example where I merged some shapes but left a tiny overlapping pair of points. See what happens by the green arrow?

 

See the Pen ea3c4bb6700dd3d2231b8b56004348de by PointC (@PointC) on CodePen

 

But when I clean up the path and get rid of the extra points, the glitch is gone.

 

See the Pen gOXNVPN by PointC (@PointC) on CodePen

 

Your current path has 24 points but only needs 18. I think if you clean up the points a bit, it should work correctly for you.

 

Happy tweening.

 

 

[OSUblake 18,497 Likes (Superhero)]

Nice one, @PointC

 

I just assumed it was a browser issue.