Variable Font Fun (CSS Animation Version)

index.html

<p><span class="line1">Did someone say</span> <span class="line2" data-splitting>Variable Fonts?</span></p>

script.js

Splitting();

scripts

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

style.scss

@font-face {
  font-family: 'Roboto VF';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Roboto-VF.woff2") format("woff2-variations");
  font-stretch: 75% 100%;
  font-style: oblique 0deg 12deg;
  font-weight: 100 900;
}
* {
  box-sizing: border-box;
}
:root {
  --text-weight: 500;
  --text-width: 100;
  --text-slant: 0;
}
body {
  font-family: "Roboto VF", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #262626;
  color: #fff;
  padding: 7vmin;
}
p {
  max-width: 45ch;
  text-align: center;
  font-size: 10vw;
}
.line1,
.line2 {
  display: block;
}
.line1 {
  font-size: 3vw;
  font-weight: 845;
  color: #ffffff2e;
}
.splitting {
  --text-weight-min: 100;
  --text-weight-max: 900;
  --text-slant-min: 1;
  --text-slant-max: 12;
  --text-width-min: 75;
  --text-width-max: 100;
  --glow-hue-min: 0;
  --glow-hue-max: 255;
  --glow-size-min: 0;
  --glow-size-max: 15;
  --glow-lightness: 57%;
  --delay: 0;
  --duration: 3s;
  --percent: 0;
}
.char {
  font-stretch: var(--text-width);
  font-style: oblique var(--text-slant);
  font-weight: var(--text-weight);
  animation: wave var(--duration) ease-in-out var(--delay) infinite alternate;
  animation-fill-mode: backwards;
  --percent: calc(var(--char-index) / var(--char-total));
  // --val1: calc(2 * var(--percent) - 1);
  // --val2: calc((var(--val1) * var(--val1)) * -1 + 1);
  --delay: calc(var(--percent) * var(--duration));
  --glow-hue: calc(var(--percent) * 510);
}
@keyframes wave {
  0% {
    font-variation-settings: 
      "wght" var(--text-weight-min),
      "wdth" var(--text-width-min),
      "slnt" var(--text-slant-min);
    text-shadow: 0 0 calc(var(--glow-size-min) * 1px) hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
  }
  50% {
    font-variation-settings: 
      "wght" var(--text-weight-max),
      "wdth" var(--text-width-max),
      "slnt" var(--text-slant-max);
    text-shadow: 0 0 calc(var(--glow-size-max) * 1px) hsla(calc(var(--glow-hue) + 255), 100%, var(--glow-lightness), 1);
  }
  100% {
    font-variation-settings: 
      "wght" var(--text-weight-min),
      "wdth" var(--text-width-min),
      "slnt" var(--text-slant-min);
    text-shadow: 0 0 calc(var(--glow-size-min) * 1px) hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
  }
}

variable-font-fun-css-animation-version.markdown

Variable Font Fun (CSS Animation Version)

Everybody's doing it! (Having fun with variables fonts that is.) I wanted to take them for a test drive myself and added in a bit of rainbow glow while I was at it.

This fork: This version exclusively uses CSS for the animation. No more requestAnimationFrame loop as in the original. The only JS being used is to split the text into individual characters using the lovely Splitting library.

Original: https://codepen.io/electricgarden/pen/BaabNem

Here's the link to Roboto VF: https://github.com/TypeNetwork/Roboto

Splitting.js https://splitting.js.org/

A Pen by Tyler Durrett on CodePen.

License.