Animation: The Javascript Way

Women Level Up Meetup, 5/22

Transcript

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/