10 rules for smooth web animations

From me:

Web animations can bring a very cool effect, allowing the page to have a better user experience. For good animation performance there is no clever idea, in addition to putting a lot of time in testing and optimization, of course, the most important thing is to be easy to maintain.

Ten rules for smooth web animations:

· Do not change the parameters other than opacity and transform!
· Hide the content in a humble place
· Don't animate all the elements at the same time.
· Slightly increase the delay to make the choreography simple _
· Use global multiples to design slow animations
· Take a picture of your UI and replay them to get a valuable third-party checkpoint.
· Network activity leads to lag
· Do not directly bind scrolling
· Test early & often on your phone.
· Often tested on different devices

Original: Original Address

10 rules of fluent web animation

Since we landed in Gyroscopelast year, many people have asked me about the JavaScript animation library used on our website. We thought about opening this up, but that's not where magic really happened.

I don't want you to think that we are relying on special JavaScript plugins to solve these problems. For most people, we're just taking advantage of recent browser performance improvements, GPUs and CSS3 specs.

　　There are no tricks for good animation performance, except to put a lot of time in testing and optimization. However, after many years of experimentation and hitting the limits of browser performance, we found a series of design and code guidelines that seemed to be a reliable result of good animation. These technologies make your pages smoother and run well on modern desktop and mobile browsers. Most importantly, it is easy to maintain.

View pictures

Technology and implementation are different for everyone, but general rules can be helpful for most situations.

What is an animation?

Animations have been sophisticated before the advent of the Internet, and if you want to do it, it will be your life's task. However, there are some special constraints and challenges for animations applied to the Internet.

For 60-frame smooth animations, each frame needs to be rendered within 16MS! This doesn't take much time, so for smooth performance we need to find a very effective way to render each frame.

View image 1

View Image 2

View Image 3

Some of the classic animation rules

T has a dozen ways to animate on the web. For example, a slideshow is a method that has been popular before the Internet to create visual effects of motion by using slightly different hand-drawn frames to replace multiple times within a second.

Recently, Twitter has used this simple method to create a new love animation that is implemented by toggling a set of sprite switches.

　　This effect cannot be animated with a bunch of small elements, or an SVG, but that can be unnecessarily complex and may not be smooth.

Please view

In many cases, you will want to use the CSS transition property to do automatic animation. This technique is also known as "tweened animation", which transitions between two different values. The advantage is that you can easily cancel without having to build all the logic. this "once and for all" animation is an ideal solution, like introducing sequences, and so on, or simply as a hover interaction.

Extended reading: You need to know something about CSS transitions.

View pictures

In other cases, the keyframe-based CSS animation properties may be ideal for background details of uninterrupted operation. For example, the ring plan on the gyroscope logo is rotated continuously. Other benefits of CSS animation syntax are gear ratios.

So, without further ado, here are some tips to help you improve your animation performance to a large extent ...

#1

Do not change the parameters other than opacity and transform!

Even if you think it's OK, don't do it!

Just this basic guideline can help you solve 80% of problems, even on the phone. You may have heard this before--it's not the original idea, but it's rarely followed. This is equivalent to the same law of "Eating health and movement" of the web, which sounds like a good advice, but you may ignore it.

Once you've thought about it, you'll find this relatively simple, but it could be a big jump, animation of these customary traditional CSS properties.

For example, if you want to make an element smaller, you can use Transform:scale ()instead of changing his width. If you want to move him, it's different from being mixed with margins or padding-you can just use a simple Transform:translatex or transform:translatey.

Why is this effective?

For humans, changing the width, margin, or other properties doesn't seem like a big deal-because it's simpler and looks better-but what the computer needs to do is a whole lot different than humans, and he's going to do more and more.

　　The browser team spends a lot of effort optimizing these operations. Transforms is really simple enough to improve efficiency and is often able to take full advantage of your graphical interface without having to re-render elements.

The first time you load a page, you may get mad-in all corners, using pictures, adding shadows on each element, and if you feel particularly rough, you can even add a dynamic blur. If this happens only once, some extra millisecond time calculations are not affected. But once the content is re-rendered, you don't want to recalculate all of the content.

Extended reading: Moving elements with translate (Paul Irish)

#2

Hide the content in a humble place

Use pointer-events: To hide elements through transparency

This property may have browser-compatible issues, but if you just do something for WebKit or other modern browsers, it will make your life better.

Over a long period of time, when animations need to be processed by jquery's animate (), the complexity of many of the gradient elements is achieved by toggling the "display" property: In a

CSS's Pointer-events property (which has been around for a long time, but not often), so that elements do not respond to any clicks and interactions, as if they were not there. It can be switched on and off simply via CSS, without interrupting animations or affecting rendering/visibility in any way.

Combined with opacity for 0, he is essentially the same as display:none, but does not trigger new renderings that affect performance. When I hide an element, I can often only set opacity to 0, and turn off pointer-events, and then forget the element, he will take care of himself.

This works particularly well with absolutely positioned elements, because you will be very confident that it has no effect on the other elements of the page at all.

This also gives you more leeway, because timing is not perfect-it's not the end of the world, if an element is clickable or obscured for a second or longer on another element, or if it's just a point, then it's hidden.

#3

Don't animate all the elements at the same time.

Unless you use orchestration

A single animation itself is fluent, but many elements are animated at the same time and will disturb them. It's easy to create a single smooth animation-but an order of magnitude animation makes it hard to make sure you get full performance. Therefore, it is particularly important to plan rationally.

Separating time, then all elements do not begin at the same time. Typically, 2, 3 can run at the same time without slowing down, especially if they start the animation at a slightly different time.

Unless you have only one element on your page, it is important to understand the orchestration . This may seem like a choreography, but it's just as important for an animated interface. Elements need to enter at the right time at a suitable location. In time they are all separated and they must feel like a well-designed unit.

Google Material design is an interesting suggestion on this topic. It's not just the right way to do things, but also the things you need to think about and test.

Extended reading: Google Material design · Motivation

#4

Slightly increase the delay to make the choreography simple _

Animating is really important and requires a lot of experimentation and testing to find the feeling. However, his code is not very complex.

I usually change a class on the parent element (usually on the body) to trigger a series of changes, each of which has its own excessive delay at a particular time. From a code point of view, you only need to be concerned about state changes and do not need to maintain a stack of timings in JavaScript.

View pictures

Gyroscope Chrome Extended Animations

Rearranging a series of elements is the simplest way to orchestrate your elements. This is powerful because it looks good at the same time and also brings valuable performance-remember that only a small fraction of the elements begin at the same time. You will separate them until you feel smooth enough, but don't split them too far, causing the whole to look too slow. Enough should be overlapping, which feels like an uninterrupted stream, rather than a series of independent individual elements.

Code sample

Here are a series of simple tricks that stagger your elements-especially if they are a long list of elements. If there are less than 10 elements, or there is an immeasurable amount (just like in a static page), then I usually specify the value in CSS. This is the simplest method of maintenance.

A simple sass loop.

For a long list of elements or a dynamic content, the timer may need to be set dynamically by looping through each element.

The simplest JavaScript loop

Here are two common variables: your base delay and the delay between each element. This is a delicate balance to look for, but when you tap the correct number set, it feels great.

#5

Use global multiples to design slow animations

And then speed up all the elements

For animation design, timing is everything. 20% of the tools are to implement them, and the other 80% is to find the right parameters & keep everything synchronized with the pitch and feel smooth.

Especially when composing a series of elements, try to squeeze performance and page concurrency, and see that all elements in slow motion make things easier.

Whether you're using JavaScript, or some CSS preprocessor, like sass (My favorites), this requires doing some extra arithmetic directly, and creating variables.

You must confirm that it is convenient to try some unused speed or timing. For example, if an animation is stuck at a speed of one-tenth, then there may be a fundamental problem. If it is 50 times times smoother, then the problem is to find the fastest speed he can achieve. At full speed, the 5-millisecond problem is hard to detect, but if you lower the overall speed, they become particularly noticeable.

The ability to view elements in slow motion can be useful especially for very complex animations, or for bottlenecks that address tricky performance.

The main problem is that you want to wrap a lot of perfect detail, when it becomes slow, and then improve the overall speed, so this feeling is great. This is subtle, but the user perceives fluency and detail.

These features are just part of OS X--If you click the Shift button to reduce the button or an app icon, you'll see him running at a slow speed. At this point, when you press the Shift button, we can even activate the slow animation in the gyroscope implementation.

#6

Take a picture of your UI and replay them to get a valuable third-party checkpoint.

Sometimes a different point of view can help you see things more thoroughly, and video is a great way to always do this.

Some people create videos in AE and try to implement them on the site. I often change the other way and then try to do a good video from the UI of the website.

can publish vine or some video, is very high pole. One day, I was very excited about what I was doing and tried to make a video and share it with some small partners.

However, when I looked at it again, I found that a bunch of things were not perfect. There is a big lag behind the animation, and so the timers have some problems. It made me a little worried that I didn't publish it at last but realized that I had a lot of work to do.

It's easy to whitewash these when you're using it in a formal environment, but the animations on the video--over and over, or at a very slow speed--make all the problems seem obvious.

They said the camera added 10 pounds. Perhaps this also increased by 10 frames.

I have now become an important part of my workflow, look at slow animated videos, and if there are any frames that make me feel wrong, make some changes right away. It's easy to blame slow browsers, but in some of the more optimized browsers, testing can solve all the problems.

Once you're on the video to catch the lag and don't feel embarrassed, and feel the video is good enough to share, then the page is almost ready to go online.

#7

Network activity leads to lag

You need to load a large HTTP request in advance or lag

　　The picture is the most black culprit of the problem, whether some big guy (perhaps a big background) or a large number of small pictures (imagine 50 emoticons Fugazai), or just a lot of content (a very long picture of the end of the page).

When the page loads for the first time, a lot of things are initialized and downloaded. There are statistics, ads and other third-party scripts that make things worse. Sometimes, delaying all animations is extremely useful for performance after hundreds of milliseconds of loading.

Unless necessary, do not over-optimize, but a complex page may require very accurate latency and content timing before it can run smoothly. Generally speaking, you want to start loading as little content as possible, and once the heavy parts and intro animations are done, constantly load the rest of the page.

With a lot of data on the page, loading all the elements of the workload seems to be huge. Once the animation starts to load the real data, an animated and static page runs well and may appear to be separate. If some things seem to work or sometimes work smoothly other times are not smooth. I suggest cutting the network activity to make sure you don't do other things at the same time.

#8

Do not directly bind scrolling

It looks like a cool idea, but it's actually not.

In the past few years, scrolling-based animations have been popular, especially in parallax or other special effects. Whether it is a good design, to be debated, but there are some good or cake ways to achieve them.

In this category, the modest optimizations do something that will scroll to a certain distance as an event-and only run once. Unless you really understand what you are doing, I would recommend avoiding this category because it is prone to problems and is really difficult to maintain.

Even worse, create your own scroll bar function instead of the default-that is, scrolljacking. Please do not do it!

This advice is especially useful for mobile phones, but it can also be a good practice for user experience.

If you do have a special experience and you want to focus on scrolling or other special events, I would recommend creating a quick prototype to make sure that it works well when it takes a long time to design.

#9

Test early & often on your phone.

Most Web sites are created on the computer and most likely run tests on the same machine they create. Therefore, the mobile experience and animation performance is often behind-the-awareness. Some technologies (such as canvas) or animation technology do not work well on the phone.

However, if writing & optimization is appropriate (see Rule # # #), a mobile experience may be better than the computer experience. Mobile optimization is a tricky task, but the new iphone is now faster than most laptops! If you follow the previous advice, you'll find that what you do has great performance on your phone.

Mobile usage can be a very big and important part of most websites. This looks and is extreme, but for an entire project, I would recommend separating the phone from your project. This should not feel like a punishment to make a mobile phone version, though this is often the case.

Maintain design progress & performance enhancement, knowing that this feeling is polished and smooth has been as convenient as the large version of the website.

If you force yourself to use a mobile website for a week, you will probably optimize it for the same great experience as a large website. Often annoying to use is worthwhile, which means solving the problem before your user experience.

#10

Often tested on different devices

screen size, pixels, or devices all have great implications . In addition to the phone vs desktop, there are many key points that can completely affect performance, like whether the screen is "retina" screen, the total pixels of the window, how old the hard drive is, and so on.

Even though Chrome and Safari are WebKit browsers with the same syntax, they all have their own bizarre behavior. Every time a chrome update fixes something and introduces a new bug, you need to stay alert.

Of course, you don't just want to create the lowest level of performance, so finding the smartest way to incrementally add or remove enhancements can be useful.

I often switch between my little MacBook and my big imac, and each switchover leads to minor problems and improvements-especially in terms of animation performance, but for overall design, information density, readability, and so on.

Media queries, often powerful tools to handle these different link styles, are the most basic use of media queries through different heights or widths. It can be useful to find out the type of OS and devices, because the phone's performance features are quite different from the computer.

View pictures

I hope you will find useful tips in your next project. Good luck!

10 rules for smooth web animations