Animation: The Javascript Way

Ac6d89343648808d8d5d777c237d32c5?s=47 amandamholl
May 24, 2017
33

Animation: The Javascript Way

Women Level Up Meetup, 5/22

Ac6d89343648808d8d5d777c237d32c5?s=128

amandamholl

May 24, 2017
Tweet

Transcript

  1. 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/
  2. 5.

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

    Drawbacks: limited effects & compatibility
  3. 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…
  4. 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
  5. 8.

    jQuery a slightly more complex approach How: jquery.animate() Advantages: relatively

    simple, more than just CSS properties Drawbacks: effects still limited, compatibility, slow
  6. 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 )
  7. 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
  8. 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
  9. 12.

    D3.js HTML, CSS, SVGs, & JS Good: • Plugins •

    Displaying and animating representations of data (graphs, charts, etc)
  10. 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
  11. 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
  12. 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});
  13. 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
  14. 22.
  15. 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/