Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Animation: The Javascript Way

Ac6d89343648808d8d5d777c237d32c5?s=47 amandamholl
May 24, 2017

Animation: The Javascript Way

Women Level Up Meetup, 5/22



May 24, 2017


  1. Animation the javascript way

  2. Why animation?

  3. Why animation? • Captures attentions • Engaging • User feedback

    • Present dense concepts in a way that is easier to understand and reason about http://www.histography.io/
  4. How do we animate for web?

  5. CSS the simple approach How: keyframes Advantages: simple & fast

    Drawbacks: limited effects & compatibility
  6. CSS: Keyframes What are they? • Define animations for CSS

    properties • Part of CSS3 How to use them: • Define styles at certain intervals • Apply the keyframe to the element you want to animate • Must give a duration • Can set properties like: delay, direction, iteration count, etc…
  7. CSS: the good & the bad The Good: • Relatively

    simply • Faster than jQuery or Javascript • Good for simple transitions between states The Bad: • Cannot animate in response to user interaction (like on click, or swipe) • Lack of independent scale/rotation/position control • Limited effects: animating along a curve, animating scroll position, etc • Compatibility: doesn’t work in IE9 or earlier
  8. jQuery a slightly more complex approach How: jquery.animate() Advantages: relatively

    simple, more than just CSS properties Drawbacks: effects still limited, compatibility, slow
  9. jQuery: jquery.animate() What can you do? • Animate any numeric

    CSS property • Animate some non CSS numeric properties (ScrollTop/ScrollLeft) • Can set properties & callbacks like easing, step, progress, done, complete, etc… Example: • mavenlink.com/engineering .animate( properties [, duration ] [, easing ] [, complete ] ) .animate( properties, options )
  10. jQuery: the good & the bad The Good: • Animating

    scroll effects (ScrollLeft) • Relatively simple • Plug-ins that help you build more advanced animation The Bad: • Cannot animate most non-numeric CSS properties like background color • Browser compatibility is still an issue • SLOW (usually a lot slower than CSS ) which leads to poor user experience
  11. JavaScript Libraries the complex approach How: D3, WebGL, GSAP, etc...

    Advantages: advanced 2D & 3D animations, not just CSS, better compatibility Drawbacks: depends on the library, device limitations
  12. D3.js HTML, CSS, SVGs, & JS Good: • Plugins •

    Displaying and animating representations of data (graphs, charts, etc)
  13. Example View Animation: http://bl.ocks.org/brattonc/ 5e5ce9beee483220e2f6

  14. WebGL API for rendering interactive 3D & 2D graphics Good:

    • Compliant with OpenGL ES 2.0 • Works within the <canvas> element • Supported by most modern browsers • Libraries (three.js) make dev easier Bad: • Very complex • Device limitations
  15. GSAP HTML5 & Javascript animation Allows you to animate the

    same: • CSS animations (color, height, opacity, etc..) • jQuery (scrolls, callbacks) In addition to: • Animate along bezier curves • Dynamically reverse and fast-forward animations • Overlap animations
  16. GSAP Core tools: • TweenLite: animate 1+ properties of an

    element or an array of elements • TweenMax: repeat, delayed repeat, yoyo animations, & add plugins • TimelineLite: build & control sequences of instances • TimelineMax: repeat, delayed repeat, yoyo timelines, & tween timelines Plugins: DrawSVG & MorphSVG TweenLite.to($box, 0.7, {left: 0}); TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0}); TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150});] TweenLite.set($box, {x: '-=200px', scale: 0.3});
  17. Example View all the animations: https://www.mavenlink. com/business-process- management-software

  18. The Good: • Compatibility: apply and animate transforms like scale,

    skew, and rotation in all moderns and even IE going back to version 6 • No dependencies (ie. jQuery) • Speed! ◦ 20x faster than jQuery ◦ Even fast on mobile devices ◦ Faster than even CSS on most devices and browsers tested GSAP The Bad: • Some gotchas (ie. can’t animate display) • Cross-browser bugs • Must be explicit about beginning & ending animation states • Familiarity with SVGs seems necessary • Not all plugins are free
  19. Questions?

  20. Now it’s your turn

  21. Practice • Clone https://github.com/amandamholl/js-animation-demo • Try it yourself!

  22. Thanks!!

  23. Resources • https://css-tricks.com/myth-busting-css-animations-vs-javascript/ • https://davidwalsh.name/css-js-animation • jQuery: ◦ http://api.jquery.com/animate/ •

    WebGL: ◦ https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API ◦ Example: http://madebyevan.com/webgl-water/ • GSAP: ◦ Docs: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/ ◦ Codepen examples: https://codepen.io/search/pens?q=gsap&limit=all&type=type-pens ◦ Tutorial: https://ihatetomatoes.net/simple-greensock-tutorial-your-first-steps-with-gsap/