[csswg-drafts] [CSS-View-Transitions-2] Relative Additive Animation (#9578)

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

== [CSS-View-Transitions-2] Relative Additive Animation ==
I’m not too familiar with what you’re doing, in particular MPA vs. SPA. I only know that I solved something very similar and it might fit into your API. I call it relative additive animation.

I propose you implement `CompositeOperation: blend` and `animation-composition: blend` from:
https://phabricator.services.mozilla.com/D156634#5139009

You might as well implement `transition-composition: blend` as it is better than CSS Transitions’ Faster Reversal but is not needed for View Transitions. The fourth from the above list is unnecessary. The fifth is unfinished and experimental, and could possibly provide a moderate performance increase for compositor animations but is also not needed for View Transitions.

I propose you implement a new animation primitive, a discrete form of relative additive animation for collections. If you want to expose it to javascript arrays or NodeList that would be great too but might not be necessary for View Transitions.

The `relative` in relative additive animation refers to conversion of values by subtracting the new value from the old, old minus new, and using that as the start value, and animating to zero. This was popularized on the web as FLIP, but the W3C has so far ignored its benefits when additive.

Old minus new of a discrete collection when animating from [ A, B, C, D ] to [ A, B, D ] is simply [ C ], the item being removed. The animations are additive which results in [ A, B, D, C ]. They are not in the correct order, which requires sorting to return to [ A, B, C, D ] for the duration of the exit animation.

I propose View Transitions accept an optional second parameter sort function for `startViewTransition`. This sort function must sort all possible combinations of elements, where returning 0 would not establish equality, but instead identity.

Considering how transitioning elements are moved to an overlay pseudo element, the above discrete animation would resemble something more like [ A, B, D ] + { C } where the curly braces are the pseudo element. If [ B ] were removed before the previous transition finished, that would result in something like [ A, D ] + { B, C }.

The CSS Values spec might also need to define subtraction but I’m not sure. This is more than just addition * -1.

Related:
https://github.com/w3c/csswg-drafts/issues/8678
https://github.com/w3c/csswg-drafts/issues/9512

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


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

Received on Wednesday, 8 November 2023 23:24:12 UTC