Sequencing animations

Live preview of the end result. In the main.js are presented three solutions:

• Callback hell style

• Promise chain style

• Async/Await style

Source and references

• MDN: Sequencing animations

• Start project files at MDN’s GitHub

• MDN: Web Animations API

• MDN: Using the Web Animations API

Project brief

In this assessment you’ll update a page to play a series of animations in a sequence. To do this you’ll use some of the techniques we learned in the How to use Promises article.

We want to update this page so we apply an animation to all three images, one after the other. So when the first has finished we animate the second, and when the second has finished we animate the third.

The animation is already defined in “main.js”: it just rotates the image and shrinks it until it disappears.

To give you more of an idea of how we want the page to work, have a look at the finished example. Note that the animations only run once: to see them run again, reload the page.