Animations can enhance the experience by improving feedback, aid in orientation, direct attention, show causality, and express your brand’s personality.
- Reduce cognitive load, better to understand 
    - Establish spatial relationships


People were shown animated shapes, and people were emotionally connected to the shapes that they made a story of why they are moving a certain way (even when there is no story)

Provide consistency: even when layout might change in diff platforms, if the individual elements still animate the same way, then it unifies the experience
 - consider UI choreography
        - has to match brand personality, eg apples sleek image doesn’t fit its bouncing animations (fun/immature)
    - similar UI elements should animate in similar ways

12 rules of animating:
- Remember time and spacing, what is natural for a physical object? Easy ease
- Follow-through: not everything in motion comes to a stop at once. Use Cubic Bezier curve

- Overlapping action and offsets: character doesn’t wait for one action to be completely finished before starting the next
- Anticipation: Small movement in preparation for the large action to that is about to take place

- Secondary action: additional motion that compliments and support the primary motion
- Arcs: movements are NOT straight lines. Most movements are curved. 
- Squash and Stretch: deformation happens due to motion. Ball bounce etc. Represents rigidity of object. 
- Exaggeration: Making the animation more apparent and real

  • Transitions shouldn’t take too long, shouldn’t come between the user and the task
  • Good animations are flexible like a good conversation; depending on what the user’s input is (click/svroll/swipe), animation should be responsive.     - If user realize input is being skipped or ignored, trust is lost.     - Animation that ignores input while it’s active is a blocking animation

Time: 
- Small UI: 200-350ms
- Large motion: 400-500ms

Notes:
Ive always known that you have to make sure animations and transitions have to be unified throughout the app/website but I like how they used the word “choreography”. It really reminds me that the elements have to work together in giving the user an unified experience.

Animation Tutorial Notes