Font size animation sample

[janmd2014 0 Likes (Newbie)]

Hi,

 

Do you have change font size animation sample?

 

trying to check if it's possible to have zoom effect on font.

 

Thanks

[Jonathan 5,176 Likes (Superhero)]

Hello janmd2014, and welcome to the GreenSock Forum!

 

Here is an example that works cross browser to zoom an element without causing blurry text when animated. Working example:

 

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

 

The above just animates the scale of the element.. you could try and animate fontSize, but the results can become fuzzy fast.

 

The trick to making sure the text does not become blurry, is to make sure you use perspective. Sometimes you have to use transformPerspective, but it will depend on what HTML markup is used, and how the element is being animated. There are other techniques from keeping text become blurry, but the above is the most common.

 

Hope this helps

[dylan9o4 6 Likes (Newbie)]

My only addition to Jonathan's more extensive answer would be to never allow your text above a scale of "1", as that's when the blurring tends to occur in the browser. Even In the example provided above, if you were to set the scale above 1.0, you can see the blurring. So I would suggest setting the font-size initially to a large size, and adjust freely to scales beneath 1.0

 

Just thought it was worth noting.

[Jonathan 5,176 Likes (Superhero)]

yep Dylan9o4.. that is why in my codepen examples description and comments. i advise to keep scale below factor of 1. A few versions or several months ago Chrome fixed their antialias bug of blurry text for scale factor above 1. But now the bug is back .. so it's best to keep scale below factor of 1, so you don't get bamboozled by Chromes shenanigans