Smoother Jquery Animation

Question

Had another thread regarding this but it wasn't resolved probably because I wasn't very clear in my question.

Just wanna try again in hope that I close in on resolving this:

I was recently tasked to create a single page website that emulates basic Flash animations i.e. sliding in and fading in and out of elements.

When I got an interactive mock up, I ran into a big problem - choppy animations. The problem was present in Macs with screens above 18" regardless of browsers and Macs below 18" specific only to FF version 3 and below. On PCs, the animation is almost close to flawless.

Here are my jquery codes and the affected elements are tagged with the ids #md1, #md2 and #md3:

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});

I've resorted to various optimization methods which include caching the images present in the affected divs on an index page and redirecting the user to the actual page later and queuing the animation but nothing worked.

It's really quite frustrating cos I seem to have exhausted all the available methods I know of and I just can't seem to get it working well on Macs.

I have a gut feel that I'm compiling too many animations on document ready and that's causing the sluggishness - can anyone confirm if that is the main reason and if there is any other way I can tackle this problem?

Thank you so much for your help guys. Appreciate it very much =)

Answer 1

The best way is to use CSS transitions/animations for that. If some browser does not support them then such a browser is not good on animations of any kind.

Transitions and animations in CSS are better optimizeable by native code so in theory may exhibit significantly smoother (higher FPS) behavior.

As of your jquery animations above:

1. Try to reduce number of fadeTo's on complex elements.
2. Try to simplify styling - reduce number of use cases of opacity or rgba() with transparency.

And in general: the fewer DOM elements you have, the better.

Answer 2

Queue

When using jQuery animate you should prefix your animations with dequeue() and stop() if you are running more than 1 animation or repeating the same animation otherwise they may build up behind each other waiting to run and result in unintended delay.

$('#md1').dequeue().stop().animate({ top: "-60px" }, 500);

Here's a Codepen demo and a another slightly more complex demo that use this.

---

Frame Rate

You can manipulate the frame rate in which jQuery processes the animation with jquery.fx.interval which is documented here.

This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.

Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect.

Reference: http://api.jquery.com/jquery.fx.interval/

---

Interval

You can use setInterval to break up the animation into smaller bits which will be easier and faster to process.

For example, if you want to animate the position of a div over any extended distance you can rather break up the distance into small portions and set it to run at a constant speed so it looks as though it's a single smooth transition.

Here's a demo.

---

Request

The interval method really only works for simple animations. But for more complex animations you can use requestAnimationFrame which gives control to the browser to choose when is the best moment to execute the code.

function animLoop( render, element ) {
    var running, lastFrame = +new Date;
    function loop( now ) {
        // stop the loop if render returned false
        if ( running !== false ) {
            requestAnimationFrame( loop, element );
            running = render( now - lastFrame );
            lastFrame = now;
        }
    }
    loop( lastFrame );
}

// Usage
animLoop(function( deltaT ) {
    elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
    if ( left > 400 ) {
      return false;
    }
// optional 2nd arg: elem containing the animation
}, animWrapper );

Code snippet found here.

• Further Reading: "requestAnimationFrame for Smart Animating" - Paul Irish