W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2019

Re: [csswg-drafts] [web-animations-1] Additive transform animations easily invoke undesirable matrix interpolation (#2204)

From: Robert Flack via GitHub <sysbot+gh@w3.org>
Date: Mon, 01 Apr 2019 14:32:22 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-478604035-1554129141-sysbot+gh@w3.org>
I'd like to revisit this as switching the order of interpolation and composition also greatly simplifies issue #3689 and #3210, by interpolating first we can always collapse any number of additive transforms into a single matrix and have the equivalent effective transform.

One of the concerns we had above was mixing composite modes but I think we can resolve this as well with the neutral value by having a partial replace be the equivalent of interpolating with neutral.

I.e. suppose you have:
```js
let animationA = element.animate([
  {'transform': 'none'},
  {'transform': 'translateX(100px)'}],
  1000);
let animationB = element.animate({'transform': 'translateY(200px)'}, 1000);
```

At time t = 0.5, you would produce a value by
* Animation A interpolates to transform: `translateX(50px)`
* Animation B interpolates to transform: `translateY(100px)`
* Composite B on top of A, replacing at 50% by interpolating A towards neutral at 50%, i.e. `translateX(25px)`, and add B's transform giving
`transform: translateX(25px) translateY(100px)`

Once an animation has finished we could then replace it with the computed transform matrix and since that doesn't affect the interpolation of additional animations it will be visually identical.

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2204#issuecomment-478604035 using your GitHub account
Received on Monday, 1 April 2019 14:32:28 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:06 UTC