Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The art of UI animation

Vinay Raghu
January 21, 2015

The art of UI animation

Inspired by Mark Geyer's presentation - markgeyer.com/pres/the-art-of-ui-animations/

Vinay Raghu

January 21, 2015
Tweet

More Decks by Vinay Raghu

Other Decks in Design

Transcript

  1. B. Educate your audience • Creatures of habit • Problem

    solvers by nature • Helps connect patterns and understand the app
  2. By offloading interpretation of changes to the perceptual system, animation

    allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised. Source: “Animation: From Cartoons to the User Interface,” published in UIST’93
  3. Performance • Same as before • Stick to opacity and

    transforms • Avoid animating layout properties
  4. Javascript Animation • Green Sock Animation Platform – GSAP •

    Famo.us • Demo • Foundation for apps - Motion UI
  5. Tips • Make it finish quickly • Use them sparingly

    • Avoid extreme repetition • Experiment Source: Smashing Magazine
  6. W hat sets it apart? • Teachable animation • Physics

    based – Mass and weight • Motivation • Metaphor
  7. About Me • IncrementalUX • New Haven UX meetup group

    • Product Developer – Knock Media • http://viii.in • @rvinay88