The Web Animations API and SMIL/SVG: not there yet

The Web Animations API  (WAAPI) starts with the promise to integrate existing animation methods for the web platform into a single model:

The Web Animations model is intended to provide the features necessary for expressing CSS Transitions , CSS Animations  and SVG . As such, the use cases of Web Animations model is the union of use cases for those three specifications.

One of the cool features of the declarative SMIL animation method included in SVG 1.1 is its ability to animate not only CSS properties, but also attributes. Yes, that distinction is a bit blurry. A lot of CSS properties can also be expressed as “presentation attributes”:

<circle r="10" style="fill:red" />

is just the same as

<circle r="10" fill="red" />

But there are still a number of attributes that cannot be expressed as properties, for example the radius r in the above example. (Version 2 of the SVG spec says differently, but browsers are not implementing that yet.)

The existing implementations of SMIL animations in current browsers can handle these attributes just fine. The following example has both kinds: the path stroke color is changed over time, with just the same syntax as the d attribute that has no CSS equivalent.

See the Pen SMIL attribute animation by ccprog (@ccprog) on CodePen.

Considering the promise made above, I assumed that rewriting that declarative animation with the WAAPI should work:

See the Pen WAAPI attribute animation - not working yet by ccprog (@ccprog) on CodePen.

I was disappointed. While the changing stroke color shows that animating CSS properties is possible, no browser implements the animation of attributes.

Looking for a reason, I dug into the spec and found that not even that is yet prepared to handle anything but animating CSS. Some paragraphs just do not assume anything else. Some days ago, I even raised an issue  about that with the CSSWG. I won’t go too deep here, but this is what got my attention:

The keyframe format used by the WAAPI is a simple object, listing the property and its value as a key-value pair, and adding the position of the keyframe in the timeline as a property offset:

{ stroke: 'blue', offset: 0.5 }

Unfortunately CSS has a property of that name, and SVG an attribute (for the position of a color stop in a gradient). How would you express that? The spec invented a patch  for the CSS case:

{ cssOffset: 'auto', offset: 0.5 }

It’s a bit strange, since that property is used for motion path animations itself, so is the aim here to animate the path along which an object is moved in an animation? Nonetheless, the definition is right there. But how should an animation of the offset attribute be expressed? cssOffset obviously is not an appropriate name.

The authors of the spec very obviously did not yet think outside the CSS box. And browser manufacturers have also not come around to implementing attribute animations — otherwise they would have stumbled upon the same that I have.