CSS and JavaScript for Variable Font Animation

Scripting
1

Hi guys, I have a shape variable font I want to make the html animation values to react audio frequency is that possible?

Thanks & Cheers,
Roland

2

This should be possible but you need to implement that in JavaScript.

1 Like
3

Thanks so much Georg!

Awesome! I would need to get / extract data from frequency as far as I understand, then somehow, define these values to the css:

@keyframes running {
from { font-variation-settings: “shape” 1; }
to { font-variation-settings: “shape” 42; }
}

Do you have any idea how to? what should be the numbers and the link between the css and js?

4

I changed your thread title in the hope that it attracts people more knowledgeable about JavaScript and audio input.

1 Like
5

Thanks so much Rainer!

6

Have a look at the Web Audio API where you can create an audio context and read analyse the sound at different timestamps.

As the audio plays, set font-variation-settings of your element to "SOME" 123 where SOME is the four letter name of your axis and 123 is the value you want to set. For example, if your axis ranges from 0 to 200 and the current loudness is 25%, set SOME to 50.

1 Like
7

Thank you very much Florian!

Super useful info, I’ll look into this and try to implement it. I might post what I got or if I stuck with it.

8

Take a look at Mandy Michael’s codepen experiments, for example this one (animates a variable font by sound): https://codepen.io/mandymichael/pen/OYpqdP

4 Likes
9

Wow that’s pretty amazing! Thank you for sharing!