UI/UX animation emphasizes the details to which users should pay attention, helping them navigate the site.

Good animation also makes the whole user experience more memorable and exciting.

It also

your

controls

attention

UI/UX animation captures the mood of a brand or product and conveys it to a target audience

Here, animation gives a pumping vibe to a fitness website.

It can also take game apps to the next level...

An architect’s studio can convey its brand with a suite of complementary animation techniques.

Animation encourages interaction by enticing users to explore

Animation lets us hint at how to use sliders and other navigation elements.

Animation guides the eye from one key visual element to the next.

Animation unpacks all the visual information that the user sees on the screen.

Interactive

There are two types of interactive interfaces:

Real-time respond as users interact with them.

Not real-time respond after the interaction has taken place.

Real-time

Not real-time

Interface

animation

techniques

Every interface animation draws from the same repertoire of techniques to make sites and apps more engaging. Many of these have their roots in the golden age of hand-drawn cartoons – but have been adapted for the digital era.

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.

Linear

With linear easing, the object travels at a constant speed, without acceleration or deceleration.

Ease

Here the object accelerates slightly at the beginning and decelerates slightly at the end

Ease-in

Starts its movement slowly, but accelerates as it continues.

Ease-out

The opposite of ease-in - starts moving quickly and then slows down smoothly at the end.

Cubic

Cubic is similar to ease, but due to longer periods of acceleration and deceleration, the middle part of the path appears to pass more quickly.

With linear easing, the object travels at a constant speed, without acceleration or deceleration.

Let’s look at an example

Missing easing & delay

Correct easing

Correct delay & animation

Implementation examples

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

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.

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

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.

Implementation examples

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.

Implementation examples

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

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

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