Snap.svg animate

Question

I'm brand-new to JS, but am trying to pick up snap.svg. I'm trying to animate a circle that was created with snap, but I can't seem to get more than one thing to happen at a time. Right now, the circle changes color when it's 'moused over,' but I'd like it to 'pulsate' [change back and forth colors while the user is on the page. Any idea on how to do that?

Answer 1

you have to use the callback of the animate function to call the animation again, example:

fiddle: http://jsfiddle.net/LCxD7/11/

var paper = Snap('svg');
var circle = paper.circle(10,10,10);
var states = [{
    fill: '#bada55',
    cx: 10,
    cy: 10
}, {
    fill: '#55bada',
    cx: 100
}, {
    fill: '#ba55da',
    cy: 100
}, {
    fill: '#000000',
    cx: 10
}];

(function animateCircle(el, i) {
    el.animate(states[i], 1000, function() {
        animateCircle(el, ++i in states ? i : 0);
    })
})(circle, 0);