Jump to content
GreenSock

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

Animating Variable Fonts

Recommended Posts

HI, this is just a general question in terms of syntax, when animating variable fonts:

 

var tl = new TimelineMax();

tl.
staggerFrom(splitTxt1.chars, 4, {fontVariationSettings: 'wght' 700}, 0.01)

I assume using 'fontVariationSettings', is not the correct syntax to animate variable font weight ...Any help would be much appreciated! Thanks!

Share this post


Link to post
Share on other sites

Hey dada78,

 

I believe that the main issue is that 'wght' 700 is not a valid value. You'd need to concatenate like so: 'wght ' + 700

 

 However, GSAP doesn't really know how to animate this either as it's a string. I think most people animate variable fonts by using CSS variables. GSAP has a Quick Tip dedicated to animating those:

 

There's also this demo animating a variable font using GSAP:

 

See the Pen GPqQaB?editors=0010 by osublake (@osublake) on CodePen

 

But you can use font-variation-settings if you'd like to. You could even put it in an onUpdate and animate the fontWeight instead to have fallback support for browsers that don't support variable fonts, like so:

 

See the Pen RwboYOy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thanks for posting this question - I've been wanting to use GSAP with variable fonts and this was a good start :) 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks @ZachSaucier that is extremely helpful, but what I don't understand is why I would need to use the update function? I could just animate fontWeight without it? Or is there a difference? Thanks!

Share this post


Link to post
Share on other sites
6 minutes ago, dada78 said:

why I would need to use the update function? I could just animate fontWeight without it?

fontVariationSettings is what you call a shorthand. GSAP doesn't animate most shorthands because it's tough to know exactly what the person is trying to do. 

 

I tried just animating fontWeight but it didn't seem to have inbetween states in the demo above when I tried it, it just jumped from 700 to 400, etc. (you can test it yourself by removing the onUpdate). It may work in your case, I'm not sure because I don't really understand everything that's going on with variable fonts at this point.

  • Like 1

Share this post


Link to post
Share on other sites

Hm, I removed the update function and it does indeed animate the fontWeight:

 

 

See the Pen BaBQqNb by dada78 (@dada78) on CodePen

Share this post


Link to post
Share on other sites
35 minutes ago, dada78 said:

Hm, I removed the update function and it does indeed animate the fontWeight:

 

Yes, but it's very choppy because it can't animate the in-between values. 

 

To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some.

 https://v-fonts.com

 

  • Like 2

Share this post


Link to post
Share on other sites

Hi @OSUblake, just saw the stackoverflow you posted! Will check out the variable fonts. Thanks!

 

 

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.

×