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()

Source: https://www.youtube.com/watch?v=ep0_0W0qWsc

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)

Specification

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)

Specification

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)

Specification

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

WAAPI Examples

• web-animations.github.io/web-animations-demos
• codepen.io/rachelnabors/full/zxYexJ

Try it now!

• Official W3C Specification (draft)
• Web Animations API Polyfill (all modern browsers)

Thanks for listening!

Let's get moving!

• Twitter: @davidkpiano
• CodePen: codepen.io/davidkpiano
• GitHub: github.com/davidkpiano