C. SMIL Boston Animation

Previous version (W3C members only):
Ken Day (Macromedia),
Patrick Schmitz (Microsoft),
Aaron Cohen (Intel)


This is a working draft of a specification of animation functionality for XML documents.  It is part of work in the Synchronized Multimedia Working Group (SYMM) towards a next version of the SMIL language and modules.  It describes an animation framework as well as a set of base XML animation elements, included in SMIL and suitable for integration with other XML documents.

Table of Contents

1. Introduction

The first W3C Working Group on Synchronized Multimedia (SYMM) developed SMIL - Synchronized Multimedia Integration Language.  This XML-based language is used to express synchronization relationships among media elements.  SMIL 1.0 documents describe multimedia presentations that can be played in SMIL-conformant viewers.

SMIL 1.0 was focused primarily on linear presentations, and did not include support for animation.  Other working groups (especially Graphics) are exploring animation support for things like vector graphics languages.  As the timing model is at the heart of animation support, it is appropriate for the SYMM working group to define a framework for animation support, and to define a base set of widely applicable animation structures.  This document describes that support.

Where SMIL 1.0 defined a document type and the associated semantics, the next version modularizes the functionality.  The modularization facilitates integration with other languages, and the development of profiles suited to a wider variety of playback environments.  See also "Synchronized Multimedia Modules based upon SMIL 1.0" (W3C members only).  The Animation Module described herein is designed with the same goals in mind, and in particular to satisfy requirements such as those of the Graphics Working Group.

1.1 Overview of support

This document describes a framework for incorporating animation onto a time line and a mechanism for composing the effects of multiple animations.  A set of basic animation elements are also described that can be applied to any XML-based language that supports a Document Object Model. A language in which this module is embedded is referred to as a host language.

Animation is inherently time-based. SMIL animation is defined in terms of the SMIL timing model, and is dependent upon the support described in the SMIL Timing and Synchronization Module.  The capabilities are described by new elements with associated attributes and associated semantics, as well as the SMIL timing attributes. Animation is modeled as a local time line. An animation element is typically a child of the target element, the element that is to be animated.

While this document defines a base set of animation capabilities, it is assumed that host languages will build upon the support to define additional and/or more specialized animation elements.  In order to ensure a consistent model for document authors and runtime implementors, we introduce a framework for integrating animation with the SMIL timing model. Animation only manipulates attributes of the target elements, and so does not require any specific knowledge of the target element semantics.

An overview of the fundamentals of SMIL animation is given in Animation Framework. The syntax of the animation elements and attributes is specified in Animation Syntax. The semantics of animation is specified in Animation Semantics. The normative definition of syntax is entirely contained in Animation Syntax, and the normative definition of precise semantics is entirely contained in Animation Semantics. All other text in this specification is informative. In cases of conflicts, the normative form sections take precedence. Anyone having a detailed question should refer to the Animation Syntax and Animation Semantics, as appropriate.

1.2 Requirements

2. Animation Framework

This section is informative. Readers who need to resolve detailed questions of syntax or semantics should refer to Animation Syntax and Animation Semantics, respectively, which are the only normative forms.

Animation is inherently time-based, changing the values of element attributes over time. The SYMM Working Group defines a generalized model for timing and synchronization that applies to SMIL documents, and is intended to be included in other XML-based host languages. While this document defines a base set of animation elements, it is assumed that other host languages will build upon the support to define additional and/or more specialized elements.  In order to ensure a consistent model for both document authors and runtime implementors, we introduce a framework for integrating animation with the SMIL timing model.

[@@Ed: We intend that this section be a useful discussion of our central animation concepts, using simple examples. Feedback on its usefulness and clarity will be appreciated. In particular, the syntax elements used are not introduced prior to their use. It is hoped that the examples are sufficiently simple that an intuitive understanding of from/to/by will be sufficient. Details are in Section 3, Animation Syntax.]

@@@[Issue] This draft is written in terms of XML attribute animation. However, there is a need to animate DOM attributes which are not exposed as XML attributes. This applies in particular to structured attributes. A mechanism for naming these attributes is needed.

2.1 Basic Animation

Animation is defined as a time-based manipulation of a target element (or more specifically of some attribute of the target element, the target attribute). The definition expresses a function, the animation function, of time from 0 to the simple duration of the animation element. The definition is evaluated as needed over time by the runtime engine, and the resulting values are applied to the target attribute.  The functional representation of the animation's definition is independent of this model, and may be expressed as a sequence of discrete values, a keyframe based function, a spline function, etc. In all cases, the animation exposes this as a function of time.

For example, the following defines the linear animation of a bitmap. The bitmap appears at the top of the region, moves 100 pixels down over 10 seconds, and disappears.

   <img dur="10s" ...>
      <animate attribute="top" from="0" to="100" dur="10s"/>

Animation has a very simple model for time. It just uses the animation element's local time line, with time varying from 0 to the duration.  All other timing functions, including synchronization and time manipulations such as repeat, time scaling, etc. are provided (transparently) by the timing model. This makes it very simple to define animations, and properly modularizes the respective functionality.

Other features of the SMIL Timing and Synchronization module may be used to create more complex animations. For example, an accelerated straight-line motion can be created by applying an acceleration time filter to a straight-line, constant-velocity motion. There are many other examples.

2.2 Additive Animation

It is frequently useful to define animation as a change in an attribute's value. Motion, for example, is often best expressed as an increment, such as moving an image from it's initial position to a point 100 pixels down:

   <img dur="10s" ...>
      <animate attribute="top" by="100"
               dur="10s" additive="true"/>

Many complex animations are best expressed as combinations of simpler animations. A corkscrew path, for example, can be described as a circular motion added to a straight-line motion. Or, as a simpler example, the example immediately above can be slowed to move only 40 pixels over the same period of time by inserting a second additive <animate> which by itself would animate 60 pixels the other direction:

   <img dur="10s" ...>
      <animate attribute="top" by="100"
               dur="10s" additive="true"/>
      <animate attribute="top" by="-60"
               dur="10s" additive="true"/>

When there are multiple animations active for an element at a given moment, they are said to be composed, and the resulting animation is composite. The active animations are applied to the current underlying value of the target attribute in activation order (first begun is first applied), with later additive animations being applied to the result of the earlier-activated animations. When two animations start at the same moment, the first in lexical order is applied first.

A non-additive animation masks all animations which began before it, until the non-additive animation ends.

Numeric attributes generally can have additive animations applied, though it may not make sense for some. Types such as strings and booleans, for which addition is not defined, cannot.

As long as the host language defines addition of the target attribute type and the value of the animation function, additive animation is possible. For example, if the language defines date arithmetic, date attributes can have additive animations applied, perhaps as a number of days to be added to the date. Such attributes are said to support composite animation.

2.3 Cumulative Animation

The author may also select whether a repeating animation should repeat the original behavior for each iteration, or whether it should build upon the previous results, accumulating with each iteration. For example, a motion path that describes an arc can repeat by drawing the same arc over and over again, or it can begin each repeat iteration where the last left off, making the animated element bounce across the window. This is called cumulative animation.

Repeating our 100-pixel-move-down example, we can move 1,000 pixels in 100 seconds.

   <img dur="100s" ...>
<animate dur="10s" repeat="indefinite" accumulate="true"
attribute="top" by="100"/>    </img> </par>

This example can, of course, be coded as a single 100-second, 1000-pixel motion. With more complex paths, additive animation is much more valuable. For example, if one created a motion path for a single sine wave, a repeated sine wave animation could easily be created by cumulatively repeating the single wave.

Typically, authors expect cumulative animations to be additive (as in the example directly above), but this is not required. The following example is not additive. It starts at the absolute position given, 20. It moves down by 10 pixels to 30, then repeats. It is cumulative, so the second iteration starts at 30 and moves down by another 10 to 40. Etc.

   <img dur="100s" ...>
<animate dur="10s" repeat="indefinite"
attribute="top" from="20" by="10"
additive="false" accumulate="true"/>
   </img> </par>

Cumulative animations are possible for any attribute which supports animation composition. When the animation is also additive, as composite animations typically are, they compose just as straight additive animations do (using the cumulative value).

2.4 Freezing Animations and Holding Values

When an animation element ends, its affect is normally removed from the target. For example, if an animation moves an image and the animation element ends, the image will jump back to its original position. For example:

   <img dur="20s" ...>
      <animate begin="5s" dur="10s" attribute="top" by="100"/>

The image will appear stationary for 5 seconds (begin="5s" in the <animate>), then move 100 pixels down in 10 seconds (dur="10s", by="100"). At the end of the movement the animation element ends, so it's effect ends and the image jumps back where it started (to the underlying value of the top attribute). The image lasts for 20 seconds, so it will remain back at the original position for 5 seconds then disappear.

The standard timing attribute fill can be used to maintain the value of the animation after the simple duration of the animation element ends:

   <img dur="20s" ...>
      <animate begin="5s" dur="10s" fill="freeze"
               attribute="top" by="100"/>

The <animate> ends after 10 seconds, but fill="freeze" keeps its final effect active until it is ended by the ending of its parent element, the image.

However, it is frequently useful to define an animation as a sequence of additive steps, one building on the other. For example, the author might wish to move an image rapidly for 2 seconds, slowly for another 2, then rapidly for 1, ending 100 pixels down. It is natural to express this as a <seq>, but each element of a <seq> ends before the next begins.

The attribute hold keeps final effect applied until ended by target element itself, the image, ends:

   <img dur="100s" ...>
<animate dur="2s" attribute="top" by="50" hold="true"/>
<animate dur="2s" attribute="top" by="10" hold="true"/> <animate dur="1s" attribute="top" by="40" hold="true"/> </seq>

The effect of the held animations are essentially attached to the target to achieve the desired result. In this example, it will have moved 50 pixels after 2 seconds and 60 after 4. At 5 seconds it will reach 100 pixels and stay there. Note that not only does each <animate> end before the image, but the <seq> containing the animation elements also ends (when the last <animate> ends). The effect of the held animations is retained until the image ends.

The difference between hold="true" and fill="freeze" is that hold causes the animation to "stick" to the target element until the target element ends, while the duration of the fill is determined by the parent of the animation element.

The above example is equivalent to both of the following examples, but easier to visualize and maintain:

<!-- Equivalent animation using a <seq> -->
<img dur="100s" ...>
<animate dur="2s" attribute="top" by="50"/>
<animate dur="2s" attribute="top" values="50 60" additive="true"/> <animate dur="1s" attribute="top" values="60 100" additive="true" fill="freeze"/> </seq>
<!-- Equivalent animation using a <par> -->
<img dur="100s" ...>
<animate dur="2s"
attribute="top" by="50" fill="freeze"/> <animate begin="prev.end" dur="2s" attribute="top" by="10" fill="freeze"/> <animate begin="prev.end" dur="1s" attribute="top" by="40" fill="freeze"/> </par>

The trick here is that fill="freeze" causes the animation elements to last until the end of the <seq> or <par>, respectively, which in turn lasts until the image ends. With more complex paths, the arithmetic would be impractical and difficult to maintain.

2.5 Nested Animation (?)

@@@Issue If animation elements were allowed to animate the parameters of other animation elements, certain use cases become very easy. For example, a dying oscillation could be created by placing an undamped oscillation animation, then animating the length of the oscillation's path (decreasing it over time). The SYMM WG is uncertain whether the complexity of this feature is worth its benefit.

2.6 Interaction with DOM Manipulations

@@@ Issue We need to define what it means to animate an attribute that has been changed by scripting or by another DOM client while the <animate> is active. This involves some implementation issues. Some alternatives: changing an attribute with script cancels the animation, changing an attribute simply changes the "initial state" of that attribute and the animation proceeds as if the attribute started out with that values.

2.7 Animation Elements as Independent Timelines

By default, the target of an animation element will be the closest ancestor for which the manipulated attribute is defined. However, the target may be any (@@@??) element in the <body> of the document, identified by its element id. [@@@Should be limited to elements which are known when the animation begins, or perhaps to those known when the animation is encountered in the text -- should be similar to other limitations on idrefs. Probably no forward references past the point in document loading at which playback starts.]

An animation element affects its target only if both are active at the same time. The calculation of the target attribute at a given moment in time uses the animation element's timeline (current position on its timeline and simple duration) to compute the new value of the animated attribute of the target.

For example, in the following animation the image repeatedly moves 100 pixels down, from 0 to 100, and jumps back to the top. The 10 second animation begins 5 seconds before the target element. So, the target appears at 50, moves down for 5 seconds to 100, jumps back to the top, and goes into a series of 10-second motions from 0 to 100.

   <img id="a"         begin="5s" .../>
   <animate target="a" begin="0s" dur="10s" repeat="indefinite"
                       attribute="top" from="0" to="100"/>

Note that in this example, the animation is running before the target exists, so it cannot be a child of the target. It must explicitly identify the target.

This is very useful for starting part of the way into spline-based paths, as splines are hard to split.

2.8 Limits on Animation

The definitions in this module could be used to animate any attribute. However, it is expected that host languages will constrain what elements and attributes animation may be applied to. For example, we do not expect that most host languages will support animation of the src attribute of a media element. A host language which included a DOM might limit animation to the attributes which may be modified through the DOM.

Any attribute of any element not specifically excluded from animation by the host language may be animated, as long as the underlying datatype supports discrete values (for discrete animation) or addition (for additive animation).

3. Animation Syntax

This section defines the XML animation elements and attributes. It is the normative form for syntax questions. See Animation Semantics for semantic definitions; all discussion of semantics in this section is informative.

3.1 Common Attributes

All animation elements use the common timing markup described in the SMIL Timing and Synchronization module.  In addition, animation elements share attributes to control composition, and to describe the calculation mechanism.

Common attributes:

Controls whether or not the animation is additive. Possible values are "true" and "false". Default is "false", unless another attribute is used which specifies otherwise. This attribute is ignored if the target attribute does not support addition.
Controls whether or not the animation is cumulative. Possible values are "true" and "false". Default is "false". This attribute is ignored if the target attribute does not support addition.
Controls whether or not the effect of the animation when the animation element ends is applied to the target attribute until the target element ends. Possible values are "true" and "false". Default is "false".
This attribute specifies the attribute to animate.  This is the name of an XML attribute. Any constraints on attributes which may be animated must be specified in the definition of the host language.
target [@@@Issue: should we change this to "element"? Would that be clearer?]
This attribute specifies the element to be animated. The value is the XML identifier of the target element. It defaults to the parent element if no id is specified. If the target does not support the named attribute, the animation element has no effect.
         @@@Issue: The id mechanism is important to support timed sets of animations (e.g. sequences) that introduce parent nodes between the animated element and the animation behavior. Xpointer/Xpel syntax may be preferable (since it is a uniform mechanism already supported by future XML processors) than new attributes called target and attribute.

3.2 Animate Element

The <animate> element introduces a generic attribute animation that requires no semantic understanding of the attribute being animated.  It can animate numeric scalars as well as numeric vectors. It can also animate discrete sets of non-numeric attributes.


Specifies the interpolation mode for the animation. This can take any of the following values:
This specifies that the animation function will jump from one value to the next without any interpolation.
Simple linear interpolation between values is used to calculate the animation function. Treated as "discrete" if the attribute does not support linear interpolation. This is the default calcMode.
As for linear, interpolating from one value in the values list to the next by the the amount of time elapsed defined by a cubic Bezier spline. The knots of the spline must be specified in the values attribute.  A values array must be specified. @@@[Issue] Syntax of values attribute to specify splines is TBD. Needs to cover both open & closed paths.
There are two ways to define the animation function, lists of values or from-to-by.

list of values specification of animation function

The basic form is to provide a list of values:

values attribute of the <animate> element:
A space-separated list of one or more values, compatible with the target attribute and interpolation mode, and agreeing with the value syntax of the host language. Vector-valued attributes are supported using the vector syntax of the host language. [@@@Issue, Patrick] Space separation may be a pain for some types of values. I would describe some explicit separator, and would add that parens around the values are legal, and ignored. In particular, consider a list of triplets for something like HSL or x,y,z values.

The values array and calcMode together define the animation function. For discrete animation, the duration is divided into even time periods, one per value. The animation function takes on the values in order, one value for each time period. For linear animation, the duration is divided into n-1 even periods, and the animation function is a linear interpolation between the values at the associated times. Note that a linear animation will be a nicely closed loop if the first value is repeated as the last.

from/to/by specification of animation function

For convenience, the values for a simple discrete or linear animation may be specified using a from/to/by notation, replacing the values and additive attributes. From is optional in all cases. To or by (but not both) must be specified. If a values attribute or an additive attribute is specified, none of these three attributes may be specified. [@@@Issue] Need to specify behavior in error cases.

from attribute of the <animate> element:
Optional. Specifies the starting value of the animation.  If from is specified, its value must match the to or by type. If the from value is not specified, zero is used for additive animations.
to attribute of the <animate> element:
Specifies the ending value of the animation.  The argument value must match the attribute type. Specifies a non-additive animation with 2 elements in the values array, the value of the from attribute and the value of the to attribute. The from attribute defaults to the base value of the attribute for the animation when to is used.
by attribute of the <animate> element:
Specifies a relative offset value for the animation. The host language must define addition of the by value to the target attribute, and the result must be compatible with the target attribute. Specifies an additive animation with two elements in the values array, from and by. The from attribute defaults to zero when by is used.

Animations expressed using from/to/by are equivalent to the same animation with from and to or by replaced by values. Examples of equivalent <animate> elements:

from/to/by form
values form
<animate ... by="10"/>
<animate ... values="0 10" additive="true"/>
<animate ... from="5" by="10"/>
<animate ... values="5 15" additive="true"/>
<animate ... from="10" to="20"/>
<animate ... values="10 20" additive="false"/>
<animate ... to="10"/>
<animate ... values="b 10" additive="false"/>,
where b is the base value for the animation.

3.3 Set Element

The <set> element is a convenience form of the <animate> element.  It supports all attribute types, including those that cannot reasonably by interpolated, and that more sensibly support semantics of setting a value over the specified duration (e.g. strings and boolean values). The <set> element is non-additive.  While this supports the general set of timing attributes, the effect of the "repeat" attribute is just to extend the defined duration. In addition, using "fill=freeze" will have largely the same effect as an indefinite duration.

<Set> takes the "attribute" and "target" attributes from the generic attribute list described above, as well as the following:

Specifies the value for the attribute during the duration of the <set> element. The original value of the attribute (before the animation started) is restored when the animation completes (i.e. ends).  The argument value must match the attribute type. This can be used with any attribute, but it is primarily intended for use with String and Boolean attributes.

Formally, <set ... to=z .../> is defined as <animate ... calcMode="discrete" additive="false" values=z .../>.

3.4 Motion Animation

[@@@ Issue] The WG does not agree on the inclusion of this element in SMIL. This would be a very reasonable extension in other host languages, and there is value in a standardized motion animation element. We are interested in feedback from others who are defining potential host languages.

In order to abstract the notion of motion paths across a variety of layout mechanisms, we introduce the <move> element. This takes all the attributes of <animate> described above, as well as two additional attributes:

Specifies the origin of motion for the animation. The default origin for an element is relative to the parent container, and is generally relative to the top left of the parent (although this depends upon the layout model in the document). However, it is often useful to place the origin at the position of the element as it is laid out. This allows for motion relative to the default layout position (e.g. from off screen left to the layout position, specified as from="(-100, 0)" and to="(0, 0)". This is especially useful for flow-layout models like HTML and CSS.

Legal values are:
The origin is the top left of the parent layout container. This is the default.
The origin is the default layout position of the element being animated, as set by the layout manager.
Specifies the curve that describes the attribute value as a function of time. @@@ The path syntax is TBD. Should address the issue of mapping time to control points, so that control points need not be spaced evenly in time.

3.5 Color Animation

[@@@ Issue] SYMM WG would like there to be a standard animation tag for color, e.g. interpreted in the HSL space. However, some of the members do not see this as part of our charter. We are interested in feedback from others who are defining potential host languages.

The following is one such possible definition:

In order to abstract the notion of color animation, we introduce the <colorAnim> element. This takes all the generic attributes described above, supporting string values as well as RGB values for the individual argument values.  The animation of the color is defined to be in HSL space. [@@@ need to explain why & interaction with RGB values -- examples. Might want rgb-space animation for improved performance when it's "good enough" for the author].  This element takes one additional attribute as well:
This specifies the direction to run through the colors, relative to the standard color wheel. If the to and from are the same values and clockwise or cclockwise were specified, the animation will cycle full circle through the color wheel.

Legal values are:

Animate colors between the from and to values in the clockwise direction on the color wheel. This is the default
Animate colors between the from and to values in the counter-clockwise direction on the color wheel.
Do not animate the hue, but only the saturation and level.  This allows for simple saturation animations, ignoring the hue and ensuring that it does not cycle.

We may need to support extensions to the path specification to allow the direction to be specified between each pair of color values in a path specification.  This would allow for more complex color animations specified as a path.

4. Animation Semantics

@@@ Need a section with precise mathematical definitions of animation semantics

5. Document Object Model Support

@@@Need DOM for animation elements.

Need to mention and point to DOM Core and SMIL DOM specs.  May want to discuss issues which host languages must specify: Interaction between animation and DOM manipulations, the mechanism for determining property type, definition of addition.  Animation of DOM attributes not exposed as XML attributes discussion may belong here.

Related section: Interaction with DOM Manipulations

6. References

@@@Ed: Need to review
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 24 April 1998.

Available at http://www.w3.org/TR/REC-html40.

"Synchronized Multimedia Integration Language (SMIL) 1.0 Specification W3C Recommendation 15-June-1998 ".

Available at: http://www.w3.org/TR/REC-smil.

"SMIL Document Object Model", Nabil Layaïda, Patrick Schmitz, Jin Yu.

Available at http://www.w3.org/AudioVideo/Group/DOM/symm-dom (W3C members only).

"Synchronized Multimedia Modules based upon SMIL 1.0", Patrick Schmitz, Ted Wugofski, Warner ten Kate.

Available at http://www.w3.org/TR/NOTE-SYMM-modules.

... SMIL timing module, Patrick Schmitz, ...other editors.

Available at http://www.w3.org/@@@.

@@@ an appropriate public reference describing the activities of the Graphics WG and/or information about the SVG language.

Available at http://www.w3.org/@@@

"Extensible Markup Language (XML) 1.0", T. Bray, J. Paoli, C.M. Sperberg-McQueen, editors, 10 February 1998.

Available at http://www.w3.org/TR/REC-xml

Appendix 1. Collected Issues to be resolved

In no particular order: