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.