JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animate-text">
  <p class="first-text">HTML</p><br>
</div>

SCSS

p:not(:first-child){
  display:none;
}
p{
  margin: 0 auto;
  font-size:24px;
}

JavaScript

var textClass = $(".first-text");
var text = textClass.text();
textClass.text("");
for (var i in text){
  $(textClass).animate({
    opacity: 0.25
  }, 200, function(){
  console.log(text);
    $(textClass).append(text.charAt(i));
  });
}