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