1
THE BASICS OF EASING
In nature, the speed of movement is never linear: objects gain speed as they begin to move, and slow as they come to a halt. Easing is the technique that allows us to convey this.
With linear easing, the object travels at a constant speed, without acceleration or deceleration.
Let's look at an example
An example from classic animation
Slow in and slow out
Think about how a car starts and stops. At first, it moves slowly before gaining momentum and speeding up. When the car brakes, the process reverses.
In animation, this effect is achieved by adding more frames at the beginning and end of an action sequence. Applying this principle gives your objects more life.
2
OFFSET
AND DELAY
A slight delay between two or more objects creates a feeling of softness and multi-layered movement. This technique also helps to direct the user's attention, indicating an objects's place within a hierarchy of elements.
Implementation examples
Here, content elements appear one by one, adding softness to the movement and creating the impression of viscosity.
View
Having the visual elements arrive one at a time gives each of them a chance to shine and makes the whole effect more engaging.
View
Here, once again, one-by-one appearance of content elements draws the viewer in.
View
An example from classic animation
.webp)
Follow through and overlapping action
When objects come to a standstill after being in motion, different parts will stop at different speed. Similarly, not everything on an object will move at the same speed. This forms the essence of the fifth of Disney's principles of animation.
If your character is running across the scene, their arms and legs may be moving at a different speed from their head. This is an overlapping action. Likewise, when they stop running, their hair will likely continue to move for a few frames before coming to rest – this is follow-through. These are essential principles to understand if you want your animation to flow realistically.
If your character is running across the scene, their arms and legs may be moving at a different speed from their head. This is an overlapping action. Likewise, when they stop running, their hair will likely continue to move for a few frames before coming to rest – this is follow-through. These are essential principles to understand if you want your animation to flow realistically.
View
3
FADE-IN FADE-OUT
Fade-in, fade-out is the appearance and disappearance of an object via a transition from transparency to opacity. The most widespread and versatile technique for object appearance and disappearance, it works best in conjunction with other techniques, such as animation of position, scale, or (occasionally) form. Where several objects appear on a single screen, it is best also to add some delay.
Implementation examples
Here we see text appearing under a mask before fading out and disappearing.
View
Here, a fade-in, fade-out animation of both opacity and position brings life to a text box.
View
To help distinguish adjacent elements we can animate one with both opacity and position, and the other solely with opacity.
View
4
TRANSFORM & MORPH
A technique for transforming one object (say, a round icon) into another (for example, a large square picture). This creates continuity and holds the viewer's attention on a key object from one screen to another – particularly effective for storytelling.
5
MASKING
Similar to morph, masking lets us use the morphic object as a mask for photography. The photo in the mask can scale, move, or spin – creating a feeling of softness and spaciousness in movement.
6
DIMENSION
Of the various ways we can convey volume, the most popular is Floating Dimensionality. This technique makes interaction with objects intuitive and narrative, enriching the experience of using the site or application.
Implementation examples
Here, an animation of a ship sailing away into the distance creates an illusion of space. Reinforcing this, the text follows in the ship's wake.
View
Here, the ability to leaf through a box of records is used to create a feeling of depth.
View
Here it's the ability to scroll left and right through your cards that creates a feeling of depth.
View
7
PARALLAX
Arranged in layers, several objects pass simultaneously through x and y axes: the farther the object, the less it passes. The result is a feeling of space.
Implementation examples
As the matte translucent object with the chart and other information moves upwards, the cards underneath it subtly shift position. This 'parallax effect' supports the main 3D visualization.
View
A classic use of parallax sees an in-focus foreground move in relation to the out-of-focus scenery beyond – just like the view the runner sees.
View
In interactive parallax, movements of the mouse trigger slight displacement of objects on screen – a stylish finishing touch for a minimalistic design.
View
8
ZOOM
This technique brings continuity to narrative and lets us achieve a smooth transition between interface, objects, and destinations. Zoom also adds depth and informs users about additional content that is out of sight.
Implementation examples
Useful
courses
&Sources
You are always a student, never a master
courses
10
Sources
4