letterSpacing not smooth

[Creativist-Lab 13 Likes (Newbie)]

Hello all,

 

I'm trying to animate letterSpacing but the result is not very smooth (see CodePen) is there anything I can do to make it look more smooth?

 

Thanks in advance!

See the Pen jOGxpvo by JeroenVn (@JeroenVn) on CodePen

[akapowl 4,435 Likes (Superhero)]

Hello @Creativist-Lab

 

Try setting autoRound: false

 

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

 

Found in this thread

 

 

And this is from the docs:

 

autoRound

By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you’d rather disable that behavior, pass autoRound: false in the CSS object. You can still use the SnapPlugin to manually define properties that you want rounded.

 

[Cassie 3,699 Likes (Superhero)]

TIL 🧠

Thanks @akapowl

[Creativist-Lab 13 Likes (Newbie)]

Thanks @akapowl I did search the forum first but I didn't find this thread, sorry. Thanks for taking the time to answer

[Carl 10,745 Likes (Superhero)]

Just in case you want to take this type of effect a little further, here's a demo from one of my courses.

You can remove the scale and opacity entirely if you want and get loads of variation by tweaking the values in the distributor configs.

SInce the horizontal motion is being achieved via an x transform you should get better overall performance than letter-spacing.

 

See the Pen yLyqVWQ?editors=0010 by snorkltv (@snorkltv) on CodePen

[Creativist-Lab 13 Likes (Newbie)]

Thanks @Carl! I purchased your courses last year and they have been a great help, I haven't finished all the tutorials and definitely missed this particular one. May I suggest one thing for your courses? I think it would be a great option to have a notes section underneath the title of each lesson for example. What I notice now is that I run into a solution for a particular problem but with no option to note that down I often find myself scrolling through each video to try to remember where I saw the solution.

For the rest, thanks for making such great tutorials!

[Carl 10,745 Likes (Superhero)]

thanks for the suggestion!