CODEWITHSUNDEEP
javascriptjquerycssanimationvelocity.js
Ilya Suzdalnitski
Ilya Suzdalnitski

Reputation: 53540

Javascript animations jerky

I've tried using both jQuery's .animate and velocity.js to perform circular movement. However no matter what I do the animation is jerky - you can see the elements snapping to a pixel grid; you can for example see the elements moving one pixel to the right, and one pixel down afterwards. What causes this issue? Is it possible to make the animation smooth, maybe by using some third party plugin or some sort of interpolation?

Here's my movement code:

function animateElement(element) {
    var xPos = parentCenter.x + Math.cos(angle) * radius;
    var yPos = parentCenter.y + Math.sin(angle) * radius;

    $.Velocity(element,
        {top: xPos , left: yPos },
        {duration: animationTime, easing:"linear",
            complete: function () {
                animateElement(element);
            }
    });
}

Here's my jsfiddle: circular movement

Thanks!

Upvotes: 0

Views: 1012

Answers (1)

t.niese
t.niese

Reputation: 40842

Instead of using left and top for you animation you should use translateX and translateY. This not only will use hardware acceleration, but should activate the sub-pixel movement.

You should also make sure to round the numbers to something like four decimals.

jsfiddle - demo (One div with left/top the other one with translateX/translateY)

Paul Irish: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

Upvotes: 5

Related Questions