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

On Mon, Jun 1, 2015 at 2:39 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.


Getting the animations (elem.getAnimations()) must force their creation,
surely? We can define that this happen in priority 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??
>

This is slightly odd, but quite explainable and definitely a corner case.


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

I'm not 100% sure that there's an issue that needs solving - these are
really edge cases and as long as the behavior is consistent I think it's
fine.

One concern I have is that currently text order (or creation order) is
inviolate which makes it easy to reason about; but that might be outweighed
by the fact that if we made this change then authors could (to a degree)
choose to reorder the animations.

I guess the central question is whether we want authors to be able to
reorder? If yes, I think we probably want to give them something nicer than
this, and if we do then we can specify that CSS uses it to get
prioritization right.

Cheers,
    -Shane


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