Animation is usually associated with cartoons or videos. The concept of animation is also present on the web. Elements on a web page can change their position, opacity, shape, size, etc.
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.
Let's take a closer look at the latter. In this article, we'll go through what goes into the design of web animation:

Speed in Animation

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.
An example of interface elements appearing from below
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

Animation Duration

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.

How to choose animation speed. Motion path distance and element size

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.
0.2-0.5 seconds (200-500 milliseconds)
Appearance duration - 0.2 seconds
Appearance duration - 0.5 seconds
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:
0.1-1 second (100-1000 milliseconds)
0.1-second movement
1-second movement
Hover over the button
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.

Physical properties of elements

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 refers to a change in the speed of an element within a single animation, such as it slowing down or speeding up.
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.
Example of an animated element without easing. The speed of the element doesn't change throughout the entire movement.
Graph depicting motion without easing
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.
7 Example of animation and graph with easing at the beginning and at the end of the effect. The easing parameters at the beginning and at the end are symmetrical.

Easing at the beginning of the animation (Ease-In)

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

Easing at the end of the animation (Ease-Out)

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

Asymmetric easing

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.
Example of asymmetric easing: Quick acceleration and smooth stop
10 Example of smooth acceleration and quick stop

Elastic and Bounce

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.
Sample animation of a ball with the Elastic effect
Sample animation of a ball with the Bounce effect
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. How to read and understand graphs

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.
A quadratic Bezier curve contains three points. This means that the animation easing will be either at the beginning or at the end (Ease-In or Ease-Out).
A cubic Bezier curve contains four points, making it possible to set easing both at the beginning and at the end of the animation.

Learning to read graphs

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.
Animation with smooth acceleration and deceleration and quick motion in the middle of the path
Let’s see what this graph can tell us:

  • The curve starts moving up from the bottom left corner
  • If you look closely at the time and distance markers, you can see that the element is accelerating. The line is flat, which means that the element hardly covers any distance in the first two time intervals
  • In the middle of the graph, you can clearly see how the element covers almost all of its allotted distance in a very short period of time
  • In the last segment, the element decelerates as slowly as it accelerated in the beginning
The element’s motion is almost linear
On the second graph
  • The acceleration of the element lasts longer than in the previous graph
  • The element accelerates in the middle of the curve
  • The element slows down sharply at the end


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:

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.
This service contains completed animation projects, which can prove useful as ready-made examples that contain the right values.

Breaking down the preset animation effects on Tilda

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.
An example of the basic animation settings panel in the "Cover" block
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:
An example of the preset animation in Cover CR17. The style of element animation is "Fade in Up"
In the example, we assigned the same animation style—appearing from below—to all elements in order to see the motion more clearly.
Title appears
Description appears
  • Style — Fade In Up
  • Delay — 0 sec
  • Duration — 1.2 sec
  • Animation — Ease In Out
  • Distance — 100px
  • Style — Fade In Up
  • Delay — 0.3 sec
  • Duration — 0.7 sec
  • Animation — Ease In Out
  • Distance — 100px
  • Style — Fade In Up
  • Duration — 1 sec
  • Delay — 0.8 sec
  • Animation — Ease In Out
  • Distance — 100px
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:
Basic animation graph for Tilda blocks. Easing values: 0.19, 1, 0.22, 11.
The graph shows that the elements accelerate rapidly at the beginning, and gradually decelerate at the end.


Choreography in animation is the combination of the movement dynamics of several elements in a single animation.
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).

Animation sequences

Parallel animation. Animation elements that have the same speed and time, making them look like one group.
Massage therapist
59 Rossmore Rd, London, NW1 6RB
Open from 10:00 to 24:00
Example of a heading and description appearing on the cover at the same time
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).
Massage therapist
59 Rossmore Rd, London, NW1 6RB
Open from 10:00 to 24:00
Example of elements appearing on the cover with a delay
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.
Italian Culinary Masterclass
Our masterclass will teach you how to cook 3 authentic Italian dishes by yourself using the best ingredients and under the supervision of of an Italian chef.
August 16, 12 p.m.
The Avenue Cooking School
Example of grouping elements on the cover with a delay and different element speeds
The sequence of animation depends on the importance of the element, as there are equal elements and key elements.

Equal 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.
Equal elements
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:
Animation Style — Fade In Up

  • Card 1 Delay — 0.32 sec
  • Card 2 Delay — 0.48 sec
  • Card 3 Delay — 0.64 sec
  • Ease In Out — 19, 1, 22, 11
Key elements
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.
All interviews

Reasonable Animation

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?

Animation balance

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.

Let's Recap

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:
Don't animate too many elements. Choose one element to start with.
Don't apply many different effects. Choose two, and use additional techniques at the end.
Animate elements of the same purpose and value in the same style.
Make sure the animation isn't too fast or too drawn out.
Use Easing and compare it to the movement of a physical object when planning the animation.
Pay attention to choreography. For animations with key elements, think of a rhythm. On the contrary, elements that serve the same purpose (lists, columns, gallery photos) should be animated in the same way, simultaneously or with a small delay.
Replace the simultaneous sequential animation of elements with a slight delay where possible. This will lighten the load on the page.
Avoid heavy images. This will also help with loading both the animations and the images on the page.
Test your animations on low-powered computers and slow Internet connections.
Project curator: Nikita Obukhov
Text, design, and layout: Yana Plushcheva
Illustrations: Roman Kosov, Yana Plushcheva