Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Animations API - Frontend UserGroup RheinMain

Web Animations API - Frontend UserGroup RheinMain

Bastian Heist

July 26, 2016
Tweet

More Decks by Bastian Heist

Other Decks in Programming

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