Skip to content

Instantly share code, notes, and snippets.

@vivianspencer
Last active August 29, 2015 14:02
Show Gist options
  • Save vivianspencer/6c5e73c124ef5ca0c764 to your computer and use it in GitHub Desktop.
Save vivianspencer/6c5e73c124ef5ca0c764 to your computer and use it in GitHub Desktop.
Jquery snippet to animate SVG sprites with rotate and translate
/**
* 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