search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 660 forks source link

[web-animations-2] Subtract operation for Relative Animation #10646

Open KevinDoughty opened 3 months ago

KevinDoughty commented 3 months ago

A subtract operation was rejected in public-fx more than a decade ago. The explanation was it can be achieved by addition times a negative scale, and that developers should use the Typed OM. This precludes many benefits I won’t enumerate, other than how Apple natively handles retargeting.

Something like this, except using property transition-composition instead of transition-interrupt and keyword blend instead of relative or special: https://github.com/w3c/csswg-drafts/compare/main...KevinDoughty:csswg-drafts:master#diff-fc1c32de78d227c8f0c8008469824444d1ba7f027e48a336125017d40b8f6f6f

Looks like this: 28

Reference implementation in Firefox, partially in Chromium: https://phabricator.services.mozilla.com/D156634#5139009 https://gitlab.com/kevindoughty/chromium-diff/-/commit/9238b5ae324d535390bbba35d165f45b101a5940

Lists are handled like accumulate. Keyframes [A,B,C,D] become [A-D, B-D, C-D, D-D].

Firefox has an implementation detail called “Interruptible Layout” which causes flickering if animations are not added synchronously. I believe it would be fixed by an animation transaction like Apple’s CATransaction. From the Mozilla link, discrete-state (an attempt to remove style recalculations) is probably too difficult, but a transaction plus getDiscreteStyle and getDiscreteRect would be easy.

KevinDoughty commented 1 month ago

I’ve changed my mind on the idea of transactions. If there were actually reason to do so I would spend time investigating Firefox’s interruptible layout implementation for a workaround or bugfix first.