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:
interactive interfaces:
Real-time respond as users interact
with them.
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
An example from classic animation
![](images/1_car_curve_demo_full_00000.webp)
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.
![](images/1_car_easing_comparison_00000.webp)
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
![](images/flower-20delivery_desktop_00000.png)
Here, content elements appear one by one, adding softness to the movement and creating the impression of viscosity.
View
![](images/playstation-205-20promo_desktop_00000.png)
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
![](images/ima-home-20early_desktop_00000.png)
Here, once again, one-by-one appearance of content elements draws the viewer in.
View
An example from classic animation
![](images/1_flower_full_demo_00000-20-1-.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
![](images/royal-20caribbean-27s-20icon_desktop_00000.png)
Here we see text appearing under a mask before fading out and disappearing.
View
![](images/opencolony-20website_desktop_00000.png)
Here, a fade-in, fade-out animation of both opacity and position brings life to a text box.
View
![](images/siren-20website-20design_desktop_00000.png)
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
![](images/royal-20caribbean-27s-20icon_desktop_00000.png)
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
![](images/crappy-20explanation_desktop_00000.png)
Here, the ability to leaf through a box of records is used to create a feeling of depth.
View
![](images/social-20network-20feed_desktop_00000.png)
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
![](images/milkinside_desktop_00000.png)
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
![](images/breathtaking_desktop_00000.png)
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
![](images/the-20ways-20we-20work_desktop_00000.png)
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
![](images/www.schoolofmotion.com-402.png)
![](images/www.benmarriott.com-402.png)
![](images/www.domestika.org-402.png)
![](images/www.millionframes.com-402.png)
![](images/www.awwwards.com-402.png)
![](images/www.udemy.com-402.png)
![](images/motiondesign.school-402.png)
![](images/careerfoundry.com-402.png)
![](images/prjctr.com-402.png)
![](images/www.uxinmotion.com-402.png)
![](images/aelaschool.com-402.png)
![](images/infinum.com-402.png)
![](images/www.creativebloq-402.png)
![](images/medium.com-402.png)
courses
10
Sources
4
Motion
design
principles
Made by Zajno
© 2024. All rights reserved.