[web-animations] Ordering animations based on when they transition from idle

Hi,

I'm trying to nail down the ordering of animations so I can implement it 
in Firefox. I wrote up an outline of this on Github[1] and went over it 
with Shane, Doug and Mike last week who agreed it seems reasonable.[2]

Coming to implement this now, however, I've come across the following 
edge case:

   elem.style.animation = 'a 2s, b 3s, c 4s';
   let b = elem.getAnimations[1];
   let c = elem.getAnimations[2];
   elem.style.animation = 'a 2s, d 5s';
   c.play();
   b.play();
   elem.getAnimations(); // what is the order here?

The issue is that so long as b and c are in elem's list of animations, 
their order (priority) is well-defined. Once we drop them from that 
list, however, what determines their priority?

As the spec stands, we'd fall back to regular animation priority which 
is based on its animation sequence number[3]. This is defined as being 
based on when the animation is created.

That's problematic because we don't require CSS animations or 
transitions to be created in any specific order. Furthermore, even if we 
did require that, you'd get strange results when, for example, you do 
the following:

   elem.style.animation = 'a 2s, b 3s';
   getComputedStyle(elem).animationName; // flush style
   elem.style.animation = 'a 2s, c 4s, b 3s';
   let anims = elem.getAnimations(); // returns a, c, b
   elem.style.animation = '';
   anims.forEach(anim => anim.play());
   elem.getAnimations(); // returns a, b, c. What??

I wonder if we should change the animation sequence number to be based 
on when the animation last transitioned out of the idle state.

If we did that, the order in the first example would be 'a, d, c, b'. In 
the second example, we'd get 'a, b, c' in both cases.

Doing this would also allow authors to alter the priority of animations 
without having to regenerate them: simply cancel() and play() to push to 
the top of the stack.

I think this is intuitive since cancelling an animation effectively 
takes it out of any composition stack it might be contributing to.

What do you think?

Brian


[1] https://github.com/w3c/web-animations/issues/62
[2] https://lists.w3.org/Archives/Public/public-fx/2015AprJun/0046.html, 
item 3
[3] http://w3c.github.io/web-animations/#animation-sequence-number

Received on Monday, 1 June 2015 04:38:32 UTC