This presentation covers basic UI animation principles and execution in JavaScript using Greensock's animation platform (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

9. Orientation
Tuesday, March 21, 17

10. Orientation
Tuesday, March 21, 17

11. Orientation
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