Parallel Animation Group

Exercise 1 - Make a Parallel Group

Groupings are important so let's get started on the exercise

In this exercise, create a parallel group of animation that has 3 different animations. Each children should run 300px, 500px, 700px from top respectively for 5 seconds.

Hint: you should first create the children then include the children into the group. You might also need to create more animation divs in the html section and change their colour depends on your preferences.

Show Solution

var A = new Animation(document.querySelector("#a"), 
        {top: "300px"}, 5); 

        var B = new Animation(document.querySelector("#b"), 
        {top: "500px"}, 5); 

        var C = new Animation(document.querySelector("#c"), 
        {top: "700px"}, 5); 

        new AnimationGroup([A, B, C]);