Question

I have drawn a box. The first animation makes the box move horizontally and the second one moves the box vertically. But when the second animation is executed the box first comes back to its original position and then animates vertically. What I want is that the box shouldn’t come back to its original position and where the first animation ends, the second animation must execute exactly from that position. How can I achieve this? What am I doing wrong?

JS Fiddle Code

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

    var hi = paper.rect(10,10,100,30);

    var move1 = Raphael.animation({
        transform:'t100,0'
    },1000);

    var move2 = Raphael.animation({
        transform:'t0,100'
    },1000);

    hi.animate(move1);    
    hi.animate(move2.delay(1000)); 
}​

Answer 1

Hey here’s the updated working fiddle

The reason being as you may know small t transforms relative to the current position of the rectangle. By current position it means the x and y attributes of the element, the rectangle in our case.

But the first line in Element.transform says

 translation doesn’t change x or y of the rectangle 

Which means after you perform 't100,0' the x & y attributes of the rectangle is still the initial 10,10 Hence the second animation is executed with respect to 10, 10

Finally, for the result you are expecting, you need to be able to change x & y attributes which can be done as shown in the fiddle….Hope this helps !