Jump to content
GreenSock

nagman

LetterSpacing not working with GSAP

Go to solution Solved by Diaco,

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 tried many times and I still can't figure why I can't animate letterSpacing.

When I set properties like margin or color or backgroundColor, it works, but the letterSpacing property won't.

 

Did I forgot something?

See the Pen by collection (@collection) on CodePen

Link to comment
Share on other sites

  • Solution

Hi nagman :)

 

for now pls try like this : 

TweenLite.fromTo("p",1,{letterSpacing:0},{letterSpacing:10});
  • Like 5
Link to comment
Share on other sites

Hellop nagman,

 

You can also makes sure you define the letter-spacing in your CSS if you want to use a to() tween. Since the browser will not know what the initial value is. It is always best practice to define your CSS properties in your style-sheet. Otherwise the browser has no clue what the initial value to tween from.

 

The letter-spacing default value is normal. So it is calculated differently in various modern browsers. So its always best to never presume the browsers defined style-sheet will have the default value set. Better to be safe than sorry ;)

 

So either define your letter-spacing CSS property in your style-sheet ahead of time. And animate like you were doing.

p{
  letter-spacing:0px;
}

Or to have greater control, its better to do as Diaco suggested and explicitly animate using a fromTo() tween so GSAP knows the starting and end values.

 

:)

  • Like 4
Link to comment
Share on other sites

I tried to set the letter-spacing in CSS first, but nothing happened.

Strangely enough, the only way it worked was with "fromTo".

 

Thanks you both!

Link to comment
Share on other sites

Hello again nagman,

 

It wasn't working for the to() tween because you did not have TweenMax loaded in the codepen JS panel.

 

See the Pen xwmQVZ by jonathan (@jonathan) on CodePen

 

You have to click that gear icon in the JS panel and you in the dropdown you will see GreenSock TweenMax as an option to add the script.

 

:)

Link to comment
Share on other sites

Yeah, I know, but why TweenMax is required?

I use TweenLite instead.

Link to comment
Share on other sites

TweenMax includes the CSSPlugin. If you only use TweenLite, then you must include the GSAP CSSPlugin script separately along with the TweenLite script. Since your trying to animate CSS properties.

Link to comment
Share on other sites

Yes, but I included it too (the CSSPlugin).

Actually, just to give a try, I have tested with tweenmax and it still won't work.

I can see the margin being animated but not the letterSpacing.

Link to comment
Share on other sites

That is weird.

 

If the CSS is set to zero, GSAP won't honor a .to tween to 16pixels letter-spacing. If you set the CSS to any other size for letter spacing, it works.

 

Zero works if you set the spacing with a GSAP .set.

 

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

  • Like 2
Link to comment
Share on other sites

Tested on Firefox and it works!

 

But Chrome/Safari uses webkit so there is a known webkit bug for letter-spacing. So this is not a GSAP bug. But a webkit browser bug:

 

webkit letter-spacing bug:

 

https://code.google.com/p/chromium/issues/detail?id=154289

 

And this, even though it shows as fixed, this bug is still breaking letter-spacing:

 

https://bugs.webkit.org/show_bug.cgi?id=20606

 

WebKit, in both Safari and Chrome, have a known issue handling the CSS letter-spacing property at certain small increments, and at certain font sizes. There used to be a workaround by using ems or adjust your font-size bigger with percentages or with a starting value of 1px. But those workarounds no longer work with this webkit bug. And if they do work the animation will be really choppy!

 

Again this is not a GSAP bug but  a browser webkit bug that affects webkit in Chrome and webkit Safari. We have no control over the way webkit renders. But webkit is littered with CSS rendering bugs.

 

Besides animating margin or letter-spacing will still not be smooth, since they will only animate on a pixel level, unlike CSS transforms which animate on a sub-pixel level for buttery smooth motion.

 

I would not use letter-spacing due to this webkit bug. You can just split each letter into divs yourself and animate separately.

 

Or your best bet is either use the GSAP SplitTextPlugin, which can separate your word into letters and than you can use transforms to animate the spacing between each letter. Here is a forked modified example of the GreenSock SplitTextPlugin animating each letter in

 

See the Pen zvyMaB by jonathan (@jonathan) on CodePen

 

And the original codepen by GreenSock using the SplitTextPlugin:

 

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

 

Keep in mind that the GSAP SplitTextPlugin is a Club GreenSock membership benefit. You must have a valid membership to use this class without violating the terms of use. Visit http://www.greensock.com/club/ to sign up or get more details.

 

:)

  • Like 3
Link to comment
Share on other sites

Good to know Jonathan. You're the man! :)

  • Like 1
Link to comment
Share on other sites

PointC, Nice finding to set the initial letter-spacing value in the CSS to 1px. Too bad webkit is a real poopy pants :)

  • Like 1
Link to comment
Share on other sites

I finally used the 1px initial value, and my animation works very well in Chrome.

Here's my codepen : 

See the Pen ojJVeW by anon (@anon) on CodePen

Link to comment
Share on other sites

nagman, The 1px might work in Chrome, but you will notice it really is not animating smooth due to that bug. It will animate choppy on a pixel level and will act more like a stepped ease instead of a smooth interpolation. Thats due to that webkit bug which cant handle fractional or floating integers. That is why i recommend separating the letters yourself into div tags, or with the SplitTextPlugin. And then animate with CSS transforms, which will animate on a buttery smooth sub-pixel level. :)

  • Like 1
Link to comment
Share on other sites

Yeah, but look at my codepen. I used autoRound:false, and the animation is very smooth (at least on my computer).

If you see that it's animated on a pixel level on your Chrome version, then I will use your solution.  :)

Link to comment
Share on other sites

I'm seeing mixed results.. on latest Android Chrome I see it choppy, on Windows 7 64-bit Desktop Chrome I see it less choppy. I don't have a iPhone and iPad near me to test apple WebKit.

Another reason i suggested not to animate letter-spacing was because of performance. Animating letter-spacing alters the geometry of the element. That means that it can affect the size or position of other elements on the page which will require the browser to perform layout of the elements in the DOM. Once those layout operations have completed any damaged pixels will need to be repainted and the page must then be recomposited together.

But if you animate using CSS transforms, changing the transform property will not trigger any painting or geometry changes, which is great. This means that the render of the page can be made on the compositor thread, using hardware acceleration on the GPU (your graphics card),

But you gotta do what you gotta do! I just suggested that other way of separating the letters into divs or using the SplitTextPlugin using CSS transforms (x, y, z), since that way would work cross browser and save you headaches debugging. And save you time to get it to work in all modern browsers, mobile and desktop :)

  • Like 2
Link to comment
Share on other sites

Great work guys!

 

Just chiming in to say that I agree 100% with Jonathan's assessment.

I don't think you are going to find a letter-spacing tween to work great across browsers with any animation engine due to the pixel-rounding and geometry changing. You will see the same kind of poor results even if you tween font-size, it generally just looks bad.

  • Like 2
Link to comment
Share on other sites

Ok guys, you convinced me.

I'm not using anymore letter-spacing for animations.

Actually I was using a hack in order to resolve the problem of the layout.

My text was larger than the screen at the beginning of the animation, so I wrapped it in a 300% large div with a 100% margin-left.

But with transform, it will be more simple.

 

Thanks!

  • Like 1
Link to comment
Share on other sites

Mmh... Finally, I wonder if letter-spacing wasn't better...

How do I animate spacing between letters WITHOUT animating each of them separately, in the SAME time (without stagger) and without using width or letter-spacing?

It's not possible!

I have to use letter-spacing - or instead width if it's more practical.

Link to comment
Share on other sites

nagman it is possible to animate text without letter-spacing, width or margin. Since all will affect layout and geometry like stated above.

 

For example, the GreenSock SplitTextPlugin just simply separates the text into either lines, words, or by characters. Or a mix of all three. It does all the heavy lifting for you. Otherwise you have to create your own custom JS to separate your text into div tags to animate. Or separate the etters hand by band. which means it won't be dynamic.

 

You then use GSAP to animate CSS transforms using x (translateX), y (translateY), and z (translateZ). And with along with transform-origin and perspective, and other CSS properies to create some really cool text effects.

 

Take a look at GreenSocks SplitTextPlugin Collection on codepen. You will see that it is possible and how you will be able to create any type of effect, and not worry about using buggy letter-spacing.

 

http://codepen.io/collection/KiEhr/

See the Pen by search (@search) on CodePen

 

Fork those codepens and play with them. Remember all SplitTextPlugin is doing is making it easy to split text cross browser. And then you just animate the elements with CSS using GSAP.

 

Check out this great video tut by Carl regarding SplitTextPlugin. He can explain it better than me:

 

 

:)

  • Like 1
Link to comment
Share on other sites

I'll definitely give a big +1 to Jonathan's advice about the SplitTextPlugin. 

 

You can do some really amazing text animations with minimal effort.

 

If you're hesitant to use it since it's a Club plugin, remember that you can certainly practice with it on CodePen so see if you like it first. (you will).

 

Who knows, maybe you'll like it so much you'll grab a Shockingly Green membership and get hooked on the Morph and ThrowProps plugins too. :)

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

  • 5 years later...
On 11/13/2015 at 11:28 AM, nagman said:

Hi,

 

I've tried many times and I still can't figure why I can't animate letterSpacing.

When I set properties like margin or color or backgroundColor, it works, but the letterSpacing property won't.

 

Did I forgot something?

See the Pen by collection (@collection) on CodePen

Another way is to set the value first:
gsap.set(element, {letterSpacing: 0})
and then you can animate it with with "gsap.to" method

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