CODEWITHSUNDEEP
javascriptcssvariablesfonts
Xenitos
Xenitos

Reputation: 5

Animating a Variable Font using Javascript

I'm trying to animate a variable font's axis in Javascript, the axis is called 'FLUX' and it affects a vertical movement in the variable font. I got this part to work in CSS, however I would also like for the second axis, the 'wdth', to correspond to the viewport width. I got this to work in too, but in Javascript.

Now the issue is that both won't work simultaneously. I feel like the way to get this to work is to animate both axes in Javascript, however I cannot figure out how to achieve the 'FLUX' animation in Javascript, only CSS.

I've included a Codepen link to what I've been working on, you can see the Javascript works when the CSS animation is disabled, but with it enabled the CSS seems to override the Javascript.

https://codepen.io/Xenitos/pen/YMbboX

HTML

<html>
<head>
  <meta charset="UTF-8" />
  <title>Test Responsive Width</title>
<body>
  <div class="rapper">
    <h1 id="title">Flux</h1>
  </div>
</body>
</html>

CSS

body{
  padding: 0;
  margin: 0;
}

.rapper{
  padding: 20px;
}


#title{
  font-size: 20vw;
  color: black;
  font-family:"Flux";
  text-transform:uppercase;
  font-variation-settings: 'wdth' 400;
  animation: title infinite;
  animation-duration: 15s;
  animation-timing-function: ease;
}

@keyframes title  {
0%   {font-variation-settings:"FLUX" 400 ; }
50%   {font-variation-settings:"FLUX" 700 ; }
100% {font-variation-settings:"FLUX" 400 ;}
    }

JAVASCRIPT

$( document ).ready(function() {
  // Variables
  var $window = $(window);

  $window.resize(function(){

    $('#title').css('fontVariationSettings', "'wdth'" + ($window.width()-450)*100/(1920-450)*4);

  })
});

// End temp code for seeing browser width

The expected result is that the viewwidth is linked to the 'wdth' axis of the font and the 'FLUX' axis is animated on a infinitely on a loop.

Is there something I'm missing, or could someone please help me accomplish this entirely in Javascript?

Upvotes: 0

Views: 1760

Answers (2)

RoelN
RoelN

Reputation: 2321

The problem is that font-variation-settings will reset every axis that is not explicitly set.

For instance, in your CSS you set font-variation-settings: 'wdth' 400; and an animation that changes font-variation-settings: "FLUX" 400;. You would expect these would combine, but alas: the animation does not contain a value wdth so that will immediately be reset to its default value once the animation starts.

Likewise with the JavaScript part: CSS and JavaScript are fighting to set font-variation-settings, each undoing the other's settings.

So, at every step it's important to set both the values.

(Tip to get JavaScript and CSS to work together: instead of writing directly to font-variation-settings from JavaScript, write to a CSS variable and use that in the CSS/animation.)

Upvotes: 1

JPortillo
JPortillo

Reputation: 551

I think you are modifying the wrong variation setting in the @keyframes steps

@keyframes title  {
  0%   {font-variation-settings:"wdth" 400 ; }
  50%  {font-variation-settings:"wdth" 700 ; }
  100% {font-variation-settings:"wdth" 400 ;}
}

Upvotes: 0

Related Questions