Post on 10-Jan-2017
12 Ways to Bounce a Ball
A Tour of the Web Animations Ecosystem
Animation by Jovie Brett Bardoles: https://dribbble.com/shots/2159651-Responsive-Material-Design
Comparing Techniques
• Vanilla Javascript • Backbone.js • KnockoutJS • Dojo • Ampersand • AngularJS • Ember.js • React • Vue.js • ...and more
TodoMVC – todomvc.com
The 12 Ways• Vanilla Javascript • CSS Animations • Web Animations API • SMIL
• Greensock • Velocity • mo.js • anime.js
• jQuery Animations • P5.js
• D3 • React
More Ways?HTML5 Video
More Ways?Animated Gif
More Ways?WebGL
More Ways?Flash
More Ways?<marquee>
This page is under construction
Watch your step
CAUTION
The 12 Ways• Vanilla Javascript • CSS Animations • Web Animations API • SMIL
• Greensock • Velocity • mo.js • anime.js
• jQuery Animations • P5.js
• D3 • React
The 12 Ways
• Vanilla Javascript • CSS Animations • Web Animations API • SMIL
• Greensock • Velocity • mo.js • anime.js
• jQuery Animations • P5.js
• D3 • React
BROWSER APIS ANIMATION TOOLS
OTHER
Vanilla JavascriptBROWSER APIS
requestAnimationFrame()
"whatever"• Move a Div
• Draw on a Canvas
• Change a CSS property
• Re-draw an SVG
CSS AnimationsBROWSER APIS
Transitions
• Pseudo-classes: :hover, :active, :focus, :checked, :disabled
• Media-queries • Can be triggered by
Javascript
Triggered by user
CSS AnimationsBROWSER APIS
Keyframe Animations
http://bryanbraun.com/2014/05/05/css-transitions-vs-keyframe-animations
SMILBROWSER APIS
<animateTransform> <animateMotion>• Translation • Rotation • Scale • Skew
• Animate along a path (curved or straight)
DEPRECA
TED
Web Animations APIBROWSER APIS
Browser Support: caniuse.com/#feat=web-animation
W3C Status: Working Draft
Polyfill: github.com/web-animations/web-animations-js
GreensockANIMATION TOOLS
• TweenLite
• TimelineLite
• TweenMax
• TimelineMax
mo.js anime.jsANIMATION TOOLS
&
http://mojs.io/ http://anime-js.com/
jQuery AnimationsOTHER
P5.jsOTHER
https://p5js.org/
D3OTHER
ReactOTHER
https://www.youtube.com/watch?v=QlmaI7x7SYoAnimating in React – Sarah Drasner
Animation Approaches
• React-Motion
• CSS Animations
• Javascript (if you are careful)
The 12 Ways• Vanilla Javascript • CSS Animations • Web Animations API • SMIL
• Greensock • Velocity • mo.js • anime.js
• jQuery Animations • P5.js
• D3 • React
Animation Paradigms
1. Math
2. Physics
3. Flipbook
4. Tweening/Keyframes
Math
y = -0.000484(mod(t + 575, 575 * 2) - 575)^2 + 160
Height
Can you represent position with a mathematical function?
Physics
• 2D • Matter.js
• 3D • Ammo.js • Cannon.js
Physics Engines
PhysicsWrite your own physics
• Time Based Animation (time deltas) • https://www.viget.com/articles/time-based-animation
• Kinematic Formulas (long time deltas) • (there's a great lesson on Khan Academy)
• 5 Minute Physics by David DeSandro • https://www.youtube.com/watch?v=n6FKT-KafRk
Good for low-level techniques: Vanilla Javascript, P5, etc.
Physics
FlipbookTechniques using "Flipbooks"
• Animated Gif • HTML5 Video • CSS Step Animations
Should I ever animate things with Gifs or Video?
FlipbookCSS Step Animations
FlipbookCSS Step Animations
FlipbookCSS Step Animations
Tweening / Keyframes
Beginning State End State
color, width, height, opacity, rotation, x-position, y-position, shadow, font-size, padding, margin, line-height, and more.
Tweening / Keyframes
• SMIL
• Velocity
• Greensock
• CSS Keyframes
• Web Animations API
Most of the 12 ways!
• Mo.js
• Anime
• jQuery
• D3
• Flash
Tweening / Keyframes
Tweening / Keyframes
PerformanceLet your constraints drive your decisions
Performance
Resources
• 10 principles for smooth web animations • jankfree.org • Browser Rendering Optimization Udacity Course
Animation Performance is Rendering Performance
Performance
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations
Other Resources
Questions?
• A Comparison of Animation Technologies
• Codepen Dayton!
@BryanEBraun