Why are slow jQuery animations choppy?

Question

I\'m having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding

Answer 1

I think it has something to do with how often you move an element. For example, if you move the object once every second, it will seem choppy. Try decreasing the amount of time between each move as well as decreasing the distance between each move. See http://jsfiddle.net/2K9xP/ for an example.

So we have...

var duration = Math.round(10 * distance);

instead of...

var duration = Math.round(1000 * distance);

Answer 2

I guess it's the inevitable bargain with doing animation programmatically. Maybe try a framework specialized in animation like:

http://www.greensock.com/gsap-js/

but adapting the animation to CSS would be best.

Answer 3

It's not much smoother even using a CSS transition.

I added the Transit jQuery plugin to test a CSS transition instead, and it looks almost the same.

Your code with minor fixes: http://jsfiddle.net/thirtydot/93Bqx/5/

Same code but with Transit added: http://jsfiddle.net/thirtydot/93Bqx/6/.

I think this is a limitation of the fact that (most?) browsers don't do subpixel rendering. As you mentioned, the x and y of the element is rounded after every step of the animation, and it's this rounding that causes the unsightly "jiggling" effect.

The CSS transition version does look noticeably better for less pathological test cases. Read this for more information: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/