UI Animation principles and practice with GSAP
1 like625 views
The document discusses the importance of UI animation in web design, highlighting that animation should enhance user experience by guiding attention, providing feedback, and ensuring consistency. It emphasizes the need to integrate animation with design processes and accessibility while presenting various animation tools and techniques, particularly focusing on GSAP. Key principles include keeping animations between 200-500ms, maintaining eye flow, and understanding the execution of animations using different frameworks.
UI Animation principles and practice with GSAP
- 1. Animate this! Principles and practice in UI animation Tuesday, March 21, 17
- 2. Who the heck are you? I’m Mario Noble • Your friendly neighborhood SCWDD Organizer • Web Designer / Front end developer • UX Designer • Jack of all digital trades • SoCal cliche Tuesday, March 21, 17
- 3. Why Animation in UI? Tuesday, March 21, 17
- 4. Movement compels attention. Tuesday, March 21, 17
- 5. Too much movement distracts. Tuesday, March 21, 17
- 6. UI animation is a means to an end not a means unto itself. Tuesday, March 21, 17
- 7. Focus Tuesday, March 21, 17
- 8. Focus Tuesday, March 21, 17
- 12. Feedback Tuesday, March 21, 17
- 13. Feedback Tuesday, March 21, 17
- 14. Branding Tuesday, March 21, 17
- 15. Branding Tuesday, March 21, 17
- 16. Animation is the depiction of change over time. Tuesday, March 21, 17
- 17. Animation is the depiction of change over time. Tuesday, March 21, 17
- 18. 12 Basic Principles of Animation https://vimeo.com/93206523 Tuesday, March 21, 17
- 19. A few key points... Tuesday, March 21, 17
- 20. Tuesday, March 21, 17
- 21. Attention is a resource. Tuesday, March 21, 17
- 22. A rule of thumb is to keep animations between 200-500ms. Tuesday, March 21, 17
- 23. Animations can occur not only in transition on screen... Tuesday, March 21, 17
- 24. ...and off screen... Tuesday, March 21, 17
- 25. ...but also in place. Tuesday, March 21, 17
- 26. Eye flow... Tuesday, March 21, 17
- 27. Eye flow... and sequencing are key. Tuesday, March 21, 17
- 28. Keep things consistent. Tuesday, March 21, 17
- 29. Keep things consistent. except where it makes sense to not be... Tuesday, March 21, 17
- 30. Remember to integrate animation into your design process just as you would the use of color. ★ Business and user priorities ★ IA ★ Storyboarding ★ Prototypes ★ Styleguides ★ User research Tuesday, March 21, 17
- 31. Keep Accessibility in mind. Tuesday, March 21, 17
- 32. Execution - The nitty gritty of making it happen. ★CSS transitions and animation ★jQuery ★Velocity.js ★Greensock (aka GSAP) ★Javascript Animation API ★Framework specific libraries (Angular, Polymer, React, native iOS/Android, etc.) ★DIY custom code ★I wish I could say Flash... Tuesday, March 21, 17
- 33. There is no one right way. Use whatever works for you best. Tuesday, March 21, 17
- 34. We’re choosing GSAP to demo because it’s: ★Mature ★Platform agnostic ★Browser stable ★Plays nice ★Consistent handling of transforms and SVGs ★Full featured Tuesday, March 21, 17
- 35. GSAP “Ecosystem” ★TweenLite ★TweenMax * ★TimelineLite ★TimelineMax * TweenMax is the one you want to use starting out since it all the others built in. Optimize as needed. Plus various Plugins and Extensions Tuesday, March 21, 17
- 36. A word about their licensing structure. It’s free if you do not sell products or services made with it to multiple end users. A single client is fine. By the way, I’m not affiliated with the company in any way... Tuesday, March 21, 17
- 37. GSAP Basics (first we’ll tell, then we’ll show) Tuesday, March 21, 17
- 38. TweenMax.method(target, duration, {vars}, position); Example: TweenMax.to(box, 0.5, {x: 50, y:100}); Position is used in methods like staggerFrom Tuesday, March 21, 17
- 39. Targeting ★ Can use any class or html tag (i.e. .my-class - uses queryselectorall) ★ getElementbyID ★ jQuery ($) ★ a var or array of references Tuesday, March 21, 17
- 40. Duration ★ Usually in seconds ★ Can be frames Tuesday, March 21, 17
- 41. Vars ★ Can be single and multiple css properties - properties should be converted from using hyphens to camel case (e.g. border-radius is borderRadius) ★ Also uses special properties like easing, repeat, delay, timeline controls ★ GSAP callbacks and custom callbacks Tuesday, March 21, 17
- 42. Position ★ Sets when the tween occurs in the timeline in terms of seconds or frames. Tuesday, March 21, 17
- 43. also... Tuesday, March 21, 17
- 44. Easing ★ Default ★ Out of the box ★ Custom ★ Let’s check out the visualizer Tuesday, March 21, 17
- 45. Timeline fun ★ Reversing ★ From versus To ★ Staggers (aka offsets) ★ Yoyo ★ Timescale Tuesday, March 21, 17
- 46. Multiple Animations ★ using new ★ standalone animations ★ added / chained animations ★ modifying multiple animations at once Tuesday, March 21, 17
- 47. OK, let’s try this. Tuesday, March 21, 17
- 48. Summary ★ Form follows function ★ Focus, Orientation, Feedback, Branding ★ Integrate Animation into the overall business, design and dev process ★ Animation frameworks will target change in target properties and their sequence over time ★ Realistic animation often uses some form of easing Tuesday, March 21, 17
- 49. Resources ★ Designing Interface Animation ★ The Illusion of Life ★ Greensock GSAP site ★ I Hate Tomatoes ★ Velocity JS ★ Mozilla’s JS Animation API Tuesday, March 21, 17
- 50. Q&A / Sharing Tuesday, March 21, 17