Variable Font Animation

When to use this

• Animating font weight, width, or slant in response to hover, scroll, or cursor position.
• Creating per-character axis waves where each letter has a different weight/width along a sine curve.
• Building interactive typography where font properties respond to user input.
• Using custom variable font axes (GRAD, CASL, CRSV, MONO, etc.) for expressive type.
• Do NOT use this for splitting and moving individual characters (position, rotation); see gsap-splittext-kinetic-type instead.

Mental model

A variable font contains continuous design axes instead of discrete files per weight. font-variation-settings accepts named axes with numeric values. The standard registered axes are wght (weight, 100-900), wdth (width, 75-125%), slnt (slant, -90 to 90 degrees), ital (italic, 0-1), and opsz (optical size, 6-144pt).

Animating these axes means changing font-variation-settings over time. CSS can transition font-variation-settings natively (it interpolates between numeric values). JS can set it per-frame for more control.

The critical performance detail: every change to font-variation-settings triggers text layout. This means a full layout pass, not just a paint or composite. For a single headline, this is fine. For per-character animation on 50+ characters updating every frame, this can drop frames. The cost scales with the number of characters being laid out and the complexity of the font's variation tables.

Per-character animation requires splitting the text into individual <span> elements. Each span gets its own font-variation-settings. To avoid reflow (characters changing width as weight changes), either lock character widths with display: inline-block; width: <fixed> or use a font whose width axis is held constant while other axes change.