Changing fontSize

[Devotee007 17 Likes (Newbie)]

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

[mikel 4,774 Likes (Superhero)]

Hi @Devotee007,

 

it could be like this pen ...

 

 

See the Pen GOWozZ?editors=1010 by mikeK (@mikeK) on CodePen

Happy tweening ...        Mikel

[OSUblake 18,477 Likes (Superhero)]

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.

 

 

 

 

[Jonathan 5,389 Likes (Superhero)]

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

[mikel 4,774 Likes (Superhero)]

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

 

[OSUblake 18,477 Likes (Superhero)]

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.  

 

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

 

 

 

[Devotee007 17 Likes (Newbie)]

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

[mikel 4,774 Likes (Superhero)]

Hi @OSUblake,

 

You never stop learning - even in old age.

 

Thanks for the hints ...

 

Mikel