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

1. View Slide

2. View Slide

3. Introduction to
   Web Animations
   

   View Slide

4. CSS3 + SVG
   Towards a
   

   Unified Web Animation Model
   

   View Slide

5. All of today’s animation
   technologies have some
   issues…
   

   View Slide

6. CSS
   + Hardware accelerated (partially)
   - Hard to control dynamically
   

   View Slide

7. requestAnimationFrame()
   + Good support, optimizable
   - Performance issues
   

   View Slide

8. window.setInterval()
   $.animate()
   + Simple
   - Imprecise, bad performance
   

   View Slide

9. Libraries (e.g. GSAP)
   +
   Good performance, cross-
   browser
   - Dependency on external libs
   

   View Slide

10. Web Animation API

    to the rescue!
    

    View Slide

11. One JavaScript API to
    control Animations
    

    View Slide

12. element.animate(
    KeyframeEffects,
    AnimationEffectTiming
    ) : Animation
    Core Objects
    

    View Slide

13. Example 1
    element.animate();
    

    View Slide

14. Animation properties:
    .pause() / .play()
    .cancel() / .finish()
    .playState
    .playbackRate
    .currentTime
    .oncancel / .onfinish
    Example 2
    

    View Slide

15. Multiple parallel
    Animations
    Example 3
    

    View Slide

16. Animating with advanced CSS:
    motion-path
    motion-offset
    motion-rotation
    Example 4
    

    View Slide

17. • Promises (ready,
    finished)
    • GroupEffects
    • SequenceEffects
    There’s more…
    

    View Slide

18. Awesome!
    …when can I use it?
    

    View Slide

19. Default support
    http://caniuse.com/#feat=web-animation
    

    View Slide

20. Polyfill
    https://github.com/web-animations/web-
    animations-js
    

    View Slide

21. Discussion
    

    View Slide

22. Thank you!
    @beheist
    https://speakerdeck.com/beheist
    

    View Slide

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
    

    View Slide