UI Animations
The Fundamentals of
by Joshua Oluwagbemiga
@joaccord
Slide 2
Slide 2 text
Principles are the underlying
premises and rules of
function giving rise to any
number of techniques. These
elements remain consistent,
no matter what is happening.
FOOD FOR THOUGHT
Tyler Waye
@joaccord
Slide 3
Slide 3 text
This is the implementation of
motion in order to enhance
the overall presentation and
interactivity of a product.
WHAT IS UI
ANIMATION
Corey Devine, Oho
@joaccord
Slide 4
Slide 4 text
Motion helps make the UI
expressive and easy to use.
WHAT IS UI
ANIMATION
Google Design, material.io
@joaccord
Informative Focused Expressive
Slide 5
Slide 5 text
The Timeline
@joaccord
FUNDAMENTAL
Slide 6
Slide 6 text
The timeline contains the
animation controls,
organises elements in a
project and animates them
using keyframes.
TIMELINE
@joaccord
Slide 7
Slide 7 text
General Anatomy
TIMELINE
@joaccord
0s 1s
0.5s
Circle
Square
Slide 8
Slide 8 text
A keyframe is a location on the
timeline that holds property
information of an element.
TIMELINE
@joaccord
Slide 9
Slide 9 text
Properties are object parameters
that can be animated.
TIMELINE
@joaccord
Position-X Property: 100px - 700px
Size Property: 60px - 180px
Slide 10
Slide 10 text
Property Examples
TIMELINE
@joaccord
Position Scale / Size Rotation
Color Border Radius Opacity
Slide 11
Slide 11 text
Speed & Timing
@joaccord
FUNDAMENTAL
Slide 12
Slide 12 text
This refers to how fast or how
slow specific UI transitions
should happen. Speed
adjustments make transitions
responsive and smooth.
SPEED & TIMING
@joaccord
Slide 13
Slide 13 text
The Curve or Graph Editor
SPEED & TIMING
@joaccord
Y Position
Time Linear Ease
Linear Motion
SPEED & TIMING
@joaccord
Y Position
Time
0s 1s
0px
200px
Linear
Slide 16
Slide 16 text
Bézier motion curves
SPEED & TIMING
@joaccord
Y Position
Time
0s 1s
0px
200px
Ease Both
Slide 17
Slide 17 text
Easing
@joaccord
FUNDAMENTAL
Slide 18
Slide 18 text
This is a way to adjust an
animation’s rate of change.
Easing allows transitioning
elements to speed up and
slow down, rather than
moving at a constant rate.
EASING
@joaccord
Google Design, material.io
Slide 19
Slide 19 text
Linear vs Easing
EASING
@joaccord
Linear
Ease
!
!
Slide 20
Slide 20 text
Linear vs Easing - Example
EASING
Slide 21
Slide 21 text
The Ease
EASING
@joaccord
Y Position
Time
0s 1s
0%
100%
Slide 22
Slide 22 text
Ease In
EASING
@joaccord
Y Position
Time
0s 1s
0%
100%
Slide 23
Slide 23 text
Ease Out
EASING
@joaccord
Y Position
Time
0s 1s
0%
100%
Slide 24
Slide 24 text
Ease In Ease Out
EASING
@joaccord
Y Position
Time
0s 1s
0%
100%