Delay animation

[rizqinizamil]

How can I delay animation after finish (inside the loop), before the animation start again?

Thanks, Rizqi

[bendc]

Assuming I understood your question correctly, you could do something like this:

const params = new Map()
  .set("el", "div")
  .set("translateX", 200)
  .set("complete", () => animate(params.set("delay", 1000)));

animate(params);

[rizqinizamil]

Thanks @bendc, it works!

[rizqinizamil]

Hi @bendc, sorry I have another question. How can I limit the loop? For example I only want to play animation 5 times.

Thanks.

[bendc]

const runAnimation = n => {
  let count = 0;

  const repeat = () => {
    if (count == 1) params.set("delay", 1000);
    if (count++ == n) return;
    animate(params);
  };

  const params = new Map()
    .set("el", "div")
    .set("translateX", 200)
    .set("complete", repeat);

  repeat();
};

runAnimation(5); // run animation 5 times

[rizqinizamil]

Sorry I'm bad at JS. Would you please take a look why it can't be repeat 5 times? https://jsfiddle.net/tvh7qc37/

[bendc]

You forgot .set("complete", repeat). You might also want to use var count instead of let count for wider compatibility.

[rizqinizamil]

Many thanks again. Sorry for bothering you.