[csswg-drafts] [css-animations] [css-transforms] Proposal: Special primitives for move animations (#5524)

isiahmeadows has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations] [css-transforms] Proposal: Special primitives for move animations ==
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`
1. 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](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaETAVwBcIAlReCTQlAM03jxOYEskZUBtUFEwBbZGgB0ACwoj4xdFAqIlqEAB4y8AARd8AXgA6pKFxGZlxgHzr4XKwAZ1Aejs23ARhdvb9gEze9r5WAMyBNs5aVgp4SGAUXNB8aA4oAGx+IAC+REKi4iASAFZ8JJBKKhRqzs7aAGKY8RAATgTaEJTacLoUAOQw2mBImK3N2gDuUhbadIhiSgMjiNqM+G2YUPjarSIQAG4EhlBH5TAUK6bmytQQEOf62vgQYGTzFBIA5ogUAKJIbwAhACeAEl8AAKYwbMwWRDGACUJyS51mIgc2ge0KuiBudwkYCkPHwADkIGsYPwHABdJGwFH-DwYi4w663d4Eomk8n8Dw0qCnelzPxMrGw3HswnwElkxAUvx8gUzf4hEWXMVs-GS6XckJ8o41drNNatfAobSUojaDyWvyW3X62oiLgADwIZu05tt2gcdstvKOR2YZH5CWg2idzvB8O0wG0BpaxraAForOGXYcoB68BQACpmRAdCjghOIZqWgCsDgciMz2iOHoNdS4zTO9cGyO03BbFHRD1RDk+3wBHU2XCgHwAwnZKrR4lGJFRsG3FV2zoy+wzBxRh8H8GPJ9OlLOi-CFxAl7WV82zsKN0KtzvR+Op1wZ4g56fF8uO6uKCq7yIIQPiOe7PoeFDHvOX7HLWBoAKrYPgsLmj6Vo2naVLaCmnqWqhIR+nyHqiqyeI4NgKj4BOWrgqifg1kRaoke8ZEUVRRI0f81ZtsROIaixmxsVKHFzCE9HMti4oSPxlHUaiHg1m2BoADKYGc2gANTaCCUAHM0FCKbUpLKGaiAjNOYwAAYUM0GwwFwoZQAAImQNkORZ4ZkGpABGyzZtoPnMC0yxYMozQGdoVk2bAgXNCIFmWi0MwHJmuytBMiDNvgUCygMzwvC22jgkUnnnNZQI9BcWx4HCsG1JM0xTNg5GwKebb9hIZxAkgC5RXZDnOa5iSZkYtZyR1FBdYgPW2fZQ0DRYQ0Ym1-x+ONk3TbAs3QPNDlLaNyprd11kzf1LkLWGDzGA4MDGMtcwDp1R29TFIhMpFtkhYgACa4IACTAL+6JJkq93Abu+4vm+H5ntgWTYM68IWXdIgeIdU3HdFLSvQ872wJ9P3-b+jLA2NXzbiBEPgZBn7nnDCNI-t96Pejz1Y29GMwPjf0A9eFDCiTK1g0+B6vke74njDdOI8jQHMxtMAvezvVc4TvMqgLIlC6BItQxLi5Swz4V1C0YDLK0SZYEChZtk8LxvBIXlkkCEgQMwzDZgAEhlHwyAGtXaAACpbyMDkMqkwEpXBnFJ+AQsYHNbccIBiWNYcwBHUfMbHkIgAnDkIsjq1pxn0erDnedDQXjOAfiWDp5HpfZ-HvWJ1XHrtXLHOKwBD0TU9J1zWdu0je3m6d6zsVMmN48D9tQ+LSPIMiKtM+Y5PAEr33LOz0588XTLaPy93S+y1v8uJztC91iAt1QFkftBiGi0ls0UYxnGjrpls2EvxmWbfHmMQhZwQRgrFWMSRtebfjpJ2XmvYl4DjJo+bWkMxbQ2gh6K83Z1xL1RkgimYFRYQXFlBc80C1K-lvEvVa+DwaEN1qQi8mCfxqyngdWhwtUHEPQWQmCDZagISQsoHC3pfRWkwthC0aFtBentLWHiklpKCQhP2MSCi+JNVYrJBkajGK8V) would be implemented just with code like [this](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhFgHsA7MImNQiqAQwAdIUDaBXeIgJWiNpVQBmtKJAICAljFyoA2qBK0AthCoYAFvEVR81Eoj1UAPKygACcUgC8AHRC0S4xbUS2AfIajjXABkMB6T3dAgEZ-QI8vACYwrwjXAGYY9z8TVx1IGARxUmkQb1QANkiQAF88eSUVdAwAK1wCYj0IA3Q-P1MAMVoEIgAnZFMidlNyc3gAcjBTWBhaft7TAHc1Z1NoCGU9KbmIUz4kAfskU37FIgA3ZGsSa8aweD2HJ0ROIiIHy1MkIlhWTfgMABzCDwACiMH+ACEAJ4ASSQAApbPZHM4ILYAJS3HIPdaKbymT4o54QV7vLBqSRIAByRAOYBk3gAutiyLiIcFCY9US83gDYJSoDS6RAGcEWSQ7uyNpEucS0WT+YLhfSZJEJVK1hD4nKngq+RSqbTVfEJdc2oNegd+khUKZGXhTMFHZFHabze1FOIAB7IO2me2u0zeN2O8XXa4CViS+DZEimL3ehEY0zAUwWvrWgYAWlcCZ9V3jIxBABVHBAhvAEZmIL1HQBWbzeLE3IsWgCq9CQaPtIadLrdTNMucDjr78TDEoD8t55PEZFr8EhEAEfQgCLxQbxzeu071s4B88gvSXK7XG+1jrxwRbJQjJCjMbjlutydT6c9BeOI5rNt3xfgMtlErBFEwbJsW3-Dsux7NUx1DJ0hxHB1+1MIN3SLGdSQNI9F2XVd+gvDY+03Fs9x5bC5wXE98PPa8rwhSJb3vSBAPLECwNMRtmx0YhFHoSRazQEgTCgAgMjgWMcioYIClQSIClKcoQAUZRVGwepdH0eAqAAYiw0xPFTf8ZzjO1IimTwSAgOZzAfedxEQE5owcEhAWzZZmmzM5LmOHyIAAbmuO9WwAAQAawgaEBF6Sopn84yixiohFHfeBYrIAjFDtdL7DAOhEAADWrAQBFY7N6H6c5slYMAMQC0wQoDDg0oysAspytqCogYrmwakKSnSdYsmk9B8m8bMAHZUGCUomRKIA). (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](https://css-tricks.com/animating-layouts-with-the-flip-technique/) 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](https://github.com/w3c/csswg-drafts/issues/5334) 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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5524 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 17 September 2020 18:53:12 UTC