How to use traditional animation principles to make better design decisions for web animation. By using a few classic prinicples and thinking about our message we can take our animations from good to great.

1. @vlh
Generate Conf NYC 2015
MotionDesigner
Web Designer

2. @vlh
Generate Conf NYC 2015
MotionDesigner
Web Designer

6. #generateconf @vlh
Great UI animation
has purpose and style.

7. How it looks

9. #generateconf @vlh
Ourgoal is relatable
motion

10. #generateconf @vlh

11. #generateconf @vlh

12. #generateconf @vlh
1: Timing
!

13. #generateconf @vlh
Timing:
appearing to obey the
laws of “physics”

14. #generateconf @vlh
Timing:
establishes mood,
emotion, and reaction

15. #generateconf @vlh
ease
linear
ease-in
ease-out
ease-in-out
Timing function keywords

16. cubic-bezier(0.42, 0, 0.58, 1);

17. #openvisconf @vlh
TIME
PROGRESSION

20. #generateconf @vlh
Everything is better
with cubic beziers!

21. #generateconf @vlh

22. ease-in-out

23. #generateconf @vlh

24. #generateconf @vlh

25. #generateconf @vlh
2: Follow
Through

26. #generateconf @vlh
Follow Through:
not everything comes
to a stop at once

27. #generateconf @vlh

28. #generateconf @vlh
Random Aside:
variables forkeeping
yourbeziers sane

29. #generateconf @vlh

30. #generateconf @vlh

31. #generateconf @vlh
3: Secondary
Action

32. #generateconf @vlh
Secondary Action:
supplemental action,
reinforces and adds
dimension

33. #generateconf @vlh

34. #generateconf @vlh

35. #generateconf @vlh

36. #generateconf @vlh
One more thing!

37. #generateconf @vlh
Speed it up.

38. #generateconf @vlh
Speed it up!!

39. #generateconf @vlh

40. How it behaves

41. #generateconf @vlh
Ease-outs feel more
“responsive”

43. #generateconf @vlh
More complex easing
needs more time to be
readable

45. #generateconf @vlh
prototype,
prototype,
prototype!

46. Oh, hello
bettertools!

51. Be inspired!

52. artofthetitle.com

53. capptivate.co

55. #generateconf @vlh
There are crazy fun
times ahead!

56. valhead.com/generate2015

57. #generateconf @vlh
Thanks Generate!
!
@vlh
valhead.com
alltherightmoves.valhead.com