Timeline doesn't animate in float values

[SimonVonSchmude]

I wanted to test this simple looping animation using the timeline functionality. 
When the second animation eases out, it seems to stutter. Using the console, i found out that gsap assigns float values to the css for the first animation, but integer values for the second one, making it appear less smooth. How can i force gsap to use float precision? 

See the Pen bGZdKWG by SimonVonSchmude (@SimonVonSchmude) on CodePen

[mvaneijgen]

Hi @SimonVonSchmude welcome to the forum!

 

You can set the snap object to snap the values to specific increments, see the docs for more info https://gsap.com/docs/v3/GSAP/CorePlugins/Snap/

 

I don't know if this will solve your issue. I've personally never used letterSpacing to animate text I usually then gravitate to our SpiltText Plugin, this because I have the feeling the browser probably has to do something like repaint if you animate that property which is causing the issues you're seeing. With if you split the text in to individual characters you can animate properties like translateX and Y, which will be much more performant when animating. 

 

Still hope it helps and happy tweening! 

 

See the Pen GReJGdb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[SimonVonSchmude]

Thanks for your Answer!

 

I tried decreasing the snap value to 0.01, but still, the second animation only uses integer values...

[akapowl]

Welcome to the forum, Simon.

You can disable automatic rounding via autoRound - that should help.

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS#autoround

See the Pen ZEPGRNa by akapowl (@akapowl) on CodePen

[SimonVonSchmude]

That's what i was looking for!

For future reference, i optimized it a bit, including the snap (which increases performance (?!)) and made it prettier:

 

See the Pen OJqVwjW by SimonVonSchmude (@SimonVonSchmude) on CodePen