Rebounding with Web Animation - Nick Snyder, 2014
0 likes774 views
The document outlines the history and principles of web and computer animation, emphasizing the importance of usability and the role of animation in design. It critiques the use of Flash on websites for often diminishing user experience and discusses various animation techniques and tools. The summary includes references to specific historical figures and technologies relevant to the evolution of animation.
Rebounding with Web Animation - Nick Snyder, 2014
- 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
- 36. Mass and Weight
- 37. Mass and Weight
- 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
- 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.
- 82. Thank You, Chicago! @_NickSnyder