Question

Is there any way to toggle the transformations you do in RaphaelJS? As of right now the below code works to make the circle bigger when clicked. What I need is to toggle the transformation so I can click again, and then the circle shrnks and moves back into place.

window.onload = function() {
    centerX = 300;
    centerY = 300;
    var paper = new Raphael(document.getElementById('canvas_container'), 900, 900);

    //setup main circle
    var mainCircle = paper.circle(centerX,centerY,90);
    mainCircle.attr(
        {
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width': 10,
            'stroke-linejoin': 'round',
            rotation: -90  
        }  
    );


    //when clicking main circle
    mainCircle.click( function(e) {

        //move and grow the main circle
        mainCircle.animate({cx:00, cy:00, r:100}, 1000, "easeout");
        mainCircle.animate({
                "transform": "s " + (s = 3)}, 1000, "easeout"
    });

});

Answer 1

There’s a simple trick you can apply to toggle animation attributes (or any object for that matter); put them in an array and call them alternately by referring to a numeric switch as the index:

var animAttrArr = [{
    "transform": "s 3"
}, {
    "transform": "s 1"
}],
    now = 1;

mainCircle.click(function (e) {
    this.animate(animAttrArr[+(now = !now)], 1000, "easeout");
});

We’re simply using the soft types in JavaScript to our benefit — numbers can be evaluated to boolean values and act as flags.

See a live demo on jsFiddle.

---

• As a side note, I’d suggest adding a call to stop() before triggering any animation, as to prevent overlapping animations, e.g.:

  this.stop().animate(animAttrArr[+(now = !now)], 1000, "easeout");
  

• As another side note, the code can be updated to support toggling of n > 2 transformations by extracting the modulo of the counter and the array length, and then increment it (thanks, @gion_13):

  this.stop().animate(animAttrArr[now++ % animAttrArr.length], 1000, "easeout");
  

  The modulo operation will take precedence over the increment, so don’t worry about hitting +Infinity (in case you got really concerned 🙂 ).