Jump to content
Search Community

Font size animation sample

janmd2014 test
Moderator Tag

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

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 comment
Share on other sites

  • 7 months later...

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 comment
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 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.
×
×
  • Create New...