Jump to content
Search Community

Animating Variable Fonts

dada78 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

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


var tl = new TimelineMax();

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!

Link to comment
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
Link to comment
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
Link to comment
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.



  • Like 4
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...