UI Animation principles and practice with GSAP
•
1 like•563 views
This presentation covers basic UI animation principles and execution in JavaScript using Greensock's animation platform (GSAP).
Report
Share
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