GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing javascript.info — Animate the ball bouncing to the right

back to the lesson

Animate the ball bouncing to the right

importance: 5

Make the ball bounce to the right. Like this:

Write the animation code. The distance to the left is 100px.

Take the solution of the previous task Animate the bouncing ball as the source.

In the task Animate the bouncing ball we had only one property to animate. Now we need one more: elem.style.left.

The horizontal coordinate changes by another law: it does not “bounce”, but gradually increases shifting the ball to the right.

We can write one more animate for it.

As the time function we could use linear, but something like makeEaseOut(quad) looks much better.

The code:

let height = field.clientHeight - ball.clientHeight;
let width = 100;

// animate top (bouncing)
animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw: function(progress) {
    ball.style.top = height * progress + 'px'
  }
});

// animate left (moving to the right)
animate({
  duration: 2000,
  timing: makeEaseOut(quad),
  draw: function(progress) {
    ball.style.left = width * progress + "px"
  }
});

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.