BASIC THEORY
OF WEB ANIMATION

There is functional animation that makes the interface more intuitive and user-friendly. Such animation type is used in product interfaces and mobile apps. And there is decorative animation which is mostly used on landing pages or special projects, serving to attract the viewer's attention, make the project more interesting, and help evoke certain emotions.

Animation speed reflects the ratio of the distance traveled by an element to the time it took to do so. Speed also includes all the changes the element undergoes from start to finish. This is one of the key components of animation, as it is responsible for the overall dynamics and mood you’re trying to create. Making animations is a pretty creative process, you’ll quickly find that it is not that different from directing your own movie.

When designing an animation, it's important to think about:

• How long it will last
• The speed at which the animation effect happens
• At what speed the element will start and end the movement

What duration should you choose to make the animation look neat? There is no exact answer. It is important not to keep the user waiting for the outcome of the motion, but also not to make the animation too fast. The viewer should have time to understand where the element appeared on the screen, and how it got to a new place. In general, the animation should feel natural.

More dynamic animations are suitable for the appearance of small elements such as texts, lists, cards, or buttons. Large elements are usually animated more smoothly. The duration also depends on the amount of space the animation takes up. High speed is more suitable for micro-movements, because the higher the speed, the more attention it requires, distracting the user from the rest of the content.

Movement distance in web animation is usually short:

• Elements revealing from transparency (cards, lists, pictures)
• Hover effects (animation on mouse hover) for buttons and cards: Zoom, shift, color change
• Pop-up (e.g. photo enlargement)
• Animated slideshow

Although animation parameters may vary depending on the project, animation speed tends to follow a universal set of rules. Animation is most comfortable to perceive within the limits specified below, use them as a guide and you won’t go wrong.

This is the average range of value for animating most elements, not too fast and not too slow. This range is enough to animate text, tiles, lists, and decorative elements. Let’s increase the interval:

A 0.1-second interval is perceived as an instant, making it suitable for small elements and movements (hovering, switching tabs, swiping in galleries), while animations longer than a second will appear tiresome. It’s a good idea to make sure that you are not applying that animation to an important element on the web page.

These figures were revealed in a study by Neilson Norman Group (a user experience research and consulting company) and the Model Human Processor.

When the properties of an animated element are similar to the properties of physical objects, they are easier to perceive. These animations are more predictable, which is why they do not cause discomfort.

They help trigger certain associations and emotions which are familiar to the user. One of the main ways to achieve a natural feel is to imagine how a physical object would behave if it was moving like your animation. How does this affect speed?

• For example, identical elements will move differently if they travel different distances. When elements move, the one with the shortest distance will stop first.
• Elements that vary in mass also move differently, the larger ones tend to move more slowly. If it were a physical object, its mass would prevent it from moving faster.

These rules are closely related to our perception. It is important to remember that physical objects always have a start and an end to their movement. At some point, they accelerate (e.g. at the start, if they are pushed) and at some point, they slow down (e.g. at the end of the path). Web animation conveys these properties with the help of Easing.

Easing is the most important technique in animation design, giving elements authenticity, character, and dynamics.

Easing is usually depicted through a graph of the relationship between the movement distance (Y-axis) and the time it takes to cover it (X-axis). If one learns to read and compose them correctly, it will help designers explain the task to the developer more clearly.

Linear movement comes across as the most unnatural. Imagine that the speed of the element does not change all the way through the animation as if there were no gravity and friction. Such animation will look artificial and just sloppy.

There are several types of the easing effect. Going through them and learning to apply them in your projects will definitely prove useful. Here’s what the most common examples of easing and their graphs look like:

This type of easing is the most common. Ease-In-Out transitions consist of smoothly accelerating an element at the beginning and slowing it down at the end of the movement. Animations look the most natural this way: Element accelerates, completes the movement, and comes to a stop.

In this case, the element accelerates at the beginning and has a constant animation speed. This type of animation looks like a rocket launch.

In Ease-Out animations, the element has a pronounced rapid movement at the beginning and a smooth stop motion at the end.

Asymmetric easing allows you to apply more subtle settings to accurately convey physical properties. In this case, the acceleration and deceleration points have their own dynamics, and the graphs with the animation curves can look completely different. For example, an element can have a smooth acceleration at the beginning and a quick stop at the end.

When objects collide, they can bounce off each other or stretch in different directions. In animation design, these effects are called Bounce and Elastic. These effects make the movement look natural.

The movement amplitude depends on the overall idea of the project. When designing, compare your element to a physical object to see exactly how to build the animation. If you want to achieve the effect of a jumping light soft ball, then the element’s acceleration will have to be smooth, while its bounce off the surface will have to be large. On the other hand, if you imagine a falling metal ball, its descent will be much faster, while its bounce will be barely noticeable.

The easing of the animation, the bounce, and the speed add up to a certain dynamic. By learning to use these tools, you will know how to set the right tone for your animation.

Bezier curves are used to plot the acceleration of an element. A Bezier curve is a mathematical curve on a graph containing the Y (distance) and X (speed) axes, which reflect the distance traveled by the element in space and the time it took to do so. By adjusting the curve, you can adjust how fast the element travels different parts of its path.

There are two types of Bezier curves, Quadratic and Cubic. The coordinates of the first and the last point are clearly defined, they lie on the curve. The other points are adjustable and lie outside the line. Moving the points transforms the curve, creating a smooth shape.

To learn how to read graphs and understand how the angles on the curve show the dynamics of motion, let's draw two similar yet slightly different graphs.

There are no universal values for points on a curve that would make a perfect animation. The important thing here is to experiment and gradually figure out what motion dynamics are appropriate for each case. Once you learn how to read charts, you can use that knowledge more professionally. To make your life a bit easier, here are a couple of services that help designers visualize animations:

cubic-bezier
This service helps move the curve, reproduce its settings, and save the desired result. To simplify the transfer of the animation project to the development team, you can copy the coordinate point values and share them with the developer.

easings.net
This service contains completed animation projects, which can prove useful as ready-made examples that contain the right values.

There are different kinds of animations on Tilda. There is an advanced tool in Zero Block for designers where you can set up custom animation effects, and there are basic blocks with preset basic animation effects.

You can learn more about animation on Tilda here.

We wanted to give non-professional designers an opportunity to add cool animations to their projects, which is why we added preset animations to the blocks. The settings we used for them are, in our opinion, perfectly balanced while remaining universal. All that you need to do is to activate the animation for the desired element (header, subheader, etc.) in the Settings panel of the block.

The animations were put together by our designers. The speed is neither too fast nor too slow, and the elements follow each other in harmony. Let’s break down how Tilda’s animation settings work by using one of the covers as an example:

In the example, we assigned the same animation style—appearing from below—to all elements in order to see the motion more clearly.

We paid attention to working out at what speed the elements would appear one after another, at what delay, and at what displacement. If you look closely at the values on the cover above, you can see that:

• The first element to appear is the largest one (the heading is the largest, hence it is the key element)
• The title is followed by a description, which is of secondary importance. The animation speed is higher here.
• The button appears last, and its speed of appearance is faster than those of both texts.

The Easing style is the same for all elements with preset animation:

The graph shows that the elements accelerate rapidly at the beginning, and gradually decelerate at the end.

Choreography helps create rhythm in animation. This is similar to musical rhythm, as it determines the character of the work at hand. What is important here is that the movements in the animation are clearly defined and not monotonous (with the same time interval between each other).

Parallel animation. Animation elements that have the same speed and time, making them look like one group.

Delayed animation. This refers to animation containing a small delay between the appearing elements, with the next element moving a bit faster than the previous one. For the elements to still be part of the same group, the delay interval has to be small (e.g. 0.3 sec).

Element grouping. You can group elements together and combine parallel and delayed animation. For example, you can make all the texts in the header appear at the same time, and make the buttons appear with a delay.

The sequence of animation depends on the importance of the element, as there are equal elements and key elements.

The visual emphasis will be made on the key element, while the rest will be unified as much as possible. For example, the heading of the page may be the main element, while subheadings and images will be secondary. One way to highlight the key element is to show the title first, followed by a pause and the appearance of the secondary elements at a slower rate.

On a web page, these are usually lists, photo galleries, patterns, elements with a similar purpose. They can appear together or one after another. When appearing one after another, the animation of the appearance should be the same.

The photos in a gallery are part of the same entity. It is important that the viewer’s attention is not scattered. You have to ensure that the animation is simple, uniform, and quick enough.

This type of animation is not meant to attract attention, as it only adds dynamics while the page is scrolling. A good technique to visually gather the different elements in a group is to start the animation of the second element before the end of the first animation. For example:

Key elements, on the other hand, set the tone and focus the user’s attention. This can either be one element or several elements (then they are gathered into groups). For example, you can make a bright large heading, set it to appear quickly without a delay, but with a slowdown at the end. The other elements can appear smoothly and after the heading, but with a long delay.

Animation is a tool to add expression, emphasis, and control attention. It is a very powerful tool, which is often used ineptly. When it comes to animation, there’s often a great temptation to apply all the techniques you know in one project. This generally turns out badly as the focus of the viewer’s attention is displaced by the movement of pictures and texts, and immersing oneself in the content becomes very difficult. So how do you know if you are not overdoing it?

The balance of animation in the project refers to the number of animated elements that do not cause a controversial feeling from viewing the page. Adding too much animation is a common mistake. In order not to remove unnecessary animations at the end, it is better to determine how much animation you need at the beginning, guided by the following rules:

Don’t animate all the elements in your project. Overpowering dynamics tire you out, defocusing the viewer. To begin with, determine the elements of emphasis, two are usually enough. For example, headings and gallery photos.

Control the quality. If you are adding animation to a project, it is important to make sure that it works properly and does not freeze. Animation requires a lot of system resources, and it will be slow or intermittent if you have a heavy CPU load. Users will be far from impressed, and there will be no "wow" factor. Therefore, it’s essential that you:

• Don’t animate too many elements
• Test the website on low-powered computers
• Instead of the simultaneous animation of several elements, use a sequence with a short delay
• Don’t upload heavy images to the website

Maintain the hierarchy. Apply the same animation to elements of the same value throughout the website. For example:

• Same heading appearance style
• Same hover style (for example, the appearance of the shadow under the button on mouse hover)

Maintain the style. Apply the same animation style to the hierarchy. For example, you can decide that all section headings will fade in from the bottom, while images and captions will come in from the side.

A limited amount of animation helps you avoid going overboard and getting confused in the styles in the beginning. Make absolutely sure that the minimum amount of animation on the page isn’t enough for you, and only then try to add more.

Animation makes the project more interesting and supports its style, mood, and character. But it can be detrimental if you do not follow the basic rules: