Web Animations API - Darmstadt Designer & Developer Meetup

A quick overview of the coming W3C web animation API that was presented at the Darmstadt Designer & Developer Meetup.

Transcript

1. Introduction to Web Animations
2. CSS3 + SVG Towards a 
 Unified Web Animation Model
3. All of today’s animation technologies have some issues…
4. CSS + Hardware accelerated (partially) - Hard to control dynamically
5. requestAnimationFrame() + Good support, optimizable - Performance issues
6. setInterval() + Simple - Imprecise, bad performance
7. $.animate() + Even simpler, easy API - Performance issues
8. Libraries (e.g. GSAP) + Good performance, cross- browser - Dependent on external libs
9. Web Animations
 to the rescue!
10. One JavaScript API to control Animations
11. element.animate( KeyframeEffects, AnimationEffectTiming ) : Animation Example 1
12. Animation .pause() / play() .cancel() / finish() .playState .playbackRate .currentTime Example 2
13. Multiple Animations Example 3
14. • Callbacks (onfinish, oncancel) • Promises (ready, finished) • GroupEffects • SequenceEffects • MotionPath (as CSS) There’s more…
15. Awesome! …when can I use it?
16. Default support http://caniuse.com/#feat=web-animation
17. Polyfill https://github.com/web-animations/web- animations-js
18. Discussion
19. Two More Things!
20. 20. July, 19:00 Social Impact Lab, FFM Free Beer and Pizza! https://neos.io
21. 26. July, 19:00 Cowo21, DA Free Beer and Pizza! http://www.frontend-rheinmain.de
22. Thank you! @beheist
23. Sources & Resources • http://danielcwilson.com/blog/2015/07/animations-intro/ • http://danielcwilson.com/tags/web-animations-api/ • https://github.com/web-animations/web-animations-codelabs • https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API • https://www.youtube.com/watch?v=WaNoqBAp8NI • https://www.youtube.com/watch?v=ep0_0W0qWsc • http://web-animations.github.io/web-animations-demos/ • https://developers.google.com/web/updates/2015/10/web-animations- resources