hxrefactored: rebounding with web animation by nick snyder
DESCRIPTION
Nick covers the pitfalls of Flash animation—in regards to user experience and accessibility—while translating the good parts to a JavaScript-based approach.TRANSCRIPT
Rebounding with Web Animation
Hello, Slides
Can I still keep the mustache???
Sweet!
NickSnyder.is
@_NickSnyder
About Nick 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
A Brief History of Web Animation
The Formulas of Animation
Web Animation Today
Today’s Agenda
A Brief History of Web Animation
What he really means: “It kinda sucks.”
Web Animation Methods
Animated GIFs (1987 or 1990, depending on the nerd)
Macromedia/Adobe Flash (1995)
JavaScript (1997)
Oooh…he said GIF wrong!
Web Animation Methods
Animated GIFs (1987 or 1990, depending on the nerd)
Macromedia/Adobe Flash (1995)
JavaScript (1997)
Moving images have an 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.
“
• Showing continuity in transitions
• Indicating dimensionality in transitions
• Illustrating change over time
• Multiplexing the display
• Enriching graphical representations
• Visualizing three-dimensional structures
• Attracting attention
About 99% of the 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.
“
About 99% of the 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.
“
The Formulas of Animation
12 Principles of Animation• 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
12 Principles of Animation• 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
Computer Animation
Delay - Time between frames Duration - Total time of the animation Delta - Calculation of the next step Step - Rendered frame
Math is scary.
…ok.
Jerk.
Web Animation Today
Animation Goals• Be Useful
• Be Purposeful
• Attract Attention to a Problem or Solution
• Be Playful
Improve the payment experience with animations
by Michaël Villar (Stripe)
Animation Adding Context
Animation Sympathizing
Animation Being Tricksy (Hobbitses)
Animation Being Tricksy (Hobbitses)
Animation That Delights and Encourages
Development• jQuery
• Easing.js
• Kahn Academy
• Experimentation Time
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
NickSnyder.is/hxr
Thank You!NickSnyder.is @_NickSnyder
MadPow.com @MadPow