JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<h2>
Basic animation
</h2>
<div class="animate">
   <span>T</span>
   <span>e</span>
   <span>x</span>
   <span>t</span>
</div>
<h2>Handwritting</h2>
<div class="handwritting">
   <span>T</span>
   <span>e</span>
   <span>x</span>
   <span>t</span>
</div>

CSS

.animate span {
  transform: translateX(50px);
  transition-duration: 1s;
  border-radius: 50%;
  display: inline-block;
}
.handwritting span{
  opacity: 0;
}

JavaScript

anime({
	targets: '.animate span',
  translateX: '0',
  duration: 300,
  delay: function (_, i) {
     return i * 100
  }
})
anime({
	targets: '.handwritting span',
  opacity: 1,
  duration: 5000,
  delay: function (_, i) {
     return i * 100
  }
})