KEMBAR78
HxRefactored: Rebounding with Web Animation by Nick Snyder | PDF
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
Today’s Agenda 
A Brief History of Web Animation 
The Formulas of Animation 
Web Animation Today
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

HxRefactored: Rebounding with Web Animation by Nick Snyder

  • 1.
  • 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.
  • 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.
  • 47.
  • 48.
  • 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