Проблема с аниме JS (полная функция)

Question

Я пытаюсь воспроизвести анимацию, упомянутую в этой ссылке.

http://tobiasahlin.com/moving-letters/

Разница в том, что когда анимация исчезнет и закончится, мне нужно изменить контент и заменить его новым.

Я пытался изменить текст с помощью anime js's завершить функцию.

Посмотрите на код.

var styleindex = 0;
       var stylearray = ["SEO","SMM"];
       function eachletter(){
        $('.l1').each(function(){
              $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
          });
          }
          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 ++;
              }
          });

.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 > .letter {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="loader">
            <h1 class="l1">WEB DEVELOPMENT</h1>
       </div>
       

Анимация заканчивается после первой. Где я неправ?

Answer 1

Я думаю, когда complete событие аниме вызвано, eachletter() Функция заменяет текст сразу, поэтому возникла проблема.

Я отключил цикл аниме и обернул его в новую функцию do_animate(), а затем позвоните в eachletter() Кажется, работает нормально.

var styleindex = 0;
var stylearray = ["SEO","SMM", "WEB DEVELOPMENT"];

function eachletter() {
 $('.l1').each(function() {
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
 });
 do_animate();
}

eachletter();

function do_animate() {

 anime.timeline({ loop: false })
  .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]);

   styleindex ++;
   if (styleindex >= stylearray.length) {
    styleindex = 0;
   }
   eachletter();

  }
 });

}

.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 > .letter {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="loader">
            <h1 class="l1">WEB DEVELOPMENT</h1>
       </div>