Download to read offline
Uploaded byHxRefactored
HxRefactored: Rebounding with Web Animation by Nick Snyder
The document discusses the evolution and principles of web animation, highlighting its historical methods such as animated GIFs and Flash. It emphasizes the importance of purposeful animation while outlining how improper use can degrade user experience. The presentation concludes by sharing the 12 principles of animation and the necessity to have specific goals for each animation created.
Technologyâ—¦
More Related Content
Similar to HxRefactored: Rebounding with Web Animation by Nick Snyder
HxRefactored: Rebounding with Web Animation by Nick Snyder
- 1. Rebounding with WebAnimation
- 2.
- 3. Can I stillkeep the mustache???
- 4.
- 5. NickSnyder.is @_NickSnyder AboutNick Snyder Aquarius Chaotic Neutral • Creative Technologist at Mad*Pow in Boston, MA • Lover of all things design, animation, and Legend of Zelda • Member of the South Jersey pub trivia Hall of Fame
- 7. Today’s Agenda ABrief History of Web Animation The Formulas of Animation Web Animation Today
- 8. A Brief Historyof Web Animation
- 9. What he reallymeans: “It kinda sucks.”
- 10. Web Animation Methods Animated GIFs (1987 or 1990, depending on the nerd) Macromedia/Adobe Flash (1995) JavaScript (1997)
- 11. Oooh…he said GIFwrong!
- 12. Web Animation Methods Animated GIFs (1987 or 1990, depending on the nerd) Macromedia/Adobe Flash (1995) JavaScript (1997)
- 14. Moving images havean overpowering effect on the human peripheral vision. This is a survival instinct from the time when it was of supreme importance to be aware of any saber-toothed tigers before they could sneak up on you. These days, tiger-avoidance is less of an issue, but anything that moves in your peripheral vision still 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. “
- 15. • Showing continuityin transitions • Indicating dimensionality in transitions • Illustrating change over time • Multiplexing the display • Enriching graphical representations • Visualizing three-dimensional structures • Attracting attention
- 16. About 99% ofthe time, the presence of Flash on a website constitutes 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 better off if these multimedia objects were removed. ! Flash tends to degrade websites for three reasons: it encourages design abuse, it breaks with the Web's fundamental interaction principles, and it distracts attention from the site's core value. “
- 18. About 99% ofthe time, the presence of Flash on a website constitutes 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 better off if these multimedia objects were removed. ! Flash tends to degrade websites for three reasons: it encourages design abuse, it breaks with the Web's fundamental interaction principles, and it distracts attention from the site's core value. “
- 20. The Formulas ofAnimation
- 26. 12 Principles ofAnimation • Squash and Stretch • Anticipation • Staging • Straight Ahead and Pose-to-Pose • Follow Through and Overlapping Action • Slow-out and Slow-in • Arcs • Secondary Action • Timing • Exaggeration • Solid Drawing • Appeal
- 27. 12 Principles ofAnimation • Squash and Stretch • Anticipation • Staging • Straight Ahead and Pose-to-Pose • Follow Through and Overlapping Action • Slow-out and Slow-in • Arcs • Secondary Action • Timing • Exaggeration • Solid Drawing • Appeal
- 28. Computer Animation Delay- Time between frames Duration - Total time of the animation Delta - Calculation of the next step Step - Rendered frame
- 30.
- 31.
- 39.
- 40.
- 41. Animation Goals •Be Useful • Be Purposeful • Attract Attention to a Problem or Solution • Be Playful
- 42. Improve the paymentexperience with animations by Michaël Villar (Stripe)
- 43.
- 44.
- 45. Animation Being Tricksy(Hobbitses)
- 47. Animation Being Tricksy(Hobbitses)
- 48. Animation That Delightsand Encourages
- 51. Development • jQuery • Easing.js • Kahn Academy • Experimentation Time
- 52. In Summary •Animation is a powerful tool for grabbing attention • Animation for the sake of animation is bad • Learn/Love the 12 Principles of Animation • Math is your friend • Every animation should have a purpose or a goal • Animation is fun; you should have fun while making it
- 53.
- 54. Thank You! NickSnyder.is @_NickSnyder MadPow.com @MadPow