Jump to content
GreenSock

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

Changing fontSize

Recommended Posts

Hi,

 

I'm doing a simple:

 

TweenMax.to(".btn-text", 1, { fontSize: 40});

 

Start size of the text is 20. When text change it scales to the left. I would like it to scale up "centered", is there a way to do that?

 

//Devotee007

Link to comment
Share on other sites

Can you put that in demo? It's hard to advice without seeing what you're doing. Sometimes animating font size may not be the best approach. Scaling might look better in some situations.

 

 

 

 

  • Like 5
Link to comment
Share on other sites

Hello @Devotee007 and Welcome to the GreenSock Forum!

 

Yeah that looks like your just missing the CSS property text-align: center like in @mikel codepen above.

 

But like @OSUblake advised, a codepen demo example will help us see what your doing with your code :)

  • Like 2
Link to comment
Share on other sites

Hi,

 

Animating font-size, scaling typo is always problematic.
If it's just a few words, I like to work with an SVG.
Everything is the finest: smooth and crystal clear!

 

See the Pen 5dc8c404d001ac7efa2cdff267e86dd6 by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

  • Like 2
Link to comment
Share on other sites

On 11/10/2017 at 2:13 PM, mikel said:

If it's just a few words, I like to work with an SVG.
Everything is the finest: smooth and crystal clear!

 

That's cheating. You're using paths.  :-o

 

On 11/10/2017 at 2:13 PM, mikel said:

Animating font-size, scaling typo is always problematic.

 

Chrome kind of ruined it. You have to use will-change, and scale down, not up. One of the 99 problems with will-change is that Chrome does a craptastic job of downsampling, so it starts to looking bad if you scale down too much.

 

See the Pen XzRGYX by osublake (@osublake) on CodePen

 

 

 

  • Like 1
Link to comment
Share on other sites

Thank you for all help! It works fine now. I only scale up two numbers from 20px to 40px and it looks OK. I have mananged to center it now with your help. :)

 

//Devotee007

Link to comment
Share on other sites

Hi @OSUblake,

 

You never stop learning - even in old age.

 

Thanks for the hints ...

 

Mikel

  • Like 1
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.
×