Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

12 Ways to Bounce a Ball

705 views

Published on

A Tour of the Web Animations Ecosystem

Project link: https://github.com/sparkbox/bouncy-ball

Published in: Internet
  • Be the first to comment

  • Be the first to like this

12 Ways to Bounce a Ball

  1. 1. 12 Ways to Bounce a Ball A Tour of the Web Animations Ecosystem
  2. 2. Animation by Jovie Brett Bardoles: https://dribbble.com/shots/2159651-Responsive-Material-Design
  3. 3. Comparing Techniques • Vanilla Javascript • Backbone.js • KnockoutJS • Dojo • Ampersand • AngularJS • Ember.js • React • Vue.js • ...and more TodoMVC – todomvc.com
  4. 4. https://sparkbox.github.io/bouncy-ball
  5. 5. The 12 Ways • Vanilla Javascript • CSS Animations • Web Animations API • SMIL • Greensock • Velocity • mo.js • anime.js • jQuery Animations • P5.js • D3 • React
  6. 6. More Ways? HTML5 Video
  7. 7. More Ways? Animated Gif
  8. 8. More Ways? WebGL
  9. 9. More Ways? Flash
  10. 10. More Ways? <marquee> This page is under construc Watch your step TION
  11. 11. The 12 Ways • Vanilla Javascript • CSS Animations • Web Animations API • SMIL • Greensock • Velocity • mo.js • anime.js • jQuery Animations • P5.js • D3 • React
  12. 12. 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
  13. 13. Vanilla Javascript BROWSER APIS requestAnimationFrame() "whatever" • Move a Div • Draw on a Canvas • Change a CSS property • Re-draw an SVG
  14. 14. CSS Animations BROWSER APIS Transitions • Pseudo-classes:
 :hover, :active, :focus, :checked, :disabled • Media-queries • Can be triggered by Javascript Triggered by user
  15. 15. CSS Animations BROWSER APIS Keyframe Animations http://bryanbraun.com/2014/05/05/css- transitions-vs-keyframe-animations
  16. 16. SMIL BROWSER APIS <animateTransform> <animateMotion> • Translation • Rotation • Scale • Skew • Animate along a path (curved or straight) DEPRECATED
  17. 17. Web Animations API BROWSER APIS Browser Support: caniuse.com/#feat=web-animation W3C Status: Working Draft Polyfill: github.com/web-animations/web-animations-js
  18. 18. Greensock ANIMATION TOOLS • TweenLite • TimelineLite • TweenMax • TimelineMax
  19. 19. Velocity ANIMATION TOOLS http://velocityjs.org
  20. 20. mo.js anime.js ANIMATION TOOLS & http://mojs.io/ http://anime-js.com/
  21. 21. jQuery Animations OTHER
  22. 22. P5.js OTHER https://p5js.org/
  23. 23. D3 OTHER
  24. 24. 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)
  25. 25. The 12 Ways • Vanilla Javascript • CSS Animations • Web Animations API • SMIL • Greensock • Velocity • mo.js • anime.js • jQuery Animations • P5.js • D3 • React
  26. 26. Animation Paradigms 1. Math 2. Physics 3. Flipbook 4. Tweening/Keyframes
  27. 27. Math y = -0.000484(mod(t + 575, 575 * 2) - 575)^2 + 160 Height Can you represent position with a mathematical function?
  28. 28. Physics • 2D • Matter.js • 3D • Ammo.js • Cannon.js Physics Engines
  29. 29. 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.
  30. 30. Physics
  31. 31. Flipbook Image from: vimeo.com/23673802
  32. 32. Flipbook Techniques using "Flipbooks" • Animated Gif • HTML5 Video • CSS Step Animations Should I ever animate things with Gifs or Video?
  33. 33. Flipbook CSS Step Animations
  34. 34. Flipbook CSS Step Animations
  35. 35. Flipbook CSS Step Animations
  36. 36. Tweening / Keyframes Beginning State End State color, width, height, opacity, rotation, x-position, y-position, shadow, font-size, padding, margin, line-height, and more.
  37. 37. Tweening / Keyframes • SMIL • Velocity • Greensock • CSS Keyframes • Web Animations API Most of the 12 ways! • Mo.js • Anime • jQuery • D3 • Flash
  38. 38. Tweening / Keyframes
  39. 39. Tweening / Keyframes
  40. 40. Performance Let your constraints drive your decisions
  41. 41. Performance Resources • 10 principles for smooth web animations • jankfree.org • Browser Rendering Optimization Udacity Course Animation Performance is Rendering Performance
  42. 42. Performance https://www.html5rocks.com/en/tutorials/speed/high-performance-animations
  43. 43. Other Resources Questions? • A Comparison of Animation Technologies • Codepen Dayton! @BryanEBraun

×