Bouncing ball demo

This simple demo shows how easy it is to set up some very effective animation with 'squeezing' effect.
Click on the ball to see animation.

The bouncing sequences in this demo and the fact that the ball's position is set to 'relative' causes a re-float of the whole page. This might cause a little delay in rendering. If you take the 4 last '.concat()' methods out of this code, the bouncing will not cause any delays any more...

var bounce = document.getElementById('bounce'),
    myMorph = new jsMorph(bounce, // x-axis
      {left: '600px'},
      {duration :3000},
    ).concat(bounce, // y-axis
      {top: (bounce.parentNode.offsetHeight-bounce.offsetTop-51)+'px'},
      {duration :1500},
    ).concat(bounce, // first bounce
      {height: '37px', width: '64px', 'margin-top': '24px'},
      {duration :80, delay : 550}
    ).concat(bounce, // first bounce over
      {height: '51px', width: '51px', 'margin-top': '0px'},
      {duration :100, delay : 650}
    ).concat(bounce, // second bounce
      {height: '41px', width: '59px', 'margin-top': '12px'},
      {duration :80, delay : 1020}
    ).concat(bounce, // second bounce over
      {height: '51px', width: '51px', 'margin-top': '0px'},
      {duration :90, delay : 1090}

bounce.onclick = myMorph.start;