Animate variable fonts?

Design help Custom code
1

I am working on a project at the moment and would like to animate variable fonts, is there any support for this in webflow, or if not any other resources that people are aware of?

I saw this: https://djr.com/fit/variable.html and wondered if I could adjust his code and embed in a custom code element. I am not familiar with code and don’t know if I could use something like this as a basis?

@keyframes animate-fit {
from {
font-variation-settings: “wdth” 0;
}
to {
font-variation-settings: “wdth” 1000;
}
}

div {
font-family: FitVF;
animation-name: animate-fit;
animation-direction: alternate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

Thanks!

John

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

I’m trying to do the same thing. Did you have any success with that bit of code?

3

I was able to get it working with

<style>

.animating {
  animation-duration: 3s;
  animation-name: font-animation;
}

@keyframes font-animation {
  from {
    font-variation-settings: 'wght' 500;
  }

  to {
    font-variation-settings: 'wght' 900;
  }
}

</style>

With the element I’m animating having the right font chosen from in Webflow Designer, having the .animating class, and with the variable font being included (uploaded).

Note also that the four-letter variable parameter fonts might be different for every font (e.g. 'wdth', 'wght', 'ital').