JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<p class="label">Whole block</p>
<h1 class="anim-whole"><span>REDUCE RELAPSE RISK</span></h1>

<p class="label">Individual letters</p>
<h1 class="anim-letters">REDUCE RELAPSE RISK</h1>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

$charCount: 19;
$startY: 1rem;
$duration: 750ms;
$stagger: 20;

body {
  font-family: 'Open Sans', sans-serif;
  background: #272F6E;
  color: #FFF;
}

h1 {
  font-weight: bold;
  font-size: 4em;
  position: relative;
  line-height: 1.25;
  &:before {
    content: "";
    display: block;
    width: 3.75em;
    height: 0.5rem;
    left: 0.1em;
    background: #90D4EC;
    position: absolute;
  }
}

.anim-letters {
  display: flex;
  flex-wrap: wrap;
}

.anim-letters span {
  animation: fadeUp $duration forwards;
  opacity: 0;
  transform: translateY($startY); 
  display: block;
  min-width: 0.333em;
}

@for $i from 1 through $charCount {
  h1 span:nth-child(#{$i}) {
    animation-delay: #{$stagger * $i}ms;
  }
}

.anim-whole span {
  animation: fadeUp $duration forwards;
  opacity: 0;
  transform: translateY($startY); 
  display: block;
  min-width: 0.333em;
}

@keyframes fadeUp {
  from { 
   }
  to { 
    transform: translateY(0rem);
    opacity: 1;
   }
}

JavaScript

$(function() {
	var text = $('.anim-letters').text();
  
  $('.anim-letters').html(function() {
  	var html = "";
		for(var i = 0; i < text.length; i++) {
			html += '<span>' + text.charAt(i) + '</span>';
    }
    return html;
  });
  console.log(text.length);
});