CSS and JS animations which are faster

JavaScript-based animations are implicitly the same as CSS transitions, even faster, how is that possible? And how is it possible that Adobe and Google will continue to publish rich media mobile sites that are comparable in performance to local applications?

This article has a look at the JavaScript-based Dom Animation library, such as Velocity.js and GSAP, to see how it works better than jquery and CSS animations.

Jquery

Let's start with the basics: JavaScript and jQuery are confused by mistake. JavaScript animations are fast. JQuery slowed it down. Why? Because-although jquery is very powerful-it has never been the design goal of jquery to become a powerful animation engine:

• JQuery cannot avoid layout bumps, which is due to its code base providing a variety of uses beyond animations.

• JQuery's memory consumption often triggers garbage collection, which sometimes freezes the animation.

• JQuery uses setinterval rather than requestanimationframe (RAF) to protect new technology from its own.

It should be noted that the layout bumps are not smooth at the beginning of the animation, garbage collection is the cause of the animation during the failure of the culprit, while not using the RAF will result in low frame rate.

Implementation examples

Avoid the combination of DOM queries and updates that cause layout bumps:

12345678910111213141516

var currentTop,    currentLeft;/* With layout thrashing. */currentTop = element.style.top; /* QUERY */element.style.top = currentTop + 1; /* UPDATE */currentLeft = element.style.left; /* QUERY */element.style.left = currentLeft + 1; /* UPDATE *//* Without layout thrashing. */currentTop = element.style.top; /* QUERY */currentLeft = element.style.left; /* QUERY */element.style.top = currentTop + 1; /* UPDATE */element.style.left = currentLeft + 1; /* UPDATE */

A query that occurs after an update forces the browser to recalculate the calculated data for the page (and also takes into account the new update effect). This can have a significant overhead on the animation, which is just a 16 millisecond interval of running timeouts.

Similarly, implementing the RAF does not have to be a significant rework of your existing code base. Let's compare the RAF's basic implementation with SetInterval:

1234567891011121314

var startingTop = 0;/* setInterval: Runs every 16ms to achieve 60fps (1000ms/60 ~= 16ms). */setInterval(function() {    /* Since this ticks 60 times a second, we divide the top property‘s increment of 1 unit per 1 second by 60. */    element.style.top = (startingTop += 1/60);}, 16); /* requestAnimationFrame: Attempts to run at 60fps based on whether the browser is in an optimal state. */function tick () {    element.style.top = (startingTop += 1/60);}window.requestAnimationFrame(tick);

The RAF has the greatest chance of driving animation performance, and you can make a single change to your code.

CSS Conversion

CSS conversion goes beyond jquery by tossing the animation logic to the browser itself, which is effective in the following ways: (1) Optimizing DOM interaction and memory consumption to avoid stalling (bumps), (2) using the engine's RAF principle, (3) Force hardware acceleration (leveraging the GPU's ability to improve animation performance).

However, the reality is that these optimizations can also be executed directly in JavaScript. GSAP has been doing this for years. Velocity.js, a new animation engine, not only took advantage of the same technology, but also took a few more steps forward--we'll talk about that soon.

Faced with the fact that JavaScript animation can compete with CSS conversion is just the first step in our rehabilitation program. The second step is to implement "JavaScript animations can actually be faster than CSS conversions."

Now let's talk about the weaknesses of CSS transformations:

• Transition forcing hardware acceleration increases GPU consumption, which in high-load situations will result in a non-smooth operation. This situation is particularly noticeable on mobile devices. (in special cases, such as when data is passed between the main thread of the browser and the layout thread, the resulting bottleneck can also result in a non-fluent). Some CSS properties, such as transform and opacity, are not affected by these bottlenecks. Adobe has carefully summed up these issues here.

• Transition is no use below IE10, resulting in the availability of desktop sites since IE8 and IE9 are still widely present.

• Since transition is not controlled by JavaScript primitives (and is only triggered by JavaScript), the browser does not know how to optimize them synchronously with the JavaScript code that controls these transition.

Conversely, the JavaScript-based animation library can determine the appropriate opening hardware itself. They natively support versions of Internet Explorer, and they are especially suitable for batch animation optimization.

My advice is to use native CSS transformations only when you are developing for mobile and only for simple animations. In this environment, transition is a native, effective solution that allows you to implement all the animation logic in your stylesheet without adding additional JavaScript libraries to prevent your pages from becoming bloated. However, when you are designing a complex UI or developing an app that has a different state of the UI, you should use an animation library to keep the animation flowing, while the workflow is manageable. Transit is a library that is particularly good at managing CSS transformations.

JavaScript Animations

Well, that JavaScript is going to get the upper hand in terms of performance. But how fast is JavaScript exactly? Well-initially-for building a real 3D animation example is fast enough, usually in the build you will only see that there is a use of WEBGL. It's enough to build a small multimedia animation, and usually you'll see that it's only built using flash or after effects. and building a virtual world is enough, usually you just see Using canvas to build.

For the leading animation library, of course, including transit (which uses CSS gradients), make a direct comparison, and look back at the velocity on the velocityjs.org document.

The question remains: how does JavaScript specifically achieve its high level of performance? Here is a short list of optimizations that JavaScript-based animations can be executed for:

• Synchronization dom→ The entire animation chain into the stack to minimize the layout jitter.

• Caches property values for the entire chained call to minimize DOM queries (these are the pits of high-performance Dom animations).

• Caches the unit conversion rate (such as PX to%, EM, and so on) for the entire same level element in the same call.

• The update may skip the style update when it is visually invisible.

Looking back at the knowledge we learned earlier about layout bumps, Velocity.js uses these best practices to cache animation end values for reuse as the starting value for subsequent animations, thus avoiding the requery of the DOM to get the starting value of the element:

12345

$element    /* Slide the element down into view. */    .velocity({ opacity: 1, top: "50%"})    /* After a delay of 1000ms, slide the element out of view. */    .velocity({ opacity: 0, top: "-50%"}, { delay: 1000 });

In the example above, the second Velocity call knows that it should automatically start with opacity 1 and top 50%.

The browser itself can eventually perform many of these same optimizations, but doing so will significantly reduce the way developers can create animated code. Therefore, for the same reason, because jquery does not use the RAF (as described above), the browser does not force the optimization of it, or even gives a small chance to break the specification or deviate from the expected behavior.

Finally, we compare these two JavaScript animation libraries (Velocity.js and GSAP) to one another.

GSAP is the first animation library to demonstrate JavaScript ' s impressive DOM animation performance. It does, however, has a few drawbacks:

• In Medium-to-high stress animations, GSAP ' s DOM interaction overhead causes dropped frames at the start of, and between, a Nimations.

• Whereas Velocity.js is released under the Ultra-permissive MIT license, GSAP are Closed-source and requires an annual Licen Sing fee for many types of businesses.

• Because GSAP is a full animation suite, it's triple the size of Velocity. However, since GSAP is so richly-featured, it does has the benefit of being a Swiss Army knife of animation.

My recommendation is to use GSAP if you require precise control over timing (e.g. remapping, pause/resume) and motion (E . g. Bézier curve paths). These features is crucial for the game development and certain niche applications, but is typically not needed in web App UI ' s.

Velocity.js

The rich nature of referencing GSAP does not mean that velocity itself is lightweight in nature. In contrast, in the only 7kb after compression, velocity not only replicates all the features of jquery $.animate (), it also packs color animations, transformations, loops, easing effects, animations and scrolling.

In summary, Velocity is the jquery,jquery UI, and the best combination of CSS gradient effects.

Moreover, from a convenience point of view, velocity is using the jquery $.queue () method under the hood (lid, presumably the public interface), so that it can be implemented with jquery $.animate (), $.fade (), and $.delay () Seamless interoperability of functions. And since Velocity's syntax is the same as the syntax of $.animate (), you don't need to change any of the page's code.

Let's take a quick look at velocity.js. At the basic level, velocity behaves the same as $.animate ():

123456

$element    .delay(1000)    /* Use Velocity to animate the element‘s top property over a duration of 2000ms. */    .velocity({ top: "50%"}, 2000)    /* Use a standard jQuery method to fade the element out once Velocity is done animating top. */    .fadeOut(1000);

At its most advanced level, you can create complex scrolling scenes with 3D animations-almost as simple as two lines of code:

12345

$element    /* Scroll the browser to the top of this element over a duration of 1000ms. */    .velocity("scroll", 1000)    /* Then rotate the element around its Y axis by 360 degrees. */    .velocity({ rotateY: "360deg"}, 1000);

End

Velocity's goal is to remain a leader in the performance and convenience of animations in the DOM.  This article focuses on the former. Head on through to velocityjs.org learn more about the latter.

Before we come to the conclusion, remember that a high-performance UI is not just about choosing more lib. The rest of your page should also be optimized. You can learn more from Google talks with more fantastic content:

• Jank Free

• Rendering without lumps

• Faster Websites

Original address: Http://davidwalsh.name/css-js-animation

CSS and JS animations which are faster