Last active
August 29, 2015 14:02
-
-
Save vivianspencer/6c5e73c124ef5ca0c764 to your computer and use it in GitHub Desktop.
Jquery snippet to animate SVG sprites with rotate and translate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* animate an SVG elemtent | |
* @param {object} el The element being animated | |
* @param {integer} x The x coordinate | |
* @param {integer} y The y coordinate | |
* @param {integer} deg The degree at which to rotate the element | |
* @param {integer} time The duration of the animation | |
*/ | |
var moveSprite = function(el,x,y,deg,time){ | |
var anim = $(el) | |
.stop(true, true) | |
.css('top', 0) | |
.animate({ | |
top: 10 | |
}, { | |
duration: time, | |
step: function(current, fx) { | |
$(fx.elem).attr('transform', 'translate(' + (current*(x/10)) + ',' + (current*(y/10)) + '), rotate(' + (current*(deg/10)) + ')'); | |
} | |
}); | |
$.when(anim).done(function(){ | |
setTimeout(function(){ | |
// callback goes here | |
}, 500); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment