Web Animations API - Frontend UserGroup RheinMain

An extended version of the Web Animation API presentation, held for the Frontend Usergroup Rhein/Main.

Here are the sources as clickable links:
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

Transcript

3. Introduction to Web Animations
4. CSS3 + SVG Towards a 
 Unified Web Animation Model
5. All of today’s animation technologies have some issues…
6. CSS + Hardware accelerated (partially) - Hard to control dynamically
7. requestAnimationFrame() + Good support, optimizable - Performance issues
8. window.setInterval() $.animate() + Simple - Imprecise, bad performance
9. Libraries (e.g. GSAP) + Good performance, cross- browser - Dependency on external libs
10. Web Animation API
 to the rescue!
11. One JavaScript API to control Animations
12. element.animate( KeyframeEffects, AnimationEffectTiming ) : Animation Core Objects
13. Example 1 element.animate();
14. Animation properties: .pause() / .play() .cancel() / .finish() .playState .playbackRate .currentTime .oncancel / .onfinish Example 2
15. Multiple parallel Animations Example 3
16. Animating with advanced CSS: motion-path motion-offset motion-rotation Example 4
17. • Promises (ready, finished) • GroupEffects • SequenceEffects There’s more…
18. Awesome! …when can I use it?
19. Default support http://caniuse.com/#feat=web-animation
20. Polyfill https://github.com/web-animations/web- animations-js
21. Discussion
22. Thank you! @beheist https://speakerdeck.com/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