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:
let animationA = element.animate([
  {'transform': 'none'},
  {'transform': 'translateX(100px)'}],
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, 5 July 2022 06:41:46 UTC