Css vs js animation performance

Question

Skip to content

Written on January 25, 2016

Animation is a design tool which does not directly impact content but instead is used for visual cues and transitions from one UI element to another. For web design, animation is used to polish an already completed product. CSS and Javascript are two animation tools and both have pros and cons when it comes to functionality, overhead, and performance.

Functionality

In terms of functionality, CSS and Javascript are fairly similar. Both are able to do very impressive animations but it becomes more of a question of what exactly the animation needs to do. Animating using CSS is known as a declarative approach while Javascript is imperative. What this means is in CSS you must specify specifically what has to happen, while in Javascript you are able to programmatically define the animation.This means you have more control over an animation when using Javascript. For example, playing a complicated animation in reverse would be difficult in CSS as you would need to specify additional transition properties on every piece of the animation.

Overhead

Javascript and CSS have a key difference, which is overhead. CSS is the same in every development environment and it is simple to learn and fairly straightforward. Javascript, on the other hand, is almost the opposite. Although basic Javascript has animation functionality, most animation is done through an additional library such as GSAP or velocity.js. Developers who are familiar with one library may not be familiar with another, meaning much development time must be spent on training. Additionally, many development environments may be using another Javascript library such as JQuery for non-animation development, which will lead to conflicts as many Javascript libraries are not compatible. Therefore, when developing it is important to consider the overhead cost of Javascript libraries.

Performance

Performance is another important consideration, especially if developing on mobile platforms. CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS. Javascript performance depends on the library used and puts the burden on the developer to optimize. For example, JQuery is a commonly used library but is notorious for slow animation performance because it is not designed with animation in mind. Also, adding Javascript libraries creates more overhead and can increase page load times especially for mobile devices. There are lightweight libraries out there specifically for this issue, but lightweight libraries also have less functionality. As mentioned before, you may have to optimize performance which is completely dependent on the library being used. Using CSS or Javascript for animation is highly dependent on what you are trying to do. Javascript can be very powerful but is completely unnecessary if all you are doing is something like fading in a pop up window. Most of the time just using CSS is enough, but complicated animations can be difficult to do without using Javascript. If you decide to use Javascript, make sure to pick a suitable library which does not conflict with other libraries you may already be using.

Need Help? Contact us

By Cody Arsenault

Updated on August 30, 2018

Custom animations can help a website stand out among the competition, but poorly optimized assets can lead to performance issues that ultimately drive away users. If any of your animations render at less than 60 frames per second, then your visitors will notice, and the user experience will suffer. This guide explains how to keep your CSS and JavaScript animations running smoothly for everyone.

CSS animations vs JavaScript animations

Animations made with JavaScript are sometimes called imperative animations, and those made with CSS are called declarative animations. CSS animations are handled by the browser's compositor thread rather than the main thread responsible for painting and styling. Consequently, such animations are unaffected by the main thread's more expensive tasks. Of course, animations that trigger the paint or layout events will require work from the main thread, which negates the benefits of using CSS animations.

JavaScript, on the other hand, always gets executed by the main thread. Nonetheless, JavaScript gives you greater control over animations, so you're better off using it in some situations. While CSS is ideal for simple transitions, JavaScript is recommended for animations with advanced effects such as bouncing. Animations that allow the user to pause or rewind should also be animated with JavaScript. JavaScript is necessary to implement certain effects like parallax scrolling. With the help of the Web Animations API, you can create complex animations for object-oriented applications. You can also use JavaScript to control CSS animations.

JavaScript animation tips

1. Use requestAnimationFrame()

Instead of using setTimeOut() and setInterval(), use the native JavaScript method requestAnimationFrame() to execute your animation code at the best time for the browser. This method chooses the appropriate frame rate for the user's device, so mobile visitors will see a different frame rate than desktop users.

2. Decouple animations from events

The code responsible for handling events such as scrolling should be kept separate from your animation code. HTML5Rocks has a great write up on this which dives deeper into how you should decouple events from the code that handles requestAnimationFrame().

3. Keep your JavaScript code concise

Be wary of adding huge chunks of JavaScript to your web page. If your code becomes unwieldy, you could try using web workers to execute JavaScript animations on a different thread.

4. Don't use jQuery

Stay away from older animation libraries like jQuery. If you're looking for something similar, Velocity.js works basically the same way, but it's much faster and supports more features. Replacing jQuery's $.animate() with $.velocity() will make a major difference for mobile users. Web Designer Depot has a nearly exhaustive list of animation tools for JavaScript.

Choosing which CSS properties to animate

Continuous animations can consume a significant amount of resources, but some CSS properties are more costly to animate than others. The harder a browser must work to animate a property, the slower the frame rate will be. Therefore, choosing the right CSS properties to animate can have a huge impact on page performance.

There are three main types of CSS properties:

Layout properties - These determine the size and placement of page elements. Animations that change an element's width and height can affect the placement of other page elements, which can cause a chain reaction known as "layout thrash." Since animations that change the page layout are especially costly, they are best avoided.
Paint properties - These define the appearance of page elements. Making changes to properties such as color requires repainting, which can be costly. That said, simple animations that require a small portion of the viewport to be repainted may have a negligible impact on overall performance. Larger animations that require repainting may not be worth the effort.
Composite properties - Which include transform and opacity, are your best friends for creating CSS animations with minimal cost. With transform, you can scale and rotate animations without affecting the page layout. Try to use composite properties for animations whenever possible. With a little creative thinking, you'd be surprised by what you can pull off with just these properties.

For best results, try to limit yourself to using these four composite properties:

position
scale
rotation
opacity

You can do almost everything using these four options that you can using layout properties without affecting the positioning of other page elements. For example, to change the size of an image, use scale() rather than width().

CSS animation tips

1. Avoid simultaneous animations

Animations that run smoothly in isolation may not work so well on a page alongside dozens of other animations. More than two animations going at the same time is likely to cause lag. Therefore, timing your animations so that they don't all execute all at once is vital to maintaining consistent performance. This can be accomplished by adding transition delays. Figuring out how to optimally choreograph your animations may require some trial and error, but the performance boost you'll get is worth the effort.

2. Examine your animations in slow motion

If an animation looks good in slow motion, it will look great at normal speed. Slowing down an animation can help you better pinpoint rendering problems.

3. Delay all animations by a fraction of a second

Since the browser is very busy when your page begins loading, delaying all animations until a few hundred milliseconds after the initial load event can make a noticeable difference in overall page performance.

4. Don't bind CSS animations to scroll

Animations that follow the viewport as the user scrolls are not only annoying, but they also drag down the performance of everything else on screen.

5. Combine CSS with SVGs

Scalable vector graphics, or SVGs, are excellent for animations since they can be scaled without degrading resolution. You can create SVGs in a program like Adobe Illustrator and apply CSS to alter their appearance. Just another reason to choose SVGs over icon fonts.

When to use will-change

If you've tried everything else and are still having performance problems, then you might want to try adding the will-change property to your animations. As its name implies, will-change indicates that an element's properties will change so that the browser can make appropriate preparations. List the specific properties that will change like so:

.element {
    will-change: transform, opacity;
}

Since using will-change consumes resources, be warned that overuse can lead to further performance problems. Putting it before every animation by default isn't recommended. Only use will-change as a last resort to optimize page performance.

Put your animations to the test

Performance testing should be an ongoing process while building animations for your web app. The longer you wait to identify rendering issues, the harder it becomes to pinpoint the root of the problem.

The developer tools for Chrome, Firefox and Safari offer a frame-by-frame breakdown of paint and render events under their Network tabs. This information can help you optimize animations as you design them. If you're using Chrome, look under the Rendering tab in the DevTools console for additional features such as an FPS meter.

The user's screen size has a major impact on how animations display, so be sure to test your project on multiple platforms including mobile devices.

Summary

Optimizing animations for the web is a relatively straight-forward process. Choosing engaging animations that will entice new visitors to stay on your website is more challenging because you have to consider your audience. In addition to tracking how your site's technical performance affects conversions, take note of the impact that web animations have on your bottom line. If your animations aren't helping, then they are just wasting resources better spent elsewhere.

Is it better to animate with CSS or JavaScript?

TL;DR # Use CSS animations for simpler "one-shot" transitions, like toggling UI element states. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down.

Do CSS animations affect performance?

Compared with animating elements using JavaScript, CSS animations can be easier to create. They can also give better performance, as they give the browser more control over when to render frames, and to drop frames if necessary.

Is JavaScript good for animations?

JavaScript libraries are an extremely valuable tool for any web developer. Adding simple animations can easily be done with CSS, but as soon as it comes to more complex or advanced effects, JavaScript is the better tool.

Are CSS animations good?

CSS animations are great for websites that want to add dynamic, engaging content without placing much more weight on the page.

programming css CSS animation performance Animation JS Web animation js Trigger animation js CSS animation laggy requestAnimationFrame