When I run the animate function nothing happens, what can I do to fix this?

Question

Here is a sample of my code, despite the duration it instantly alerts me that the Animate is Complete. Please help me, do I need to import a package. Is it the duration that is not working. It kinda just jumps to the end value.

rectangle1 = new SMF.UI.Rectangle({
        left : "20%",
        top : "10%",
        width : "60%",
        height : "20%",
        fillColor : "#FF00FF"
    });
page1.add(rectangle1);
rectangle1.animate({
    property : 'top',
    endValue : "30%",
    motionEase : SMF.UI.MotionEase.BOUNCE,
    duration : 3000,
    onFinish : function () {
        alert("Animate Completed");
    }
});

Answer 1

You can try to make animation after pageshow event fired. For example:

function page1_onShow() {

    setTimeout(animate,100)
}

function animate()
{
    rectangle1.animate({
        property : 'top',
        endValue : "30%",
        motionEase : SMF.UI.MotionEase.BOUNCE,
        duration : 3000,
        onFinish : function () {
            alert("Animate Completed");
        }
    });
}