Skip to content

[web-animations] CompositeOperation blend #10927

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 Sep 20, 2024 · 1 comment
Open

[web-animations] CompositeOperation blend #10927

KevinDoughty opened this issue Sep 20, 2024 · 1 comment
Labels
web-animations-2 Current Work

Comments

@KevinDoughty
Copy link

I asked for a similar feature a dozen years ago in public-fx. There is obviously no interest but I’d like an issue to point to. Previously I used the keyword relative but blend is probably a better choice.

A subtract operation for CSS Values 5 (#10646) would be first, then CompositeOperation: blend for Web Animations. CSS Transition and CSS Animation additions could follow, as seen in the Firefox implementation shown here, along with blend:
https://phabricator.services.mozilla.com/D156634#5139009

blend in Chromium:
https://gitlab.com/kevindoughty/chromium-diff/-/commit/9238b5ae324d535390bbba35d165f45b101a5940

I actually got proof-of-concept working in WebKit more than a decade ago (barely, and pre Web Animations) but the code is not usable. CSS Transitions would look like this:
https://www.youtube.com/watch?v=lFgvb7p9dDs

@KevinDoughty
Copy link
Author

Matrix accumulation for scaling should probably use multiplication and division instead of the formula shown in https://www.w3.org/TR/css-transforms-2/#accumulation-for-one-based-values.

Unlike the scaling transform functions, equal and opposite animations don't quite cancel out

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