Serious Animation (an introduction to Web Animations)

When you think of animation you
probably imagine things like this…

Or perhaps this…

But actually there are other ways of
using animation!

OSX’s genie effect make it easy to
understand what has happened to
your window and how to get it back

Firefox’s interface uses animation
in a similar way to tell you
where your download has gone.

Changes big and small can often be
grasped more easily using animation.

Long stories can also be made easy
to comprehend using animation.

Animation is essentially using time to
convey information.

If we apply both these classes to
the same element…

One wins since CSS Animation
can’t do addition

If we make up a single animation
combining both effects the timing won’t
match and we have to prepare all
possible combinations in advance

We can’t animate Foxkeh’s eyes like this

SVG Animation actually has more features…

But CSS has much more content.

In most browsers the implementation of
CSS Animation and SVG Animation
is completely separate.

As a result CSS is more optimised and
correctly and widely implemented

(in so far as making changes to
CSS properties is concerned)

Some people suggested we
shouldn’t have two animation
models for the Web.

At the same time developers pointed
out missing features in both.

Features we already had
in both CSS and SVG.

From CSS we imported
animation direction.

CSS Transitions’ automatic
reversing is not part of the Web
Animations model but can be
realized using other features of the
model.

We imported a number of features
from SVG such as additive
animation, motion path animation
and seek control.

The most complex features from
SVG, however, are not part of the
model but are included in the SVG
bindings (“Animation Elements”).

We also added four new
features. Timing groups and
custom effects are particularly
powerful.

Web Animations is
fundamentally an
abstract model.

CSS syntax and mapping to
the model will be defined in
a separate spec.

Likewise, SVG syntax and
mapping will be defined in
the Animation Elements spec.

There is also an API
onto the model.

Currently the API and
model are defined in one
spec but that is simply
for ease of maintenance.

http://brian.sol1.net/svg/2013/07/25/players-wanted-the-pause-and-seek-game/

Players are used to
control playback of
animations and timing
groups.

There are two types of timing groups:
timing groups and timing chains
(although these names may change).

Timing groups play
their children
simultaneously.

Timing chains play
their children in turn.

The arrangement from
the previous demo is
as follows.

dev.w3.org/fxtf/web-animations

git.io/webanim
Native implementation
status.

By way of introduction to SVG animation, this is a very
simple app for creating SVG animations.
You can try it at http://parapara-editor.mozlabs.jp/sandbox.

The completed animations get sent to a shared canvas where
they are animated. This is also created with SVG animation.
You can find out more at http://parapara.mozlabs.jp.

The SVG file for a character looks
like this.

But with Animation Elements we
can simplify it to this.

The select attribute lets us re-use
the animation definition.

Timing chains make sequencing easy.

Our door close demo could be
written like this.

Element syntax is convenient for expressing hierarchies
and can be used together with CSS by using <set>
elements to set CSS classes that trigger animations.

This kind of approach lends itself to collecting timing information
in one place, perhaps even a separate timesheet file.

git.io/webanim

public-fx@w3.org

birtles@mozilla-japan.org

Serious Animation (an introduction to Web Animations)

More Related Content

What's hot

Viewers also liked

Similar to Serious Animation (an introduction to Web Animations)

Recently uploaded

Serious Animation (an introduction to Web Animations)