Jump to content
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi @OSUblake,

 

You never stop learning - even in old age.

 

Thanks for the hints ...

 

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.