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

Mass  and  Weight

Entering  and  Exi/ng

Entering  and  Exi/ng

Graceful  Transi/ons

Graceful  Transi/ons

Point  of  Origin

Direc/ng  AQen/on

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