Delay animation
rizqinizamil opened this issue · comments
Rizqi Nizamil Putra commented
How can I delay animation after finish (inside the loop), before the animation start again?
Thanks,
Rizqi
Benjamin De Cock commented
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);
Rizqi Nizamil Putra commented
Thanks @bendc, it works!
Rizqi Nizamil Putra commented
Hi @bendc, sorry I have another question.
How can I limit the loop? For example I only want to play animation 5 times.
Thanks.
Benjamin De Cock commented
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
Rizqi Nizamil Putra commented
Sorry I'm bad at JS. Would you please take a look why it can't be repeat 5 times? https://jsfiddle.net/tvh7qc37/
Benjamin De Cock commented
You forgot .set("complete", repeat)
. You might also want to use var count
instead of let count
for wider compatibility.
Rizqi Nizamil Putra commented
Many thanks again. Sorry for bothering you.