Raphael .js animation resume () not working

Question

I have this piece of code ( in jsfiddle )

var paper = new Raphael('holder', 400, 100); var set = paper.set(); for(var i = 0; i < 10; i++) { var circle = paper.circle((i * 30) + 30, 20, 5); circle.attr({ fill: '#ff0' }); circle.animate(Raphael.animation({ transform: 's2,2' }, 2000).repeat('Infinity')); set.push(circle); } set.hover(function() { set.pause(); }, function() { set.resume(); // <- things get nasty here });​ 

---

Now that the mouse is in the set, set.pause() is called correctly, and all animations stop.
But when you leave the hover area, it does not resume the animation (s), instead I get the following error in the console:

Uncaught TypeError: cannot read the 'transform' property from undefined

I have no idea why this is happening; can anyone help?

Answer 1

In Safari / Firefox, after some time after freezing, I received this error message (using an uncompressed source at https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js ):

 `raphael.js`, line 2946: `e.totalOrigin is undefined` 

The only place where totalOrigin installed is the totalOrigin function:

 line 3072: function runAnimation(anim, element, percent, status, totalOrigin, times) { 

First, you call elproto.pause() (line 3352), then elproto.resume() (line 3361). pause() sets the paused property to true, resume() removes this property. But resume also calls the status() method immediately after removing the paused flag:

 var e = animationElements[i]; if (eve("raphael.anim.resume." + this.id, this, e.anim) !== false) { delete e.paused; this.status(e.anim, e.status); } 

The strange, incomplete elproto.status method (line 3323) is called only by elproto.setTime() and elproto.resume() . This function creates some complex return value, but no active code uses its return value, but only comment lines starting at line 2980.

This function also calls the runAnimation function if it has a value parameter:

  runAnimation(anim, this, -1, mmin(value, 1) ); totalOrigin should be passed here! ^^^ 

Unfortunately, it does not transmit anything to totalOrigin , and this is the cause of the error.

I tried adding the parameter totalOrigin based on line 3312:

  runAnimation(anim, this, -1, mmin(value, 1), this.attr()); 

While it works, it does not work properly.

As a second attempt, I commented the whole line:

  // runAnimation(anim, this, -1, mmin(value, 1)); 

Result: it works, but the time is wrong, perhaps the start time of the animation should be updated somewhere.

http://jsfiddle.net/7nGcR/26/ https://raw.github.com/gist/3067995/1e82de48eeacf98697b572efdc74c11a9b1d9d03/gistfile1.js

Answer 2

in the elproto.status method you need to replace (lines 5127-5128 in Raphael 2.1.4)

 runAnimation(anim, this, -1, mmin(value, 1)); return this; 

from

 for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) { e = animationElements[i]; runAnimation(anim, this, -1, mmin(value, 1), e.totalOrigin, e.repeat); return this; }