10 Little Things Every Designer Should Know About Animation
That Make a Big Difference
Understanding Curves
A
Learning Curves
Linear
Learning Curves
Ease In
Learning Curves
Ease Out
Learning Curves
Ease In and Out
Learning Curves
Spring
Drivers
B
Drivers
Drivers
Drivers
Subtlety is Key, and Kind �of Magical
1
1 - Subtlety is Key, and Kind of Magical
Small Movements Can Feel Big
2
2 - Small Movements Can Feel Big
100+ pixels
(from off screen)
~20 pixels
(with fade in)
Fake it, Don’t Actually Make It
3
3 - Fake it, Don’t Actually Make It
Individual shapes animated is a cool idea, but implementation can be tricky.
3 - Fake it, Don’t Actually Make It
Sometimes it’s better to just transition between two separate icons with some smoke and mirrors.
Smooth Things Out
4
4 - Smooth Things Out
Default transition times and placements
Spent 5 more minutes adjusting parameters
4 - Smooth Things Out
Be Super Organized
5
5 - Be Super Organized
5 - Be Super Organized
Get the calculator out and crunch some numbers. It will save you so much time.
Do One Thing At a Time
6
6 - Do One Thing At a Time
Everything happens at once
Move & shorter fade precedes rotation.
6 - Do One Thing At a Time
Combine 2 of These: �Scale, Opacity, Position, Rotation
7
7 - Combine 2 of These: Scale, Opacity, Position, Rotation
Scale + Opacity
7 - Combine 2 of These: Scale, Opacity, Position, Rotation
Position + Opacity
7 - Combine 2 of These: Scale, Opacity, Position, Rotation
Scale + Position
7 - Combine 2 of These: Scale, Opacity, Position, Rotation
Scale + Rotation
Don’t Overdo It
8
8 - Don’t Overdo It
8 - Don’t Overdo It
8 - Don’t Overdo It
8 - Don’t Overdo It
Tell a Story
9
9 - Tell a Story
Look at Principle with Engineers
10
10 - Look at Principle with Engineers
Principle
TK Planner App