Web Animations API

An Introduction

Presented by

David Khourshid

@davidkpiano

Remember Flash?

"No." - Sent from my iPhone

Provided a standard for interactive web animations

Good for games and videos

...and literally every restaurant website

Let's Get the Web Moving.

  • Animated interactions and meaningful transitions are the future
  • Not just for decoration!
  • User interface effects
  • Storytelling and visualization

CSS Animations

  • Hardware-accelerated
  • Declarative
  • Can't be composed or sequenced easily
  • Not dynamic
  • No manual play-state manipulation

What is the

Web Animations API?

Web Animations defines a model for supporting animation and synchronization on the Web platform.

CSS3 Transitions

CSS3 Animations

SVG SMIL Animations

JS requestAnimationFrame()

But what about...?

  • Velocity
  • Transit
  • GSAP
  • jQuery (get out)

requestAnimationFrame()

  • Runs on the main thread
  • JS execution on every frame
  • Heavy calculations = jank
  • Not declarative (caching helps)

WAAPI is performant.

  • Hardware-accelerated animations in JS
  • Multi-threaded for (qualified) animations
  • Refactored animation implementation...
  • ...and you didn't even notice.

Animation(...)

Basic Usage

var ujsElement = document.querySelector('#UniversityJavaScript');

var ujsPlayer = ujsElement.animate(
    // Keyframe Effect
    [
        { opacity: 0, transform: 'scale(1.2) rotate(35deg)' },
        { opacity: 1, transform: 'scale(1) rotate(0)' },
        { opacity: 0, transform: 'scale(0.8) rotate(-35deg)' }
    ],
    
    // Timing Object
    {
        duration: 1000, // milliseconds
        iterations: Infinity
    });

// No need to play() -- it's already playing!

Animation(...)

via constructor

var ujsElement = document.querySelector('#UniversityJavaScript');

var ujsAnimation = new Animation(
    // Target animatable element
    ujsElement,

    // Keyframe Effect
    [
        { opacity: 0, transform: 'scale(1.2) rotate(35deg)' },
        { opacity: 1, transform: 'scale(1) rotate(0)' },
        { opacity: 0, transform: 'scale(0.8) rotate(-35deg)' }
    ],
    
    // Timing Object
    {
        duration: 1000, // milliseconds
        iterations: Infinity
    });

// Play the animation
document.timeline.play(ujsAnimation);

Animation(...)​

Animations apply a custom animation effect to an animatable element, or target.

  • (Animatable) target
  • Effect (keyframes, etc.)
  • Timing (optional)

AnimationGroup(...)

var ujsElements = document.querySelectorAll('.university-javascript-item');

var ujsAnimation = new AnimationGroup(
    // Array of Animation Nodes
    [
        new Animation(ujsElements[0], [...], {...}),
        new Animation(ujsElements[1], [...], {...}),
        new Animation(ujsElements[2], [...], {...})
    ],

    // Timing object
    {
        duration: 1000,
        iterations: 4
    }
]);

document.timeline.play(ujsAnimation);

AnimationGroup(...)​

Animation Groups contain a group of ordered animation nodes which are played simultaneously.

This means that animations can be hierarchical!

  • Array of child animation nodes
  • Timing (optional)

AnimationSequence(...)

var ujsElements = document.querySelectorAll('.university-javascript-item');

var ujsAnimation = new AnimationSequence(
    // Array of Animation Nodes
    [
        new Animation(ujsElements[0], [...], {...}),
        new Animation(ujsElements[1], [...], {...}),
        new Animation(ujsElements[2], [...], {...})
    ],

    // Timing object
    {
        duration: 1000,
        iterations: 4
    }
]);

document.timeline.play(ujsAnimation);

AnimationSequence(...)​

Animation Sequences are like animation groups, except that child animation nodes are played sequentially; i.e. right after each other.

  • Array of child animation nodes
  • Timing (optional)

Groups vs. Sequences

Composite Animations

var ujsElements = document.querySelectorAll('.university-javascript-item');

var ujsAnimation = new AnimationGroup(
    // Array of Animation Nodes
    [
        new Animation(ujsElements[0], [...], {...}),
        new Animation(ujsElements[1], [...], {...}),
        new AnimationSequence(
            // Array of Animation Nodes
            [
                new Animation(ujsElements[2], [...], {...}),
                new Animation(ujsElements[3], [...], {...})
            ]
        )
    ],

    // Timing object
    {
        duration: 1000,
        iterations: 4
    }
]);

document.timeline.play(ujsAnimation);

Composite Animations

Player Controls

  • player.play()
  • player.pause()
  • player.reverse()
  • player.finish()
  • player.cancel()

WAAPI Examples

Try it now!

Thanks for listening!

Let's get moving!