[css-animations] [css-transforms] Proposal: Special primitives for move animations

[dead-claudia]

Relevant spec parts:

• https://drafts.csswg.org/css-animations-2/#animation-play-state
• https://drafts.csswg.org/css-transforms-1/#typedef-transform-function

This would come in two parts:

1. A new animation play state running-when-moved
2. A new value offset-previous, usable as a transform function argument

This special animation play state would mean it runs once each time an element is moved relative to its parent as a result of child reordering and is paused in all other cases. animation-iteration-count would continue to limit the number of times it’s run (in general, most uses will want infinite), and of course all the other stuff would work the same way they do now.

The various functions would evaluate to offsets relative to the previous computed value as applicable.

The idea is that this would be implemented just with code like this. (Note that the second snippet is obviously not operational - it’s meant for show.)

Currently, I’d say 90% of uses of the FLIP pattern boil down to literally just this kind of thing, and it’s something that, while very boilerplatey to implement in JS, it’s fairly straightforward for browsers to implement as they don’t need to do a full FLIP with event handlers and everything. It also means stuff like this awkwardness wouldn’t need to exist in order to implement it smoothly, and the whole thing could be handled very efficiently and effortlessly, even on mobile.