<h1>
<span class="letter">A</span>
<span class="letter">N</span>
<span class="letter">I</span>
<span class="letter">M</span>
<span class="letter">E</span>
<div></div>
<span class="letter">I</span>
<span class="letter">S</span>
<div></div>
<span class="letter">C</span>
<span class="letter">O</span>
<span class="letter">O</span>
<span class="letter">L</span>
<span class="letter">!</span>
</h1>
.letter {
  display: inline-block;
  opacity: 0;
}

div {
  display: inline-block;
}
let animation = anime({
  targets: '.letter',
  opacity: 1,
  translateY: 50, 
  rotate: {
    value: 360,
    duration: 2000,
    easing: 'easeInExpo'
  }, 
  scale: anime.stagger([0.7, 1], {from: 'center'}), 
  delay: anime.stagger(100, {start: 1000}), 
  translateX: [-10, 30]
});                


  
  
  
     

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js