Question

I’m trying to rotate and revolve a Raphael shape simultaneously. Here’s what I’ve tried (100,100 is the center of canvas):

var revolve = Raphael.animation({transform: 'r360,100,100'},1000,"easein")
var rotate = Raphael.animation({transform: 'r360'},1000,"linear")
var ec = paper.ellipse(100,50,10,5).attr({
    fill: 'none',
    stroke: 'blue'
})

And the variety of ways I’ve tried to call the animation, each producing the described result:

1. second animation is overriding the first one:

   ec.animate(revolve).animate(rotate)
   

2. works fine but with some issues (metioned below):

   ec.animate({
       transform: 'r360,100,100r360'
   }, 1000, "easein")
   

3. second animation is overriding the first one, again:

   ec.animate({
       transform: 'r360,100,100'
   }, 1000, "easein")
   .animate({
       transform: 'r360'
   }, 1000, "easein")
   

* The problem with the second variation is that i cant vary the easing function for rotate and revolve separately. In addition, the transform:'...r360' is not working (overriding the first animation).

Here’s a working demo on jsFiddle for you to mess around with.

Answer 1

There’s no way of achieving that, apparently. To prove it you can chain both animations while using a delay on the second, and pass it with various values around 1000 (above and below). You’ll see the animation renderer is serial:

ec.animate(revolve)
ec.animate(rotate.delay(/*200*/1000));

In order for them to work simultaneously, you’d have to fit both transitions into one transition-string and pass it to a single animation object, much like you did on the second variation in your attempts (it seems there’s no real problem with it besides the limitation to define a different easing for each animation):

var revolveAndRotate = Raphael.animation({
    transform: 'r360,100,100r360'
}, 1000, "easein")

ec.animate(revolveAndRotate);​

​​​​
Here’s the updated jsFiddle to demonstrate it.