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

An alternative proposal:
CSS animations use sequence number as priority, and are created in tree-
and list- order. CSS Animations are still prioritized absolutely above
script animations (there are two lists). Changing an animation-name
property triggers an update of all listed sequence numbers. So:

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

Script animations have preserved text order in terms of their *definition*
(which is important, see below).

Question: does getAnimations sort script animations separately from CSS
animations? I think it probably should so that the order reflects
application priority.

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

So this works nicely now too.

Taking your weirdness:

   var moveLeft = new Animation(...);
   var moveRight = new Animation(...);
   moveRight.play();
   ...
   moveLeft.play();
   // Wait, why doesn't moveLeft take effect?

Let's extend it another step, assuming that transitioning from idle does
update priority:

   var moveLeft = new Animation(...);
   var moveRight = new Animation(...);
   moveRight.play();
   ...
   moveLeft.play(); // moveLeft takes effect
   moveRight.play(); // wait, why doesn't moveRight take effect?

So you haven't solved anything, just pushed the weirdness down a level so
that it bites harder.

Cheers,
    -Shane

On Tue, Jun 23, 2015 at 6:23 AM Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Sun, Jun 21, 2015 at 10:24 PM, Brian Birtles <bbirtles@mozilla.com>
> wrote:
> > On 2015/06/22 14:14, Brian Birtles wrote:
> >> On 2015/06/22 13:10, Shane Stephens wrote:
> >>> 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 just realized we may be talking cross purposes here. CSS animations and
> > transitions never restart so long as they are bound to markup. As a
> result,
> > the difference here is just:
> >
> >   priority with old behavior: text order (or creation order)
> >   priority with new behavior: text order (or start order)
>
> I think I lean your way.  "Creation order" applying to CSS-created
> animations is actually pretty weird.  It's a corner-case, but still.
>
> Your moveLeft/moveRight example is also compelling.  But what about
> the opposite case?  I think it's reasonable to be able to set up some
> animations with a known priority, and turn them on/off based on user
> input.  For example,
> <https://rawgit.com/jennschiffer/who-visualized-the-bomp/master/index.html
> >
> has several animations that coordinate.  They don't quite overlap each
> other, but if they did, it would be better for them to override
> deterministically somehow, rather than depending on exactly what order
> people turned the animations on.  Is there any way to do this?  (It's
> possible this is answered by Shane already in his last email.)
>
> ~TJ
>