Web Animations

FXTF F2F Hamburg 2012

Brian Birtles
Shane Stephens
Rik Cabanier
Alex Danilo
Tab Atkins
Dmitry Baranovskiy
Vincent Hardy

Overview

Why?

CSS Transitions, CSS Animations, SVG Animations are good but:

SVG limitations

CSS limitations

The proposal

Script-extensible declarative animations

Specifically:

and:

The API at a glance

Anim:

AnimInstance:

The API in action

// Create a new animation
var anim = new Anim();
anim.timing.duration = 1;

// Create an instance
var instance = a.animate(document.getElementById('a'));

// Target multiple elements
a.timing.duration = 2;
a.animate(document.querySelectorAll("div.warning"));;

The API at a glance: grouping

Animations can be grouped:

Group types

Nesting groups

Group interfaces

Groups, like animations, use templates (AnimGroup) and instances (AnimGroupInstance).

The Web Animations model

Features of the timing model

Features of the timing model

Features of the animation model

Types of animation function:

Animation composition

Supporting CSS

Supporting CSS

Supporting SVG

Summary