title: How to add fade in animation for each word in text
body: <p>I have some text "Eat. Sleep. Repeat.". I want Each word to slide up and fade in, one by one. So Eat fades in, then Sleep, the Repeat. I tried many different methods such as using anime.js, keyframes, adding css class, etc. but none of them got the job done. Here is my code at the moment.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function findelem(tag, text) {
        var x = document.getElementsByTagName(tag);
        for (var i = 0; i &lt; x.length; i++) {
          if (x[i].innerHTML == text) {
            return x[i];
          }
        }
        return null;
      }
  
      function wrapWords (text) {
        words = text.innerHTML.split(" ");
        text.innerHTML = "";
        for (var i = 0; i &lt; words.length; i++) {
          text.innerHTML += "&lt;span style = \"opacity: 0; position: relative; top: 30px;\"&gt;" + words[i] +  " " + "&lt;/span&gt;";
        }
        return text.children
     }
      function animatetext (wordarr) {
        anime({
          targets: wordarr,
          translateY: -30,
          duration: 3000,
          opacity: 1,
          delay: anime.stagger(1000),
        });
      }
  
      window.onload = function () {
        x = findelem("H1", "Eat. Sleep. Repeat.");
        xarr = wrapWords(x);
        animatetext(xarr);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;&lt;/script&gt;
  &lt;h1&gt;Eat. Sleep. Repeat.&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>