Animation waits to fully finish to start it over

3605 views javascript
3

Why is there a delay when the animation ends? I can't figure this out. When it does the first part, which is make the width 300px, then it does second part to return it back to 50px then it waits until all is over and only after that starts the animation again. Is there any way to make the blocks asynchronous? So that they don't wait for other blocks to finish the animation.

anime({
  targets: '.b-main > div',
  width: [
    { value: 300, duration: 1200},
    { value: 50, duration: 1200}
  ],
  easing: 'easeInOutBack',
  duration: 5000,
  delay: function(el, i, l) {
    return i * 300;
  },
  loop: true
});
.b-main > div {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 20px;
}
<script src="https://animejs.com/lib/anime.min.js"></script>

<div class="b-main">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
  <div class="b4"></div>
</div>

answered question
Add a Comment

1 Answer

9
Amadan 0 Comments

You have one animation that goes from 0% to 100%; at 0%, all blocks are at rest; at 100% as well; thus the delay.

The most obvious way would be to split your one animation into four, so the blocks are independent:

const targets = document.querySelectorAll('.b-main > div');

targets.forEach((target, i) =>
  setTimeout(() =>
    anime({
      targets: target,
      width: [
        { value: 300, duration: 1200},
        { value: 50, duration: 1200}
      ],
      easing: 'easeInOutBack',
      duration: 5000,
      loop: true
    }),
    i * 300
  )
);
.b-main > div {
  background-color: red;
  width: 50px;
  height: 30px;
  margin: 10px;
}
<script src="https://animejs.com/lib/anime.min.js"></script>

<div class="b-main">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
  <div class="b4"></div>
</div>

posted this

Please login first before posting an answer.

Ads

Categories