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 plex, 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!

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

A very simplified jsfiddle is here:

http://jsfiddle/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 plex, 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!

• javascript
• snap.svg

Share Improve this question Follow asked May 1, 2014 at 11:29 traummaschinetraummaschine 43988 silver badges1919 bronze badges 1

• 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 Commented May 1, 2014 at 12:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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 overe 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