Skip to content

Instantly share code, notes, and snippets.

@argyleink
Created April 22, 2013 21:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save argyleink/5438776 to your computer and use it in GitHub Desktop.
Save argyleink/5438776 to your computer and use it in GitHub Desktop.
Source: http://cameronspear.com/blog/animating-translate3d-with-jquery/ Plugin so jquery supports animating translate3d positions with callbacks
;(function($) {
var delay = 0;
$.fn.translate3d = function(translations, speed, easing, complete) {
var opt = $.speed(speed, easing, complete);
opt.easing = opt.easing || 'ease';
translations = $.extend({x: 0, y: 0, z: 0}, translations);
return this.each(function() {
var $this = $(this);
$this.css({
transitionDuration: opt.duration + 'ms',
transitionTimingFunction: opt.easing,
transform: 'translate3d(' + translations.x + 'px, ' + translations.y + 'px, ' + translations.z + 'px)'
});
setTimeout(function() {
$this.css({
transitionDuration: '0s',
transitionTimingFunction: 'ease'
});
opt.complete();
}, opt.duration + (delay || 0));
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment