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

https://sparkbox.github.io/bouncy-ball

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 construc
Watch your step
TION

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 Javascript
BROWSER APIS
requestAnimationFrame()
"whatever"
• Move a Div
• Draw on a
Canvas
• Change a CSS
property
• Re-draw an
SVG

CSS Animations
BROWSER APIS
Transitions
• Pseudo-classes:
:hover, :active, :focus,
:checked, :disabled
• Media-queries
• Can be triggered by
Javascript
Triggered by user

CSS Animations
BROWSER APIS
Keyframe Animations
http://bryanbraun.com/2014/05/05/css-
transitions-vs-keyframe-animations

SMIL
BROWSER APIS
<animateTransform> <animateMotion>
• Translation
• Rotation
• Scale
• Skew
• Animate along a path
(curved or straight)
DEPRECATED

Web Animations API
BROWSER APIS
Browser Support: caniuse.com/#feat=web-animation
W3C Status: Working Draft
Polyfill: github.com/web-animations/web-animations-js

Greensock
ANIMATION TOOLS
• TweenLite
• TimelineLite
• TweenMax
• TimelineMax

Velocity
ANIMATION TOOLS
http://velocityjs.org

mo.js anime.js
ANIMATION TOOLS
&
http://mojs.io/ http://anime-js.com/

jQuery Animations
OTHER

P5.js
OTHER
https://p5js.org/

D3
OTHER

React
OTHER
https://www.youtube.com/watch?v=QlmaI7x7SYo
Animating 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

Physics
Write 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

Flipbook
Image from: vimeo.com/23673802

Flipbook
Techniques using "Flipbooks"
• Animated Gif
• HTML5 Video
• CSS Step Animations
Should I ever animate things with Gifs or Video?

Flipbook
CSS Step Animations

Flipbook
CSS Step Animations

Flipbook
CSS 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

Performance
Let 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