Join or Log in

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

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

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

Added by Jennifer Shen
Updated a year ago

Nothing here yet...

Go to Jennifer Shen's profile or explore recent public channels from other users