[web-animations] Default fill mode

Dear public-fxers,

Fill modes are a feature available in both CSS and SVG animations that 
allow the first or last value of an animation to apply either before, 
after, or both before and after the animation itself.

We had some trouble determining what the default fill mode should be for 
the Web Animations API, as there are good arguments for making it none, 
both, or some 'auto' value.

On the one hand, the Web Animations API fill mode should default to 
'none' to match the defaults of CSS and SVG Animations. This will reduce 
the number of surprises web authors encounter when refactoring code from 
CSS or SVG into script using the Web Animations API.

On the other hand, our experience is that 'both' tends to be the fill 
mode used 80% of the time in practice when generating animations using 
script. Furthermore, when using timing groups[1], we have the following 
arrangement:

   child fill mode: 'none', parent fill mode: 'both' -> no fill
   child fill mode: 'both', parent fill mode: 'none' -> no fill outside
                                                        the bounds of
                                                        the parent

In order for a child of a group to fill indefinitely in a given 
direction, both it and all its ancestors need to fill in that direction. 
On the other hand, in order for a child of a group to not fill, only 
that child needs to specify a fill mode of 'none'.
Switching from 'none' to 'both' requires changing values throughout an 
animation tree, whereas switching from 'both' to 'none' can be done locally.

For a more complete and graphical description, please see the attached 
image.

We considered three options:
  (1) choose a default fill mode of 'none' to match CSS and SVG?
  (2) choose a default fill mode of 'both' because it makes the API 
easier to use?
  (3) add an 'auto' fill mode that defaults to 'none' for animations 
(matching CSS and SVG) but 'both' for groups (making it easier to switch 
animations from 'none' to 'both')?

After some discussion we think (3) is probably the best option but if 
anyone has any feedback regarding this, we would be glad to hear it.

Best regards,

Brian

Received on Friday, 2 August 2013 06:16:13 UTC