Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Fundamentals of User Interface Animation
Search
usable
July 26, 2018
Design
3
44
The Fundamentals of User Interface Animation
Presented by Joshua Oluwagbemiga at the usable meetup.
usable
July 26, 2018
Tweet
Share
More Decks by usable
See All by usable
Building Better Products with Design Thinking
usable
2
99
Best Practices for Dashboard Design
usable
3
190
Inclusive Design: Designing Fintechs Products That Bring People Together
usable
2
88
Process
usable
3
50
Design Thinking and Psychology
usable
2
69
Designer's Guide to Remote Usability Testing
usable
4
140
Harnessing the Power of Empathy in Design
usable
3
85
Customer Experience is Becoming Branding, and Other Lessons
usable
2
87
On Being A Solo Designer
usable
2
27
Other Decks in Design
See All in Design
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Findyのプロデチームの 歩みとこれから
satty9556
0
320
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.9k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
100
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
190
What makes a great Director?
_limex_
0
330
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.5k
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.4k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Featured
See All Featured
Making Projects Easy
brettharned
120
6.4k
Site-Speed That Sticks
csswizardry
13
910
Side Projects
sachag
455
43k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Building an army of robots
kneath
306
46k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Git: the NoSQL Database
bkeepers
PRO
431
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
UI Animations The Fundamentals of by Joshua Oluwagbemiga @joaccord
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
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
Motion helps make the UI expressive and easy to use.
WHAT IS UI ANIMATION Google Design, material.io @joaccord Informative Focused Expressive
The Timeline @joaccord FUNDAMENTAL
The timeline contains the animation controls, organises elements in a
project and animates them using keyframes. TIMELINE @joaccord
General Anatomy TIMELINE @joaccord 0s 1s 0.5s Circle Square
A keyframe is a location on the timeline that holds
property information of an element. TIMELINE @joaccord
Properties are object parameters that can be animated. TIMELINE @joaccord
Position-X Property: 100px - 700px Size Property: 60px - 180px
Property Examples TIMELINE @joaccord Position Scale / Size Rotation Color
Border Radius Opacity
Speed & Timing @joaccord FUNDAMENTAL
This refers to how fast or how slow specific UI
transitions should happen. Speed adjustments make transitions responsive and smooth. SPEED & TIMING @joaccord
The Curve or Graph Editor SPEED & TIMING @joaccord Y
Position Time Linear Ease
Understanding motion curves SPEED & TIMING @joaccord Progression Time 0s
1s 0% 100%
Linear Motion SPEED & TIMING @joaccord Y Position Time 0s
1s 0px 200px Linear
Bézier motion curves SPEED & TIMING @joaccord Y Position Time
0s 1s 0px 200px Ease Both
Easing @joaccord FUNDAMENTAL
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
Linear vs Easing EASING @joaccord Linear Ease ! !
Linear vs Easing - Example EASING
The Ease EASING @joaccord Y Position Time 0s 1s 0%
100%
Ease In EASING @joaccord Y Position Time 0s 1s 0%
100%
Ease Out EASING @joaccord Y Position Time 0s 1s 0%
100%
Ease In Ease Out EASING @joaccord Y Position Time 0s
1s 0% 100%
Thank You @joaccord