Jump to content
GreenSock

Creativist-Lab

letterSpacing not smooth

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

thanks for the suggestion!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×