Snap.svg error when passing a Snap.animation to Element.animate

Question

This Fiddle shows the bug I am facing. Is it really a bug or am I doing something wrong?

In the fiddle, hover both circles, the white one is properly animated and the black one disappears and an infinite loop is starting to throw errors in the console.

var animateCircleIn = Snap.animation({
    r: 15
}, 400, mina.backout);

var animateCircleOut = Snap.animation({
    r: 10
}, 400, mina.easein);

var paper = new Snap("svg");

// Bigger black circle that does not work, see the console
var c2 = paper.circle(60, 60, 30);
c2.hover(function () {
    console.log(this.animate);
    c2.animate(animateCircleIn); // Infinite loop of errors
});

Answer 1

I think its a bug you have discovered, in the source it looks like for a duration its looking at 'easing.dur' and not 'attr.dur', you can prove this by setting this in your object...

animateCircleIn.easing.dur = 400;
animateCircleOut.easing.dur = 400;

and it will work.

Highlighted in a fiddle here with it working. So I think you will have to do an odd workaround like above, or change the snap.svg.js source to match. (I'll see if I can get an update to github)

I think in snap.svg.js, ms = easing.dur; should be ms = attrs.dur; unless I'm missing something about how its set.

(git pull request was done, I think this is fixed in 0.4.1)