CODEWITHSUNDEEP
javascriptsvgsnap.svgsvg-animate
George Wilson
George Wilson

Reputation: 5705

Zooming in/out with animate on hover with snap.svg

I'm building an SVG and animating it in snap.svg because of a lack of IE support for animations (thanks IE). What I have in it's most basic form is a pentagon I'd like to rotate on hover, on mouse out it then resets itself. Code is located in the fiddle below (obviously this is a cut down version of the real thing but it shows the bug clearly still)

The JS is as follows:

// Set up snap on the svg element
var svgElement = Snap("#svg");

// Create the hover on and off events
var hoverover = function() {
    svgElement.select('#pentagram-one').stop().animate({transform: 's1r72,500,515'}, 1000);
};
var hoverout  = function() {
    svgElement.select('#pentagram-one').stop().transform('s1R0,500,515');
};

// Set up the functions for hover in and out
svgElement.select('#pentagram-one').hover(hoverover, hoverout);

Fiddle demo of this behaviour here: http://jsfiddle.net/kfs8o9mw/

The pentagon rotates as expected on the first hover in then out. However when doing it a second time the pentagon zooms in and out a bit which is completely unexpected (it's ends up at the right size but during the animation isn't). And I've been able to replicate this in IE(10), Chrome and Firefox.

Is this a bug in snap.svg or is there something wrong in the code?

Thanks in advance

Upvotes: 0

Views: 2190

Answers (1)

Lodder
Lodder

Reputation: 19733

You simply can remove the s1 you have defined for the scale as show in the following:

Also note that you're using a capital R in the transform event for hoverout, when it should be a lowercase r

http://jsfiddle.net/3phpbef7/2/

I would also define you pentagram element as a variable as you're using it multiple times. I've also included this in the Fiddle above.

Hope this helps

Upvotes: 1

Related Questions