The following demos are not best practice examples, they should just show what you can do with jsMorph.
Most of the demos can be found in the Plugins section as real usable plugins.
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},
cubicEaseOut
).concat(bounce, // y-axis
{top: (bounce.parentNode.offsetHeight-bounce.offsetTop-51)+'px'},
{duration :1500},
bounceEaseOut
).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;