Hi! Here are my solution for solving the “Sequencing Animation” challenge. I’m not sure they are the best solution but it’seems work.
const aliceTumbling = [
{ transform: “rotate(0) scale(1)” },
{ transform: “rotate(360deg) scale(0)” },
];
const aliceTiming = {
duration: 2000,
iterations: 1,
fill: “forwards”,
};
const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");
//Callback Hell implementation
/* function doAlice () {
alice1.animate(aliceTumbling, aliceTiming);
setTimeout(() => {
alice2.animate(aliceTumbling, aliceTiming);
}, 1000);
setTimeout(() => {
alice3.animate(aliceTumbling, aliceTiming);
}, 2000);
}doAlice();
*/
//Promise implementation
/*
function doAlice() {
alice1.animate(aliceTumbling, aliceTiming).finished
.then(()=> alice2.animate(aliceTumbling, aliceTiming).finished)
.then(()=> alice3.animate(aliceTumbling, aliceTiming))
.catch((error) => {
console.error(Could not get products: ${error});
});
}doAlice();
*/
//Async-Await implementation
/*
async function doAlice() {
try {
await alice1.animate(aliceTumbling, aliceTiming).finished;
await alice2.animate(aliceTumbling, aliceTiming).finished;
await alice3.animate(aliceTumbling, aliceTiming);
}
catch (error) {
console.error(Could not run sequence: ${error})
}
}doAlice();
*/
