Learn

someone say Way2logic from Bhuvan

<p><span class="line1">someone say</span> <span class="line2" data-splitting>Way2logic from Bhuvan
</span></p>

CSS (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);
  }
}

Usage

<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

JS (JAVA SCRIPT)

Splitting();

DOM o/p

<div data-splitting class="words chars splitting" style="--word-total:1; --char-total:3;"><span class="word" data-word="ABC" style="--word-index:0;"><span class="char" data-char="A" style="--char-index:0;">A</span><span class="char" data-char="B" style="--char-index:1;">B</span><span class="char" data-char="C" style="--char-index:2;">C</span></span></div>

from WordPress https://ift.tt/37WInJB
via IFTTT