Hourglass Animation

Page Elements

In our site we added the following page elements:

• A transparent image of an hourglass with a black background.

• A container box with the following elements:

• A white container box the size of the hourglass to create a white background (mask) for the hourglass animation.

• A group containing 5 circle vector images of different sizes and colors to create the balls in the hourglass.

• A group containing 1 rectangle vector image and 1 text element to create a custom button (flip button) to trigger the flipping hourglass animation.

• An additional identical rectangle vector image for the flip button animation.

Code

In the  $w.onReady() function we declare all the elements we want to animate. On mobile we also adjust the size of the hourglass to be compatible with mobile devices. Next we create the individual animations for each of the 3 animations:

1. balls_animation: Before creating the balls animation, we first position the balls in the hourglass at a random distance within our desired range. This allows the animation of the balls to be a bit different each time the hourglass is flipped. When doing this, we also make sure to perform certain calculations on the balls in the hourglass to mimic the behavior of sand particles moving in a real hourglass. Once the balls are positioned, we animate them to fall at our desired duration, delay, easing parameters, and x and y positions.

2. hourglass_animation: To flip the hourglass, we rotate the container with the hourglass balls and the hourglass mask by 180 degrees at a duration of 400 milliseconds. In our example, we want to run this animation automatically every 8 seconds. We simplify this by using states. Since there are 2 possible states of the hourglass, upright or flipped, we set an animation state to flip the hourglass according to that state. We then use a setTimeout() function to switch states after 8 seconds.

See the 2 states below:

• State 1: The hourglass is upright, and the balls have already fallen. In this state, we set the hourglass flip animation to play (the hourglass to flip), and the balls animation to reverse (the balls to fall again).

• State 2: The hourglass is flipped, and the balls haven’t fallen yet. In this state, we set the hourglass flip animation to reverse (the hourglass to go back to its upright position), and the balls animation to play (the balls to fall).

We also include the functionality of running this animation when the user clicks on the flip button by adding an onClick() event handler to the flip button.

3. button_animation: When the user hovers over the flip button, we move the flip button down and to the right, and the rectangle vector image up and to the left. This gives an illusion that the rectangle vector image slid under the button.