Snap SVG animate SVG on hover / reset SVG on leave

Question

I'm using Snap.svg to create some SVGs that animate on hover.

A very simplified jsfiddle is here:

http://jsfiddle.net/62UA7/2/

var s = Snap("#svg");
var smallCircle = s.circle(100, 150, 70);

//animation
function animateSVG(){
    smallCircle.animate({cy: 300}, 5000,mina.bounce);
    smallCircle.animate({fill:"red"},200);
}

//reset function?
function resetSVG(){
    // something here to reset SVG??
}

smallCircle.mouseover(animateSVG,resetSVG);

The hover / animation is working fine.

The intention is to stop the animation and return to original SVG state if the user moves the mouse off the SVG - and this is where I'm currently stuck.

The actual SVG files I'm using are complex, so hoping for a quick way of 'refreshing' the SVG rather than manually moving it back to original position and colour

I'm assuming there's a really easy way of doing this - just can't seem to work it out or find the answer in any documentation anywhere.

Hopefully someone can help - thanks in advance if you can!

Answer 1

Personally I'd probably do it something like the following, storing it in a data element. It depends what problems you are really trying to overcome though, how you are actually animating it (I suspect it could be easier than my solution with certain animations, but trying to think of something that covers most bases), and if you really need it reset, also how many attributes you are animating and if there is other stuff going on...

var smallCircle = s.circle(100, 150, 70);
var saveAttributes = ['fill', 'cy'];

Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.resetSVG = function() {
      this.stop();
      for( var a=0; a<saveAttributes.length; a++) {
         if( this.data( saveAttributes[a] ) ) {
            this.attr( saveAttributes[a], this.data( saveAttributes[a] ) );   
         };
      };
    };

    Element.prototype.storeAttributes = function() {
      for( var a=0; a<saveAttributes.length; a++) {
        if( this.attr( saveAttributes[a]) ) {
            this.data( saveAttributes[a], this.attr( saveAttributes[a] ) );
        };
      };
    };

});

function animateSVG(){
    smallCircle.animate({cy: 300}, 5000,mina.bounce);
    smallCircle.animate({fill:"red"},200);
};

smallCircle.storeAttributes();
smallCircle.mouseover( animateSVG );
smallCircle.mouseout( smallCircle.resetSVG );

jsfiddle

Answer 2

If you are only willing to animate between 2 states I found that Codrops animated svg icons did great job with handling this type of snap.svg animations. I have started using their code as a basis for my future exploration of SNAP.SVG. But getting back to the code: the most fun part is that you configure your animation with simple JSON objects such as:

plus : { 
    url : 'plus',
    animation : [
        { 
            el : 'path:nth-child(1)', 
            animProperties : { 
                from : { val : '{"transform" : "r0 32 32", "opacity" : 1}' }, 
                to : { val : '{"transform" : "r180 32 32", "opacity" : 0}' }
            } 
        },
        { 
            el : 'path:nth-child(2)', 
            animProperties : { 
                from : { val : '{"transform" : "r0 32 32"}' }, 
                to : { val : '{"transform" : "r180 32 32"}' }
            } 
        }
    ]
},

and you can easily attach any sort of event trigger for animation In/Out. Hope that helps.