Ball Drop Animation

Page Elements

In our site we added the following page elements:

• Group 1: A text element and 2 pink vector images for the initial text and the 2 balls.

• Group 2: 12 vector images to create the maze.

• Group 3: A text element for the final text and 2 black vector images where the balls will fall to.

Code

We define three timeline animation constants:

1. maze_tl: The animation of the maze.

2. left_ball_tl: The animation of the left ball.

3. right_ball_tl: The animation of the right ball.

In the $w.onReady() function we declare all the elements we want to animate. We then manually order the maze child elements for the maze animation. The maze animation uses a loop that goes through the different wheels of the maze. After building the maze animation, we make sure to time the balls animation when the maze animation ends. For the balls animation, we perform calculations and then build separate ball paths for the left and right balls. The balls animation includes the exact computations of the horizontal and vertical journey each ball has to take in order to get to its final destination.