At WebVisions Chicago, Mad*Pow's Creative Technologist, Nick Snyder shared his insights on animated GIFs, Flash, and JavaScript.

1. Rebounding with
Web Anima/on

2. About Me
NickSnyder.is
@_NickSnyder
Aquarius
Chao6c Neutral
Crea%ve Technologist at Mad*Pow in
Boston, MA
Lover of all things design, baseball,
anima%on, and Legend of Zelda
Member of the South Jersey pub trivia
Hall of Fame

4. A Brief History of
Web Anima/on

5. Web Anima/on
Animated GIFs (1987/1990)
Flash (1995)
JavaScript (1997)

7. Moving images have an overpowering effect on the human
peripheral vision. This is a survival ins7nct from the 7me when it
was of supreme importance to be aware of any saber-­‐toothed
7gers before they could sneak up on you. These days, 7ger-­‐
avoidance is less of an issue, but anything that moves in your
peripheral vision s7ll dominates your awareness: it is very hard to,
say, concentrate on reading text in the middle of the page if there is
a spinning logo up in the corner.
“

9. Jakob Nielsen
Showing con%nuity in transi%ons
Indica%ng dimensionality in transi%ons
Illustra%ng change over %me
Mul%plexing the display
Enriching graphical representa%ons
Visualizing 3D structures
AWrac%ng aWen%on

10. Web Anima/on Goals
Be Useful
Be Purposeful
AWract AWen%on to a Problem or Solu%on
Be Playful

11. About 99% of the 7me, the presence of Flash on a website cons7tutes a
usability disease. Although there are rare occurrences of good Flash
design (it even adds value on occasion), the use of Flash typically lowers
usability. In most cases, we would be beHer off if these mul7media
objects were removed.
Flash tends to degrade websites for three reasons: it encourages design
abuse, it breaks with the Web's fundamental interac7on principles, and it
distracts aHen7on from the site's core value.
“

12. April 29, 2010

13. Flash is Bad!

18. A Brief History of
Tradi/onal Anima/on

19. Eadweard Muybridge
English photographer who studied mo%on
Hired by Leland Stanford to photograph the gait of his horses
Created “Sallie Gardner on a Gallop” in 1878

25. 12 Principles of Anima/on
Squash and Stretch
An%cipa%on
Staging
Straight Ahead and Pose-­‐to-­‐Pose
Follow Through and Overlapping Ac%on
Slow-­‐out and Slow-­‐in
Arcs
Secondary Ac%on
Timing
Exaggera%on
Solid Drawing
Appeal

28. Let’s Talk about
Computer Anima/on

29. Computer Anima/on
Delay -­‐ Time between frames
Dura%on -­‐ Total %me of the anima%on
Delta -­‐ Calcula%on of the next step
Step -­‐ Rendered frame

34. Anima/on Goals
Be Useful
Be Purposeful
AWract AWen%on to a Problem or Solu%on
Be Playful

35. Google’s Material Design

36. Mass and Weight

37. Mass and Weight

38. Entering and Exi/ng

39. Entering and Exi/ng

40. Graceful Transi/ons

41. Graceful Transi/ons

42. Point of Origin

43. Direc/ng AQen/on

44. Direc/ng AQen/on

45. Improve the Payment
Experience with Anima/on
by Michaël Villar (Stripe)

46. Adding Context

47. Sympathizing

49. Tricking People

50. Delights and Encourages

51. Dribbble Animated GIFs

56. Things We LeV on the Moon

58. Prototyping

59. Prototyping
Quartz Composer
Aaer Effects
Adobe Edge
JavaScript/CSS

60. Quartz Composer
Comes free with Apple’s app developer kit
Node-­‐based visual programming language
Anima%on tool for Xcode and iMove transi%ons

62. AVer Effects
Mo%on graphics program owned by Adobe
Timeline based applica%on (like Flash)
Uses layers (think Photoshop for mo%on)

64. Adobe Edge
Mo%on graphics program owned by Adobe
Timeline based applica%on (like Flash)
Uses layers (think Photoshop for mo%on)
Code-­‐Friendly

66. JavaScript/CSS
Scrip%ng languages that work in the browser
Much more in%mida%ng than the previous op%ons
“The Final Canvas”

67. Easing.js

69. CodePen.io

72. Bounce.js

74. Inspector Tools

77. Failures are finger
posts on the road
to achievement.
—C.S. Lewis

80. December Calendar
Create an calendar from December 1–31.
Create an anima%on (on hover) for each calendar day.
Do something special for your holiday.

81. NickSnyder.is/wv14
NickSnyder.is/sharing-­‐cool-­‐stuff-­‐with/webvisions-­‐chicago

82. Thank You, Chicago!
@_NickSnyder