title: Issue with anime js ( Complete Function )
body: <p>I am trying to replicate the animation mentioned out in this link . </p>
  
  <p><a href="http://tobiasahlin.com/moving-letters/#13" rel="nofollow noreferrer">http://tobiasahlin.com/moving-letters/#13</a></p>
  
  <p>The difference is, once the fade out and over animation is complete i need to change the content and replace it with a new one. </p>
  
  <p>I have tried out to change the text using <code>anime js's</code> complete function . </p>
  
  <p>Have a look at the code.</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>var styleindex = 0;
         var stylearray = ["SEO","SMM"];
         function eachletter(){
          $('.l1').each(function(){
                $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "&lt;span class='letter'&gt;$&amp;&lt;/span&gt;"));
            });
            }
            eachletter();
            anime.timeline({loop: true})
                .add({
                targets: '.l1 .letter',
                translateY: [100,0],
                translateZ: 0,
                opacity: [0,1],
                easing: "easeOutExpo",
                duration: 1400,
                delay: function(el, i) {
                    return 300 + 30 * i;
                }
            }).add({
                targets: '.l1 .letter',
                translateY: [0,-100],
                opacity: [1,0],
                easing: "easeInExpo",
                duration: 1200,
                delay: function(el, i) {
                    return 100 + 30 * i;
                },
                 complete: function(anim) {
                     $(".l1").text(stylearray[styleindex]);
                      eachletter();
                     styleindex ++;
                }
            });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loader {
      width:100vw;
      height:100vh;
      background-color:#262626;
      position: fixed;
      left:0;
      top:0;
      z-index:1000;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .l1 {
      color:rgba(255,255,255,0.1);
      font-size:9vw
  }
  .l1 &gt; .letter {
      display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"&gt;&lt;/script&gt;
  &lt;div class="loader"&gt;
              &lt;h1 class="l1"&gt;WEB DEVELOPMENT&lt;/h1&gt;
         &lt;/div&gt;
         </code></pre>
  </div>
  </div>
  </p>
  
  <p>The animation terminates on after first. Where did i go wrong?</p>