Rebounding with Web Animation

Rebounding with Web Anima/on

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

A Brief History of Web Anima/on

Web Anima/onAnimated GIFs (1987/1990)

Flash (1995)

JavaScript (1997)

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.

“

Jakob NielsenShowing 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

Web Anima/on GoalsBe Useful

Be Purposeful

AWract AWen%on to a Problem or Solu%on

Be Playful

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.

“

April 29, 2010

Flash is Bad!

A Brief History of Tradi/onal Anima/on

Eadweard MuybridgeEnglish photographer who studied mo%on

Hired by Leland Stanford to photograph the gait of his horses

Created “Sallie Gardner on a Gallop” in 1878

12 Principles of Anima/onSquash 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

Let’s Talk about Computer Anima/on

Computer Anima/onDelay -‐ Time between frames

Dura%on -‐ Total %me of the anima%on

Delta -‐ Calcula%on of the next step

Step -‐ Rendered frame

Anima/on GoalsBe Useful

Be Purposeful

AWract AWen%on to a Problem or Solu%on

Be Playful

Google’s Material Design

Mass and Weight

Entering and Exi/ng

Graceful Transi/ons

Point of Origin

Direc/ng AQen/on

Improve the Payment Experience with Anima/on

by Michaël Villar (Stripe)

Adding Context

Sympathizing

Tricking People

Delights and Encourages

Dribbble Animated GIFs

Things We LeV on the Moon

Prototyping

PrototypingQuartz Composer

Aaer Effects

Adobe Edge

JavaScript/CSS

Quartz ComposerComes free with Apple’s app developer kit

Node-‐based visual programming language

Anima%on tool for Xcode and iMove transi%ons

AVer EffectsMo%on graphics program owned by Adobe

Timeline based applica%on (like Flash)

Uses layers (think Photoshop for mo%on)

Adobe EdgeMo%on graphics program owned by Adobe

Timeline based applica%on (like Flash)

Uses layers (think Photoshop for mo%on)

Code-‐Friendly

JavaScript/CSSScrip%ng languages that work in the browser

Much more in%mida%ng than the previous op%ons

“The Final Canvas”

Easing.js

CodePen.io

Bounce.js

Inspector Tools

Failures are finger posts on the road to achievement.

—C.S. Lewis

December CalendarCreate an calendar from December 1–31.

Create an anima%on (on hover) for each calendar day.

Do something special for your holiday.

NickSnyder.is/wv14NickSnyder.is/sharing-‐cool-‐stuff-‐with/webvisions-‐chicago

Thank You, Chicago!@_NickSnyder

Rebounding with Web Animation

Technology

Transcript of Rebounding with Web Animation