Sequencing Animations Assessment -- Prompt #1 question

MDN Learn
#1

Hey y’all!

I have a solution to the prompt… but also a couple questions that I haven’t been able to confidently resolve.

In prompt 1, we are asked the following:

animate alice2 when alice1 has finished, and alice3 when alice2 has finished.

Implement something that works, but has the promise version of the “callback hell” problem we saw in our discussion of using callbacks.

a solution
a live solution is here

code in question from solution:

alice1.animate(aliceTumbling, aliceTiming);
const promise1 = alice1.animate(aliceTumbling, aliceTiming).finished;

promise1.then(() => {
  const promise2 = alice2.animate(aliceTumbling, aliceTiming).finished;
  promise2.then(() => {
alice3.animate(aliceTumbling, aliceTiming)
  });
});

questions

  • Can the functionality of this code be accomplished using nested callbacks but without the promise variables & .then()? (or setTimeout :slight_smile: )

  • If not redundant to your first answer, what might have been an implementation for this (just generally speaking) that pre-dates promises?

hope this makes sense… many thanks for your time here and elsewhere on the forum!

#2

Hello @bdfee

you doing great well done

by the way your email is displayed you can hide it from your profile page

i am not sure of that cause how i know if the animate finish it’s work or if i did not used setTimeout based on my setting for the animations

let me ask @mikoMK and @schalkneethling if they have any way for that

and have a nice day all of you :slight_smile:

1 Like
#3

Hi @bdfee

I’m not an expert on animations, but here are my thoughts.
I don’t think you can give a callback function to animate(). You could use the finish event of an animation to then call the next animation from there. I think we agree that using the promise approach in this example is easier. :grin:

Before the Web Animation API was created you would use setInterval() to repeatedly call a function that manipulates the style attribute of an element or adds/removes classes from the element. You could for example change the width of an element by setting different values to elem.style.width every call.
Later came the requestAnimationFrame() function to optimize the animation work of the browser while you still had to manually change the styles in the function.

I hope this gives you a little insight into this topic. :smiley:

Have a nice day,
Michael

2 Likes