The art of UI animation

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

Transcript

1. The art of UI animation Vinay Raghu @rvinay88
2. The art of UI animation 1. Theory 2. Implementation 3. Tools 4. Techniques
3. The importance of UI animation
4. A. Form of communication • Adds style and personality • Similar to copywriting
5. B. Educate your audience • Creatures of habit • Problem solvers by nature • Helps connect patterns and understand the app
6. 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
7. The screen is your stage
8. Entry and exit Source: Jeremy Mansfield
9. Entry and exit Source: Foundation for apps
10. State Change Source: Zarin Ficklin
11. Grouping Source: Mark Geyer
12. Context Change
13. Spatial Relationship
14. A cause-effect relationship
15. Feedback for input Source: Ehsan Rahimi, Useyourinterface.com
16. Feedback for input Source: Colin Garven
17. Shake it off Source: Phong Luong Web animation API
18. Add animation capability to UI components
19. CSS animations
20. CSS animations • Transition • Animations • Easing
21. CSS Transition • Transition property – opacity, width, height, translate • Transition duration – in seconds or ms
22. CSS Transition
23. CSS Transition
24. Timing functions • Rate of change over time • Provide effects • Elastic • Spring
25. A tip for easings • Exit ease in • Entry ease out
26. Resources • Cubic Bezier • Easings
27. Performance Source:HTML5 Rocks
28. Performance Source:HTML5 Rocks
29. Resources • High performance animations • Jank Free • CSS Triggers • Will change CSS property
30. W ill change
31. CSS (keyframe) Animation • Only 2 properties • Duration • Name • Define animation separately
32. CSS keyframe animations
33. CSS keyframe animations
34. CSS keyframe animations
35. Performance • Same as before • Stick to opacity and transforms • Avoid animating layout properties
36. Resources • Animate.css • Bounce JS
37. Javascript Animation • Green Sock Animation Platform – GSAP • Famo.us • Demo • Foundation for apps - Motion UI
38. Velocity JS • Replacement for jQuery animate • Well documented (and marketed) • Great performance
39. Velocity JS
40. Velocity JS – UI Pack Demo: Codepen
41. Velocity JS – UI Pack Demo: Codepen
42. Tips • Make it finish quickly • Use them sparingly • Avoid extreme repetition • Experiment Source: Smashing Magazine
43. Other tools – Flinto.com
44. Pixate
45. FramerJS
46. W hat sets it apart? • Teachable animation • Physics based – Mass and weight • Motivation • Metaphor
47. Google Material Design • Paper • Ink • Ripple effect
48. Further Reading • Mark Geyer • Rachel Nabors • Val Head
49. About Me • IncrementalUX • New Haven UX meetup group • Product Developer – Knock Media • http://viii.in • @rvinay88
50. Motion design causes motion sickness