A Tour of the Web Animations Ecosystem Project link: https://github.com/sparkbox/bouncy-ball

1. 12 Ways
to Bounce a Ball
A Tour of the Web Animations Ecosystem

2. Animation by Jovie Brett Bardoles: https://dribbble.com/shots/2159651-Responsive-Material-Design

4. Comparing Techniques
• Vanilla Javascript
• Backbone.js
• KnockoutJS
• Dojo
• Ampersand
• AngularJS
• Ember.js
• React
• Vue.js
• ...and more
TodoMVC – todomvc.com

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

6. The 12 Ways
• Vanilla Javascript
• CSS Animations
• Web Animations API
• SMIL
• Greensock
• Velocity
• mo.js
• anime.js
• jQuery Animations
• P5.js
• D3
• React

7. More Ways?
HTML5 Video

8. More Ways?
Animated Gif

9. More Ways?
WebGL

10. More Ways?
Flash

11. More Ways?
<marquee>
This page is under construc
Watch your step
TION

12. The 12 Ways
• Vanilla Javascript
• CSS Animations
• Web Animations API
• SMIL
• Greensock
• Velocity
• mo.js
• anime.js
• jQuery Animations
• P5.js
• D3
• React

13. 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

14. Vanilla Javascript
BROWSER APIS
requestAnimationFrame()
"whatever"
• Move a Div
• Draw on a
Canvas
• Change a CSS
property
• Re-draw an
SVG

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

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

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

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

19. Greensock
ANIMATION TOOLS
• TweenLite
• TimelineLite
• TweenMax
• TimelineMax

20. Velocity
ANIMATION TOOLS
http://velocityjs.org

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

22. jQuery Animations
OTHER

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

24. D3
OTHER

25. 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)

26. The 12 Ways
• Vanilla Javascript
• CSS Animations
• Web Animations API
• SMIL
• Greensock
• Velocity
• mo.js
• anime.js
• jQuery Animations
• P5.js
• D3
• React

27. Animation Paradigms
1. Math
2. Physics
3. Flipbook
4. Tweening/Keyframes

28. Math
y = -0.000484(mod(t + 575, 575 * 2) - 575)^2 + 160
Height
Can you represent position with a
mathematical function?

29. Physics
• 2D
• Matter.js
• 3D
• Ammo.js
• Cannon.js
Physics Engines

30. 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.

31. Physics

32. Flipbook
Image from: vimeo.com/23673802

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

34. Flipbook
CSS Step Animations

35. Flipbook
CSS Step Animations

36. Flipbook
CSS Step Animations

37. Tweening / Keyframes
Beginning State End State
color, width, height, opacity, rotation, x-position, y-position,
shadow, font-size, padding, margin, line-height, and more.

38. Tweening / Keyframes
• SMIL
• Velocity
• Greensock
• CSS Keyframes
• Web Animations API
Most of the 12 ways!
• Mo.js
• Anime
• jQuery
• D3
• Flash

39. Tweening / Keyframes

40. Tweening / Keyframes

41. Performance
Let your constraints drive your decisions

42. Performance
Resources
• 10 principles for smooth web animations
• jankfree.org
• Browser Rendering Optimization Udacity Course
Animation Performance is Rendering Performance

43. Performance
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations

44. Other Resources
Questions?
• A Comparison of Animation Technologies
• Codepen Dayton!
@BryanEBraun