Download - Rebounding with Web Animation
![Page 1: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/1.jpg)
Rebounding with Web Anima/on
![Page 2: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/2.jpg)
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
![Page 3: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/3.jpg)
![Page 4: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/4.jpg)
A Brief History of Web Anima/on
![Page 5: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/5.jpg)
Web Anima/onAnimated GIFs (1987/1990)
Flash (1995)
JavaScript (1997)
![Page 6: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/6.jpg)
![Page 7: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/7.jpg)
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.
“
![Page 8: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/8.jpg)
![Page 9: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/9.jpg)
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
![Page 10: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/10.jpg)
Web Anima/on GoalsBe Useful
Be Purposeful
AWract AWen%on to a Problem or Solu%on
Be Playful
![Page 11: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/11.jpg)
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.
“
![Page 12: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/12.jpg)
April 29, 2010
![Page 13: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/13.jpg)
Flash is Bad!
![Page 14: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/14.jpg)
![Page 15: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/15.jpg)
![Page 16: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/16.jpg)
![Page 17: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/17.jpg)
![Page 18: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/18.jpg)
A Brief History of Tradi/onal Anima/on
![Page 19: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/19.jpg)
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
![Page 20: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/20.jpg)
![Page 21: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/21.jpg)
![Page 22: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/22.jpg)
![Page 23: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/23.jpg)
![Page 24: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/24.jpg)
![Page 25: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/25.jpg)
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
![Page 26: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/26.jpg)
![Page 27: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/27.jpg)
![Page 28: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/28.jpg)
Let’s Talk about Computer Anima/on
![Page 29: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/29.jpg)
Computer Anima/onDelay -‐ Time between frames
Dura%on -‐ Total %me of the anima%on
Delta -‐ Calcula%on of the next step
Step -‐ Rendered frame
![Page 30: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/30.jpg)
![Page 31: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/31.jpg)
![Page 32: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/32.jpg)
![Page 33: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/33.jpg)
![Page 34: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/34.jpg)
Anima/on GoalsBe Useful
Be Purposeful
AWract AWen%on to a Problem or Solu%on
Be Playful
![Page 35: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/35.jpg)
Google’s Material Design
![Page 36: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/36.jpg)
Mass and Weight
![Page 37: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/37.jpg)
Mass and Weight
![Page 38: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/38.jpg)
Entering and Exi/ng
![Page 39: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/39.jpg)
Entering and Exi/ng
![Page 40: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/40.jpg)
Graceful Transi/ons
![Page 41: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/41.jpg)
Graceful Transi/ons
![Page 42: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/42.jpg)
Point of Origin
![Page 43: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/43.jpg)
Direc/ng AQen/on
![Page 44: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/44.jpg)
Direc/ng AQen/on
![Page 45: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/45.jpg)
Improve the Payment Experience with Anima/on
by Michaël Villar (Stripe)
![Page 46: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/46.jpg)
Adding Context
![Page 47: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/47.jpg)
Sympathizing
![Page 48: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/48.jpg)
![Page 49: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/49.jpg)
Tricking People
![Page 50: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/50.jpg)
Delights and Encourages
![Page 51: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/51.jpg)
Dribbble Animated GIFs
![Page 52: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/52.jpg)
![Page 53: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/53.jpg)
![Page 54: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/54.jpg)
![Page 55: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/55.jpg)
![Page 56: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/56.jpg)
Things We LeV on the Moon
![Page 57: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/57.jpg)
![Page 58: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/58.jpg)
Prototyping
![Page 59: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/59.jpg)
PrototypingQuartz Composer
Aaer Effects
Adobe Edge
JavaScript/CSS
![Page 60: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/60.jpg)
Quartz ComposerComes free with Apple’s app developer kit
Node-‐based visual programming language
Anima%on tool for Xcode and iMove transi%ons
![Page 61: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/61.jpg)
![Page 62: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/62.jpg)
AVer EffectsMo%on graphics program owned by Adobe
Timeline based applica%on (like Flash)
Uses layers (think Photoshop for mo%on)
![Page 63: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/63.jpg)
![Page 64: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/64.jpg)
Adobe EdgeMo%on graphics program owned by Adobe
Timeline based applica%on (like Flash)
Uses layers (think Photoshop for mo%on)
Code-‐Friendly
![Page 65: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/65.jpg)
![Page 66: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/66.jpg)
JavaScript/CSSScrip%ng languages that work in the browser
Much more in%mida%ng than the previous op%ons
“The Final Canvas”
![Page 67: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/67.jpg)
Easing.js
![Page 68: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/68.jpg)
![Page 69: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/69.jpg)
CodePen.io
![Page 70: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/70.jpg)
![Page 71: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/71.jpg)
![Page 72: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/72.jpg)
Bounce.js
![Page 73: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/73.jpg)
![Page 74: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/74.jpg)
Inspector Tools
![Page 75: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/75.jpg)
![Page 76: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/76.jpg)
![Page 77: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/77.jpg)
Failures are finger posts on the road to achievement.
—C.S. Lewis
![Page 78: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/78.jpg)
![Page 79: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/79.jpg)
![Page 80: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/80.jpg)
December CalendarCreate an calendar from December 1–31.
Create an anima%on (on hover) for each calendar day.
Do something special for your holiday.
![Page 81: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/81.jpg)
NickSnyder.is/wv14NickSnyder.is/sharing-‐cool-‐stuff-‐with/webvisions-‐chicago
![Page 82: Rebounding with Web Animation](https://reader037.vdocument.in/reader037/viewer/2022103115/557e98d8d8b42a8d518b52a5/html5/thumbnails/82.jpg)
Thank You, Chicago!@_NickSnyder