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. Introduction to
    Web Animations

    View full-size slide

  2. CSS3 + SVG
    Towards a

    Unified Web Animation Model

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Web Animation API

    to the rescue!

    View full-size slide

  9. One JavaScript API to
    control Animations

    View full-size slide

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

    View full-size slide

  11. Example 1
    element.animate();

    View full-size slide

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

    View full-size slide

  13. Multiple parallel
    Animations
    Example 3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Awesome!
    …when can I use it?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide