Make this text short nad give examples. (use a casual tone) 
12 Principles of Animation in UI design
29
• In digital interfaces it gives the
elements haptic quality and
suggest visual cues to the user (e.g.
drawing attention to the purchase
button so as to induce the user to
press it)
• When applying this principle, the
volume of the deformed element
must be kept consistent
1. Squash and Stretch: applying a contrasting shape change to give
a sense of flexibility and vitality to the animation© G. Malnati – 2022-23
Principles of Animation in UI design
30
• This concept is adopted in digital
interfaces to anticipate the users
that something will happen if they
take a specific action and what,
hover animations are one of the
most common uses of this
2. Anticipation: animation prepares the viewer for what is about to
happen, thus making any movement feel real© G. Malnati – 2022-23
Principles of Animation in UI design
31
• When an interface has a lot of animations,
it helps the user focus on the most vital
elements of the interface while minimizing
the motion of the less crucial ones
• In the use-case of navigation, the principle
is used to reduce the sense of the
unexpected that can occur when faced
with a page change, this can help make the
visual hierarchy and its relationship to the
information architecture clearer
3. Staging: motion is used to direct the viewer's attention and
highlight the key elements of the scene© G. Malnati – 2022-23
Principles of Animation in UI design
32
• Unless you're looking to animate
something unusual, you'll most
probably use the pose-to-pose
method in UI design, for
example to create component
states (in digital animation the
rest is interpolated
automatically)
4. Straight Ahead: it refers to two distinct approaches to the
animation creation process, straight ahead animation is created
by drawing frame by frame from beginning to end, instead the
pose-to-pose technique begins with creating the key frame at
the start, middle and end© G. Malnati – 2022-23
Principles of Animation in UI design
33
• In a web interface you can have
elements that are related but move at
different rates, with the initiator of
the movement being the most
important element: this principle
helps to establish a hierarchy
5. Follow Through and Overlapping Action: when object's parts do
not all move at the same time© G. Malnati – 2022-23
Principles of Animation in UI design
34
6. Slow in and slow out: how an object requires time to
accelerate and decelerate as it moves
• This principle is critical for making any
movement in the design feel natural
and authentic: the animations would
feel robotic without using easing in
and out© G. Malnati – 2022-23
Principles of Animation in UI design
35
• Arcs, rather than straight lines,
can be used as animation paths
in UI animation design to bring
life to the animations.
7. Arc: things move according to arcing motion, the faster
something moves, the flatter the arc and the wider the turn© G. Malnati – 2022-23
Principles of Animation in UI design
36
In UI design, secondary actions are an
example of micro-interactions, they are
used for example to:
• inform of the outcome of invoked
commands showing the evolution of the
system state and eliciting users’ emotions
• communicate complex information in
conjunction with interactive action (in this
case, the user's action is accompanied by
the passage of time, resulting in further
evolutions of the presentation)
8. Secondary Action: complementing or highlighting the main
action taking place in a scene© G. Malnati – 2022-23
Principles of Animation in UI design
37
• In UI design, animation can be
used to inform users about the
performance of actions that take
a "long" time on the perceptual
plane: progress bars, timelines,
page reload gestures (pull-down
to refresh) reduce the stress of
waiting and reinforce the
system's sense of progress
9. Timing: it describes how fast something moves and how long it
remains still© G. Malnati – 2022-23
Loading and advancement
38© G. Malnati – 2022-23
Principles of Animation in UI design
39
• Exaggerating certain elements in UI
animation design can help users
understand how to interact with the
interface. Furthermore, exaggeration
adds an entertaining element to the
design
• The viewer will not notice a good
animation effect, however, excessive
exaggeration may be irritating
10.Exaggeration: pushing movements further to add more drama
and appeal to an action© G. Malnati – 2022-23
Principles of Animation in UI design
40
• In UI it’s critical to maintain
consistency and any distortion
must be justified not to confuse
the user
• The principle of solid drawing is
important principle for
skeuomorphism which is where
an object in software mimics its
real-world counterpart
11.Solid Drawing: animation should apply the basic drawing
principles such as form, weight, and volume to create the
illusion of a three-dimensional object in motion© G. Malnati – 2022-23
Principles of Animation in UI design
41
• In UI you can use animation to
define your product's personality
and attract users' attention to
certain aspects of the brand so to
tell a story in few seconds