Web Animations/Meetings/Meeting 12

From Effects Task Force

Time, location: 2 Apr 16:30 PDT / 3 Apr 09:30 AEST / 3 Apr 08:30 JST, Skype + Etherpad


  1. CSS syntax for additive animation
  2. Timeline interface


1) CSS syntax for additive animation

  • Shane will write CSS technical note
  • The most important part is the mapping of the API onto CSS's current feature set
  • But it would also be nice to see how some of the new features of the API could be exposed in CSS (so people can see the new stuff!)

2) Timeline interface

2.1 The WebAnimationTimeline interface I think what you want here is:

  • get all active animations—you can do this manually?
    • just add this to the animation group interface?
  • get all animations between two times??—you can do this manually?
    • probably not needed? Can always add in a later revision if we're wrong.
  • get all active animations for a given element
    • Shane wants this on the Element interface
    • Brian points out window.getComputedStyle
      • this is sort of an emergent property - it doesn't exist until you ask for it. Maybe that's true for animations too?
    • If we added another interface, e.g. AnimatableElement, you'd have to write "(elem.getAnimations) elem.getAnimations();" every time you wanted to query the extra methods (unless you were sure the element was an animatable one).
    • Another possibility is to add getAnimationsForElement to the AnimationGroup interface
var g = document.animationRoot; // or something like that
var anims = g.getAnimationsForElement(elem);

In order to support the last option above, we need a convenient way of getting the animation group that corresponds to the document (animationRoot) above. That means changing the document object. Or possibly HTMLDocument and SVGDocument?
http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-document <-- DOM L4
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#documents <-- WHATWG HTML5

SUMMARY: There are two methods that seem useful:

a) Add a method to the element interface (or, more likely, the HTMLElement and SVGElement interfaces). e.g. element.getAnimations(); This is probably the most convenient approach from an authoring point of view but might get push-back since elements are used everywhere.

b) Another approach is to add a method to the AnimationGroup interface. e.g. getAnimationsForElement(elem). This approach depends on having a convenient method for getting the animation group corresponding to the document (the root level animation group)--something we probably need anyway. That might require modifying the HTMLDocument and SVGDocument interfaces but that seems like it might be possible, perhaps more so than changing the corresponding Element interfaces since the document object is not used quite as widely.

(b) does have the advantage of being a little more powerful--you can use it to get the animations only on a given group

We can propose both (a) and (b) and request feedback.

Next meeting: 4 Apr 16:00 PDT / 5 Apr 09:00 AEST / 5 Apr 08:00 JST for 30min only