How to animate a rectangle bottom up with Raphaël.js

// 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);