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:

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!

Feels a bit clunky to do it that way. Feels natural to just set the state of the attribute animated back to what it was (you could even probably write a small func to save the original attribute of an element). Alternately you could clone an element and readd, but then I wonder if that would remove handlers etc, so I find that idea all messy. — Ian, May 01 '14 at 12:28

score 2 · Answer 1 · answered May 27 '14 at 16:39

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.

score 0 · Accepted Answer · answered May 01 '14 at 12:54

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

Thanks, this worked - though you were right, in most cases it was easier just to reset each animation differently. But in short, good to know that there isn't a simple function to simply 'reset' animations. (though it would be handy!) — traummaschine, May 12 '14 at 13:29

Snap SVG animate SVG on hover / reset SVG on leave

2 Answers2