Animate the ball

Make the ball bounce Click on the ball to see the result.

Write the code to animate it.
Start from the source document: tutorial/browser/animation/ball-bounce-src/index.html.

The ball, animate and a pack of delta functions from the article are attached.

Open solution

In HTML/CSS, the falling of the ball is changing it’s from initial 0 to bottom.

The largest top is field.clientHeight - ball.clientHeight, so that the top of the ball is exactly /ball height/ px over the bottom.

The function to use is, of course, bounce, with effect at the end.

Gives us the following pretty picture:

var img = document.getElementById('ball')
var field = document.getElementById('field')
img.onclick = function() {
  var from = 0
  var to = field.clientHeight - img.clientHeight
    delay: 20,
    duration: 1000,
    delta: makeEaseOut(bounce), 
    step: function(delta) { = to*delta + 'px'

The full solution is at tutorial/browser/animation/ball-bounce/index.html.


Donate to this project