CODEWITHSUNDEEP
animationpathraphael
rohan_vg
rohan_vg

Reputation: 1129

raphaeljs continue animation from where first animation ended

I have this rectangle which after the first animation moves to a new position "x" and then the second animation starts after a delay of 2 seconds but the second animation starts from the original position instead of starting where the first animation ended. Is there any code that will set the position of the shape to were the first animation ended and resume the second animation from that very spot?

JS Fiddle

window.onload = function(){
    var paper = Raphael(0,0,600,400)

    var a = paper.path("M220,100 v20h-100v-20z");

    var anim = Raphael.animation({transform:'t160,10s2'}, 1000, "elastic");
    a.animate(anim.delay(1000));

    var anim2 = Raphael.animation({transform:'t10,190s2'}, 1000, "bounce");
    a.animate(anim2.delay(3000));
}​

Upvotes: 0

Views: 197

Answers (1)

Mudassir Ali
Mudassir Ali

Reputation: 8041

Use Callback function...

Call the second animation inside the call back function of the first animation,.... Updated Fiddle

Upvotes: 2

Related Questions