Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KevinDoughty opened this issue Jul 31, 2024 · 2 comments
Open

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

KevinDoughty opened this issue Jul 31, 2024 · 2 comments
Labels
web-animations-2 Current Work

Comments

@KevinDoughty
Copy link

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:
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
Copy link
Author

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.

@fantasai fantasai added the web-animations-2 Current Work label Oct 15, 2024
@fantasai fantasai changed the title [css-values-4] Subtract operation for Relative Animation [web-animations-2] Subtract operation for Relative Animation Oct 15, 2024
@KevinDoughty
Copy link
Author

Updated implementations in Firefox and Chromium, changes are marked with comments // kvndy

Firefox (CompositeOperation blend, transition-composition blend, animation-composition blend, and more)
https://gitlab.com/kevindoughty/mozilla-unified

Chromium (CompositeOperation blend)
https://gitlab.com/kevindoughty/chromium

WPT (lots of failing tests, in the "Relative Animation" folder)
https://gitlab.com/kevindoughty/wpt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
web-animations-2 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants