View source for Web Animations/Meetings/Tokyo F2F Day 1

2012-03-28, Mozilla Japan, Tokyo

== Present ==

* Shane Stephens
* Rik Cabanier
* Alex Danilo
* Brian Birtles

== Minutes ==

(This is just a snapshot of [http://openetherpad.org/H6VDOWrtnp the etherpad].)

<pre style="white-space: pre-wrap">
Day 1, Web Animations Tokyo F2F 28 March 2012
Topic: Scope of API
Brian presents a big picture - where should the boundary be?
SVGA   <->   WA   <->   CSSA/T
Some examples of SVG stuff that may not end up in WA:

    <animated begin="accessKey(A)".../> declaratively triggers an animation when 'A' is pressed. Do we include it, or say that it's outside the scope of Web Animations?

    Wall clock (run this animation at *this* wall clock time)

Another example: state machines. Where would they live?
  - discussion about whether to start in SVG, or in CSS, or in WA
Should we be moving the element syntax out of SVG and into the HTML namespace?
ACTION: Shane to implement Web Animations in JS before May :)
Points of agreement:
* Most functionality should live in WA where possible
* Some features will not. One example is deprecated / less than useful SVG features required for backwards compatibility (e.g. wallclock)
* We are reserving the right to introduce features and parts of features:
  - in SVG but not CSS
  - in CSS but not SVG
  - in Web Animations but not SVG or CSS
  - in both SVG and CSS
* We will sound out the possibility of adding <animate> as a first-class citizen of HTML
* In any case, we would like to be able to use CSS to refer to an element syntax like we can already do with filter effects "url(file.svg#filter)" or even "url(#filter)" - example http://www.w3.org/TR/css3-images/#url
RESOLUTION: Mapping Web Animations to existing animations specs (CSSA/T, SVGA) will be done in separate document (technical notes?). But we will still try to deliver those in May.
Topic: Synchronisation (scheduling)
http://www.w3.org/Graphics/fx/wiki/Synchronization#Richer_syntax_for_animations
Basics we seem to agree on:
- We like the idea of an animation group
- Animation groups contain animation group elements
- Animation group elements include:
  - Animations
  - Animation groups
  - Animators combined with a selector or node list (this might not be represented in the API, i.e. animation groups don't actually need to hold animator objects)
SVG is easy to do since we have <animate> nodes that can be reordered as necessary
CSS is hard. We can either have:
a) <div animation-name="a" ... /> and as you watch the document the animation-name updates
b) <div animation-name="a, b, c, d" ... /> and the animations take affect at different times
There was general agreement that (b) was better.
Link to timesheets JS implementation: http://scenari.utc.fr/c2m/res/DocEng2011.pdf
And the demo: http://wam.inrialpes.fr/timesheets/
One possibility to CSS:
* Default animation group which is a "par"
* You can specify an animation group which is a sequence (by default?) as a property
  -- and that is probably a list as well
  Possibilities here are:
    animation-group="groupA, groupB"
    animation-sequence="groupA, groupB"
* The default order for those sequences is document order (DOM order)
* That order can be tweaked with a numeric index, sequence-index?
* Basically you match up all elements with the same animation-group name and put them in a seq animation group
* If two animations in a sequence group have the same index, there are two possibilities:
a) use document order
b) create a nested par group
* Note that this is somewhat limited, and for some arrangements an element syntax will be necessary
* Note also that this should work with video and audio by applying the same properties to them
* Can we adjust the start time of the items in the sequence? animation-delay is relative to the end of the previous item in the sequence
-- yes, but if you have a negative delay do you get overlap or cutoff? the general view seems to be cutoff because;
  -- it seems to be more consistent with the idea that a sequence only allows sequential behaviour
  -- it extends the current definition of animation-delay in CSS more naturally
* Need to work out how to define dynamic changes to groups (e.g. due to :hover) such that we can also preserve CSS's preference to not touch animations in flight
Synchronization with media::
* For reference: http://www.w3.org/TR/SVGTiny12/multimedia.html#Smil2Sync
* http://www.whatwg.org/specs/web-apps/current-work/#timed-text-tracks
Proposal: 3 types of containers
1) sequence -- the nth element always waits for the n-1th element to finish (regardless of pausing)
  -- seek on group = work out which child to play and start it at the appropriate offset
  -- seek on child = just seek within that child
2) a strict par container -- everything is locked. If any element is delayed, they all pause. Seeking one seeks them all
  -- seek on group = seek all children to the same time
  -- seek on a child = seek all children to the same time
3) a group container -- a normal par without any locking.
  -- seek on group = seek all children to the same time
  -- seek on a child = seek that child only
- In CSS you achieve these as follows
* the default group for the document is (3)
* sequence groups (1) are created using animation-sequence="name"
* strict par containers (2) are created using the same animation-sequence name with the same sequence-index
Regarding the timed text API, <video> etc. should simply act as strict par containers (2)
What about making strict par groups media elements???
Media API: http://dev.w3.org/html5/spec/single-page.html#media-elements
-- this interface applies to Elements, so it doesn't apply directly to our animation group objects, but we could define a WebAnimationGroupElement interface that inherits MediaElement and forwards on the implementation in WebAnimationGroup interface
-- note that the mediagroup attribute allows creating a strict par container (MediaController). We should try to align with this interface.
HTML: mediagroup="video" (http://dev.w3.org/html5/spec/single-page.html#dom-media-mediagroup)
Our proposal for CSS: animation-sequence="video" sequence-index="3"
Let's happy change the name of strict par to mediagroup
.foo {
    animation-name: "a, b, c";
} -- runs a, b and c in a grouping container
.foo {
    animation-name: "a, b, c";
    mediagroup: "video";
} -- runs a, b, and c in a mediagroup container called video
.foo {
    animation-name: "a, b, c";
    animation-sequence: "video";
} -- runs a, b and c in a sequence container called video
.foo {
    animation-name: "a, b, c";
    animation-sequence: "video";
    sequence-index: "1, 1, 1";
} -- runs a, b and c in a mediagroup container INSIDE a sequence container called video
.foo {
    animation-name: "a, b, c";
    animation-sequence: "video";
    mediagroup: "video";
} -- mediagroup is ignored
<animationGroup name="video"/> -- represents mediagroup "video"
<animationGroup type="sequence">
  <animationGroup type="mediagroup" name="video">
    <animate href="#id">
    <animate select=":first-child()">
  </animationGroup>
  <animate>
</animationGroup>
-- prefer <sequence>, <parallel> (= grouping container), <synced> (=mediagroup, strict par, whatever)
Want to define a <link ..> syntax that pulls in the animation schema from a separate XML file, much like filters can be defined (except that filters use a url(...)).
<g class="button">
  <rect .... />
  <text ... />
</g>
on mouse over:
rect: transform-scale(1.1)
text: glows white 2s
rect fill; after the text finishes glowing it pulses radial gradient stops
.button {
      animation-name: "scale, glow-text, rainbow";
      animation-sequence: "button-sequence";
      sequence-index: "1, 1, 2";
}
@keyframes scale {
    ...
}
@keyframes glow-text {
    ...
}
@keyframes rainbow {
    ...
}
http://lists.w3.org/Archives/Public/public-svg-wg/2012JanMar/0105.html
   <g time-container="seq" begin="rect.mouseover"
     end="rect.mouseout">
     <g time-container="par">
       <animate xlink:href="#glowFlood" .../>
       <animateTransform xlink:href="#label" .../>
       <animate xlink:href="#label" .../>
       <animate xlink:href="#whitenR" .../>
       <animate xlink:href="#whitenG" .../>
       <animate xlink:href="#whitenB" .../>
       <set xlink:href="#whiteRect" .../>
     </g>
     <g time-container="par" repeatCount="indefinite">
       <set xlink:href="#frame0" .../>
       <g time-container="seq">
         <animate xlink:href="#frame1" .../>
         <animate xlink:href="#frame2" .../>
         ...
         <animate xlink:href="#frame35" .../>
       </g>
     </g>
   </g>
   <g time-container="par" begin="rect.mouseout" end="rect.mouseover">
     <animateTransform xlink:href="#label" .../>
     <animate xlink:href="#glowFlood" .../>
     <animate xlink:href="#label" .../>
     <animate xlink:href="#whitenR" .../>
     <animate xlink:href="#whitenG" .../>
     <animate xlink:href="#whitenB" .../>
   </g>
   
.a {
    mediagroup: "first";
    animation-name: "parA, parB, parC, parD, parE, parF, parG";
}
.b {
    mediagroup: "inner";
    animation-name: "inner1";
}
.c {
    animation-sequence: "inner-seq";
    animation-name: "seq1, seq2, ..., seq35";
}
.d {
    mediagroup: "second";
    animation-name: "parA2, parB2, ...";
}
<sequence name="outer">
    <synced name="first"/>
    <synced name="inner">
        <sequence name="inner-seq"/>
    </synced>
</sequence>
- It appears there are some complex cases where you really do need the element syntax. In that case, we need a way of making the element syntax generic so you can apply it more than once (and don't have to generate IDs). HTML templates may be one possibility but we have yet to investigate if they will work here or not.
- Another possibility to investigte is a select="" attribute on <animate> that takes a CSS selector and is scoped at the animation target.
.a {
    animation-name: myGroup; url(myfile.xml#group)
}
<sequence name="myGroup" id="group">
  <animate select="rect" ... />
  <animate select=":first-child" ... />
</sequence>
.a {
    animation-name: myGroup, myAnimationElement, a, b, c;
}
</pre>