Smoother Jquery Animation

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

Solution 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.

Solution 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.

functionanimLoop( render, element ) {
    var running, lastFrame = +newDate;
    functionloop( now ) {
        // stop the loop if render returned falseif ( running !== false ) {
            requestAnimationFrame( loop, element );
            running = render( now - lastFrame );
            lastFrame = now;
        }
    }
    loop( lastFrame );
}

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

Code snippet found here.

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