• 10 Principles for smooth Web animations
  • By Anand Sharma
  • The Nuggets translation Project
  • Translator: Wang Zijian
  • Proofreader: Scarecrow, Gocy

Since we released Gyroscope last year, a lot of people have asked us what JavaScript library we use for animation, and we’ve thought about making it public, but that’s not really the trick.

We don’t want people to feel like they need to rely on a special dark magic JavaScript plugin to solve their problems. Most of the time, we just need to take advantage of the latest browser and GPU performance and CSS3.

There is no magic formula for animation, the only way is to spend a lot of time testing and optimizing. However, after years of experimentation and testing the limits of browser performance, we have found that there are a few design and coding principles that can be used to improve animation performance. These tips will keep your pages flowing and running in popular browsers on both desktop and mobile devices, and most importantly, they’re easy to maintain.

The technology and implementation may vary from person to person, but the principle of universality can be almost universal.

What is animation?

Animation was around long before the Internet was invented, and it probably took you a lifetime to learn how to make it brilliant. However, implementing animations on the Internet has its own unique limitations and challenges.

To achieve smooth 60 frames of animation, each frame needs to be rendered in 16 milliseconds! Time was short, so we needed to find the most efficient way to render each frame in order to achieve smooth performance.

Some classic principles of animation design

There are many different ways to achieve animation on a website. For example, film, which was ubiquitous before the Internet, uses hand-drawn, graded film to create the illusion of animation by playing multiple frames per second.

Twitter took advantage of this approach in the recent heart-shaped animation, using film to draw a moving Sprite.

This effect could also be achieved with many separate small element animations, or in SVG, but that would be too complex and probably not as smooth.

Many times, you’ll want to use CSS toggling properties to automatically animate elements. This technique is called “tweening” because it switches between two different property values. And tweening was set to be_tween_ two different values. The nice thing about it is that it is very easy to cancel or replace without having to reconstruct the logical content, which is perfect for once-and-for-all animations like intro prologues, or simple interactions like mouse hover.

More: All You Need to Know about CSS Transitions

Other times, keyframe-based CSS animation properties can be a good fit for changing background elements. For example, the ring button in a gyroscope rotates continuously as preset, and there are other types that can take advantage of CSS animations such as gears.

In case you don’t have to worry about it, here are some tips that will greatly improve your animation:

1

Why do you do that?

For humans, changing widths, padding, or other attributes isn’t a big deal — even more so because it’s easier — but for computers, it feels like the sky is falling, or worse.

Browsers put a lot of effort into optimizing these operations, and transform is really easy and efficient, and takes full advantage of the graphics card without having to re-render elements.

The first time you load a page, you might feel crazy – dealing with all the rounded corners, introducing images, adding shadows to everything, or even doing a dynamic feathering if you don’t care. If this happens only once, a little more computation time doesn’t matter. But once the content is rendered, you never want to reload!

Moving Elements with Translate (Paul Irish)

Hide content in a very clear way

Use the pointer-Events attribute: Hide elements with transparency only

There may be cross-browser warnings, but if you’re only targeting WebKit and other popular browsers, it’ll give you a leg up.

Long ago, animation effects had to be handled by jQuery’s animate() method, and much of the complexity of fades in and out effects was done by switching display property values. Too early and the animation is not finished, but too late and the page is blank, always needing callback functions to clean up after the animation.

The pointer-events property in CSS (which has been around for a long time, but is not often used) simply renders elements unresponsive to clicks and interactions as if they didn’t exist. It can be shown or hidden via CSS without breaking the animation or affecting the rendering or visibility of the page.

Aside from setting opacity to zero, it has the same effect as setting display to None, but does not trigger a new rendering mechanism. If an element needs to be hidden, I set its opacity to 0 and pointer-events to off, and let it go on its own.

This is especially true for absolutely positioned elements, because you can be confident that they won’t affect any other elements on the page.

It’s also a bit off the mark, because the timing of the animation isn’t always perfect — for example, an element can be clicked or overwritten without being visible, or only clicked when the element fades to full display, but don’t lose heart, there will be a solution. (See below for solutions.)

Don’t animate everything at once

Use choreography instead

A single animation can be smooth, but with many other animations it can be completely confusing. It’s easy to write an example of a smooth full-member animation, but it’s hard to maintain performance when orders of magnitude scale up to the entire site. Therefore, it is important to arrange each element well.

You need to schedule all the time points so that all the animation doesn’t start or play at the same time. Typically, two or three animations running at the same time may not lag, especially if they start at slightly different times. But beyond that, the animation may lag.

It’s important to understand the concept of choreography unless your page really only has one element. It seems to be the domain of dance, but in animation it’s just as important. Everything has to go in the right direction and at the right time, even if they’re separate, but they have to feel like they’re on their way.

Google’s Material Design has some interesting suggestions for motion choreography, and while it’s not a sure-fire way to achieve your goals, there are a few things you should consider and try.

More: Google Material Design · Motion

4

Code sample

There are some easy tricks to stagger your elements — especially if there’s a lot of content in them. If the page has less than 10 items of content, or if the number of elements is predictable (like a static page), I usually specify specific values in the CSS. It’s the easiest thing to do.

A simple SASS loop

For more content or dynamic content, you can dynamically add time nodes to each item in a loop.

A simple JavaScript loop

There are two typical variables: the base delay and the delay for each item. It’s hard to coordinate, but once you find the right value, it works perfectly.

5

6

7

8

9

10