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

I have to admit I'm a bit confused.  Doesn't getAnimations() always return
a sequence that's ordered by the animation sequence number [1]?  That would
mean in example 2 you'd get "a, b, c" in both invocations. Perhaps I'm
missing a subtlety of the custom animation priority [2]?

Best,

- Kris

[1] http://w3c.github.io/web-animations/#dom-animatable-getanimations
[2] http://w3c.github.io/web-animations/#custom-animation-priority

On Sun, May 31, 2015 at 9:38 PM, Brian Birtles <bbirtles@mozilla.com> wrote:

> 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
>
>