Since I did not find an easy way on how to animate a rectangle bottom up with Raphael.js while searching the net I thought it might be helpful to post my simple solution of a bottom up rectangle animation with Raphaël.js. So here it is:
// Create options object that specifies the rectangle var rect_opt = { width: 100, height: 200, x: 0, y: 0 } // Container that will contain animation (suppose document contains a div with id 'raphael') var div = document.getElementById('raphael'); // Create new raphael object var ctx = new Raphael(div, rect_opt.width, rect_opt.height); // Set animation speed var speed = 10000; /* * Create rectangle object with y-position at bottom by setting it to the specified height, * also give the rectangle a height of '0' to make it invisible before animation starts */ var rect = ctx.rect(rect_opt.x, rect_opt.height, rect_opt.width, 0); // Color the rectangle nicely rect.attr({ fill:'#289CFE', stroke:'none' }); /* * Animate the rectangle from bottom up by setting the height to the earlier specified * height and by setting the y-position to the top of the rectangle */ rect.animate({ y:rect_opt.y, height:rect_opt.height }, speed);
And here is how it looks like in action (infinite loop):