Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kareldonk

Animating letterSpacing

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I've been trying to animate the letterSpacing CSS value, but it's very jerky. The reason is that GSAP is rounding the letterspacing values to integer values.

So animating from letterspacing of 50px to 0px goes like this: 50, 50, 50, 49, 49, 49, 48, 48, 48, etc.. till 0.

 

But what I want is that it keeps the floatings point values which gives very smooth animation. Like this:

50, 49.999, 49.567, 49.333, 48.888, 48.555 etc. etc.

 

Is there a way to tell it not to round the values?

Link to comment
Share on other sites

Found it! Adding "autoRound:false" to the css parameters disabled it. :)

  • Like 1
Link to comment
Share on other sites

Yep, exactly. autoRound:false. But I believe that at least some browsers force the rounding to whole pixel values anyway, so even if GSAP sets it as a fraction, the browser rounds it for display so you still get the jumping. At least that's what I'm seeing in Chrome. 

Link to comment
Share on other sites

Yep I saw that in Chrome. But animation in Chrome is bad overall, lots of aliasing and hardware acceleration sucks. Firefox is better. But IE10 beats them all, is very smooth there.

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.
×