Smoother jQuery animations

Question

We had another question regarding this, but it was not resolved, probably because I was not very clear in my question.

Just try again in the hope that I will close this:

I was recently tasked with creating a one-page website that emulates basic flash animations, that is, sliding and fading in and out of elements.

When I got the interactive layout, I had a big problem - choppy animation. The problem was with Macs with screens above 18 "regardless of browsers and Macs below 18" specific to FF version 3 and below. On computers, the animation is nearly flawless.

Here are my jquery codes, and the affected elements are marked with identifiers # 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 resorted to various optimization methods, which include caching the images present in the affected divs on the index page, and redirecting the user to the actual page later and the sequence of the animation, but nothing worked.

This is very unpleasant because I seem to have exhausted all the available methods that I know of, and I just can't get it to work on a Mac.

I have the feeling that I am collecting too many animations on a finished document, and this causes slowness. Can someone confirm if this is the main reason, and if there is any other way, can I solve this problem?

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

Answer 1

The best way is to use CSS transitions / animations for this. If any browser does not support them, then such a browser is not suitable for animations of any type.

CSS transitions and animations are better optimized using native code, so theoretically a much smoother (higher FPS) behavior can occur.

As in your jquery animation above:

• Try to reduce the amount of fadeTo on complex elements.
• Try to simplify the style - reduce the number of options for using opacity or rgba() with transparency.

And anyway: the fewer DOM elements you have, the better.

Answer 2

Queue

When using jQuery animations, you must prefix your animations with dequeue() and stop() if you use more than 1 animation or repeat the same animation, otherwise they can grow one after another, waiting for launch, and lead to an unintentional delay.

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

Here's the Codepen demo and another more sophisticated demo that use this.

---

Frame frequency

You can control the frame rate at which jQuery processes the animation with jquery.fx.interval , which is described here.

Using this property, you can configure the number of frames per second at which the animation will be performed. The default value is 13 milliseconds. To make it lower, you can make the animation smoother in faster browsers (like Chrome), but it could be related to performance and processor.

Since jQuery uses one global spacing, the animation must not start, or all animations must stop to change this property.

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

---

Interval

You can use setInterval to break 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 split the distance into small portions and set it to a constant speed so that it looks like it was one smooth transition.

Here is a demo.

---

Inquiry

The interval method really only works for simple animations. But for more complex animations, you can use requestAnimationFrame , which gives you control over the browser to choose when the best time 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 Animation" - Paul Irish