Nowadays, animation is used by all developers – with the reason or without. And animation, used inappropriately, can play a cruel joke with the site – instead of “planned” interest on the part of the user, it can cause boredom, misunderstanding and even rejection. This is exactly how to use animated elements correctly, and we’ll talk in this article. And also – about how to make animation of high quality, to achieve its maximum performance and not spend too much time and effort on it. A little about the first, in a nutshell about the other and just a little about the third. Lets go!

Why do you need animation?

Each element of the site should have a clear purpose. Including animation. Based on the functions, there are three large groups of animated elements.

  1. Waiting animation
    Not all sites load instantly. In order for the user to not lose interest in it while loading the page and not think that the site is hopelessly “frozen” and a waiting animation is needed. The most common animation of this type is preloader.

This is the element that the visitor sees immediately after navigating to the site, while the page content is loading. “Preloaders” perform several functions at once:

  • Show the user that the site is working properly.
  • They “steal” the waiting time – seeing an interesting animation, the user will not pay attention to the fact that the site is “loading” longer than he would like.
  • On the preloader, you can show useful information – tips or advice.
    With this type of animation, you can show the steps required to achieve a goal, or show a sequence of actions.

An example of another use case for waiting animation: sequential filling of the page with content when scrolling instead of deferring simultaneous loading of all elements. That is, if there are a lot of “heavy” elements on the screen, it is better to load them one by one, and not immediately – this is where animation comes to the rescue.

2. Confirmation animation
Such animation is needed so that the user does not doubt that the action on the site has been successfully completed and understands what can be done next. Interactive elements on the page can change shape, color, content – for example, after clicking the menu button, it can change to a “cross”, indicating that now the menu can be closed again.

Confirmation animation is also used to tell the visitor what to interact with on the page. This is relevant for mobile versions of sites – when there is no mouse cursor on the device, the user should point out the interactive elements in advance using simple animation.

3. Decorative animation
These are mini-games, non-standard page scrolling, video inserts, parallax. No, this animation is not “just for beauty.” It has a quite utilitarian function – to draw the user’s attention to the most important things, to interest them in further studying the site, to cause the very wow effect. It is important to use decorative animation properly and in a measured manner; it should not overload the page and distract the user from its content.

What kind of animation can be used?

We will not list outdated or rarely used technologies. We will mention only the most common ones – and analyze their pros and cons.

  1. Video
    The easiest and most effective way to “revive” the page

+
Easy and quick to embed on the page.

Unlimited visual complexity of scenes.

Many application situations.

–
Large “weight” and, therefore, potentially long loading.

The impossibility of changing individual elements of the scene.

Limited support for transparency and filters.

Limited interactivity.

2. Sequences

Almost the same as the video. Basically, it is showing a set of individual images in a short period of time, which creates the illusion of movement.

+
Individual frames can be deleted / changed.

You can customize the number and quality of frames.

There are no browser restrictions on autorun.

–
The same as the video – high “weight” and low interactivityCSS

3. CSS

A very popular technology that allows you to create a variety of animations.
+
Supported by all modern browsers.

There is no need to prepare materials in advance.

Simple description syntax.

“Covers” almost all basic animation needs.

–
Only the animation types provided by the standard are possible.

Complex animations require a lot of code.

4. Canvas / WebGL

The most complex but also the most impressive types of animation. These are 2D and 3D animations. 2D drawing in Canvas comes down to the same frame-by-frame principle. WebGL makes it possible to implement 3D graphics using Canvas. Some of the WebGL code can run directly on video cards, which improves overall performance.

+
You can change the playback order and items on each frame.

Unlimited possibilities for creating interactive elements.

Import of animation from specialized applications.

With WebGL, some of the code can be executed directly on the graphics card, which improves overall performance.

–

Difficulty in mastering

Long animation creation process

Long loading and braking in particularly difficult scenes

How to make animation quality?

To get started, I recommend that you familiarize yourself with the 12 principles of animation studio Disney. This excellent guide is worth knowing for anyone who is in one way or another connected with the world of creating “moving graphics”. But, of course, we also have our own principles of work, which we will now share:

  • Don’t forget to be realistic. Pay attention to correct perspective and shadows.
  • Use the easing functions more widely, choose the appropriate speed and acceleration for each action.
  • When working with frame-by-frame animation, for a comfortable perception, it is necessary to correctly adjust the display frequency. And if the storyboard is automatic in a video or css transformation, then when using js, you need to remember to take into account the frame duration. For example, for 60fps this is roughly 16.5 milliseconds.
  • Try not to do all the work manually – especially if you are developing complex animations in Canvas or WebGL. Use specialized applications and animation libraries.
  • Don’t animate multiple elements at the same time – this will overload your perception. Sequential animation is perceived better than simultaneous animation.
  • For elements of the same purpose, use the same animation style, effects, and speed.
  • Animation should not be too long or slow, especially if it is not justified by waiting for the completion of some process required by the user
  • Avoid constantly showing animation in frequently used scripts, especially when it comes to decorative animation. Nothing tires you like the monotonous repetition of the same action. More often than others, this is the fault of such a solution as scrolljacking, forcing the user to scroll through the “extra” screens already seen many times. Be sure to let the user get important information right away.
  • Don’t add eye-catching animations where focused attention is required from the user, such as filling out forms or exploring comparison tables.
  • And finally. Be sure to test your work on low-power devices, with a poor Internet connection, and in different browser engines. Before starting any project, especially one that is “weighted” with an abundance of animated elements, it is important to eliminate all risks

How to improve perfomance?

Even the coolest animation will not please the user if it constantly “slows down”. Here’s how to avoid this:

  • Set up timings so that all animations start and run sequentially. A couple of animations are able to work without delays at the same time, but the more there are, and the weaker the car, the more “lags” will appear on the screen. More than three simultaneous launches will almost certainly cause problems, especially on mobile devices.
  • It will also be useful to reduce the number of elements on the page, simplify the markup and CSS selectors, and wait for the required resources to load before starting the animation.
  • For video or sequences, select the optimal compression rates for each frame (bitrate) and their number per unit of time (FPS). The lower they are, the more chances that the animation will play without problems on low-power devices. But, at the same time, if you make the bitrate and FPS too low, the quality of the “picture” will deteriorate and the smoothness of transitions between frames will decrease.
  • It is not advisable to loop the video forever. This can slow down the entire page. Therefore, it is recommended to force the replay to stop after a certain amount of time or when the animation leaves the scope. It is also good practice to leave the user the option to stop the background video on their own.
  • When working with CSS animations, try not to change any properties other than opacity and transform. As an example: to reduce the size of an object, use the transformation property scale instead of changing the width / height. The same applies to changing the position of an element on the screen. Do not change the padding values, as this will require re-layout of the page on every frame. Use the transform property transform: translateX or transform: translateY.
  • For a better understanding of what things are involved in working with animations, see the list at csstriggers.com. As an example: changing the background color. It would seem that there are no rebuilding or changes in geometry, but this action initializes painting, and this is a very laborious operation. The CSS pointer-events property is on the safe list and, when combined with zero opacity, has the same effect as display: none, but without impacting performance when starting new animation render loops.
  • To improve performance, it is very useful to put the animated elements on a separate layer (the browser prepares the image for output using the layer composer) so that their changes do not affect everything around. For this, we can use the will-change properties or, as we did before, transform: translateZ (0). The backface-visibility: hidden property works in a similar way. But it should be remembered that by creating too many layers, we can, on the contrary, worsen the situation.
  • Among other things, try not to use “layered” animations with elements that are rendered by the browser. Example: the movement of several superimposed semitransparent blocks with shadows or a series of filters overlapping the lower layers significantly increase the inhibition. If you really need to use overlays (for example, when creating parallaxes), try to replace such things with semi-transparent images.
  • Also, additional overhead is caused by accessing elements using JS. Moreover, this is not necessarily a change in styles, it can also be a call to some properties and methods of elements, such as offset or scroll. Therefore, try to minimize the number and frequency of such requests. And, if possible, do not change the standard properties – such as scrolling with js. Stick to CSS properties and use JS only as a last resort.
  • Try to avoid the setInterval and setTimeout functions. The point is that they are not “tied” to the browser’s rendering engine and are not synchronized with time when the browser “builds” a new frame. This means that there is a risk of losing synchronization with the user’s device. In addition, due to the use of these features, animations will continue to play even if you switch to another tab. That is, they will continue to run and slow down the system, although the user will not even see them. Instead of setInterval and setTimeout in such cases, it is better to use requestAnimationFrame.
  • On the other hand, you shouldn’t use requestAnimationFrame if there are too many animated elements on the page – this can lead to a noticeable FPS drop. Yes, thanks to this tool, the animation will be smooth and beautiful, but its playback will take several times longer than planned. In such a situation, you can disregard the recommendation from the previous paragraph and use the setInterval and setTimeout functions.
  • If you have a choice between 2d canvas and WebGL, choose the latter. The same advice can be given for complex filters and effects. WebGL will provide an initial performance boost for the same tasks. As for optimizing WebGL itself, this is a topic for another long article.

And some life hacks

  • Set animation timings using variables, this will allow you to slow down or speed up the entire animation in a couple of clicks, if necessary.
  • Test your animation at low speed to identify any bugs (or make sure you don’t).
  • Use the pointer-events property to prevent unwanted animation breaks due to user interaction.
  • Remember to use negative animation delay values, this makes it possible to instantly start playback from the position of the time specified in the delay.
  • Pseudo-elements can be animated too.
  • Use Scroll Snapping to implement custom page scrolling.
  • Adding discrete properties to keyframes can result in such properties being executed at different times in different browsers. To avoid this, set the minimum interval in a fraction of a percent in the keyframes in the place you need and change the property.
  • As browsers expand support for new properties, you can start to include them in your arsenal when creating animations. That said, you can always use the supports rule to determine what the user can see and adjust the output.

That’s all. Although we can talk about animation for a long time. For example, we could talk about what’s new in the animation world – new filters and media queries, or more recent advanced tools and technologies such as the Web Animations API. Would you like to read about trends in animation? If so, we will be happy to dedicate the next article to this topic!