Issue with anime js ( Complete Function )

Question

I am trying to replicate the animation mentioned out in this link .

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

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.

I have tried out to change the text using anime js's complete function .

Have a look at the code.

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>

The animation terminates on after first. Where did i go wrong?

score 5 · Accepted Answer · answered Jul 26 '18 at 06:59

I think when the complete event of anime triggered, the eachletter() function replaces text immediately, so the problem caused.

I turned off the loop of anime and wrapped it into the new function do_animate(), then call it in eachletter() seems to be working fine.

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>

Issue with anime js ( Complete Function )

1 Answers1