Jump to content
GreenSock

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

Font size animation sample

Recommended Posts

Hi,

 

Do you have change font size animation sample?

 

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

 

Thanks

Link to post
Share on other sites

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 :)

  • Like 4
Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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 ;)

  • Like 2
Link to post
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.

×