Types of Motion Flashcards
What is Functional Motion?
Improve usability & user experience
eg.) Drag & drop, Animated hover & click states
What is Emotional Motion?
Character and illustration motions
eg.) Success and failure states, Moments of delight
What is Structural Motion?
Elements moving on & off screens and Elements growing to a detail view
eg.) Modals, Dropdowns, Tooltips, Parallax animation
What is an Interaction Trigger?
What causes the animation?
i.e. mouse over, tap, swipe, scroll, page load
What is Timing?
The duration ( how long does the animation take)
The delay ( how long after the trigger the animation takes)
What is Response?
What happens to element(s) once triggered.
i.e) move, flip, decrease opacity, change color, grow/shrink
What is Easing?
The physics of animation
i.e) smoothness
How long are short-duration animations?
300ms max or else perceived performance may suffer.
Micro-interactions like hover & click states
What are long durations?
Typically used to create drama or impact. Screen to screen transitions or elements traversing large parts of the screen.
What are the common five easing curves?
- Linear
- Accelerate
- Ease Both
- Decelerate
- Elastic
LADE
Linear, Accelerate, Decelerate, Ease Both, Elastic
What is Linear easing curve?
- Avoid using unless animating specific objects that should move at a constant rate (i.e. music playing)
What is an Accelerate easing curve?
Ease In
- Use when objects leave the field of view
- Starts slow ends fast
What is an Ease Both easing curve?
(Ease In, Ease Out)
- Best objects that are always on the screen
- Maps closely to how objects behave in the real world. Use when objects start and end in the field of view.
- Fastest point is in the middle
What is a Decelerate easing curve?
East out
- Use when objects enter the field of view (think friction and gravity)
- Starts Fasts, Ends Slow
What is a Elastic (spring) easing curve
- Can help portray a “fun and playful” experience.
* Be careful not to overuse
