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

Re: [csswg-drafts] [css-easing-2] Complex easing/timing functions (#229)

From: VisibleCode via GitHub <sysbot+gh@w3.org>
Date: Mon, 29 Apr 2019 01:25:54 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-487432462-1556501152-sysbot+gh@w3.org>
Right there, that's enough to do most any kind of motion, including springy animations etc. The missing piece is animations where speed or position change abruptly.

![easing2](https://user-images.githubusercontent.com/17750010/56872897-ed85b900-69e2-11e9-8ac8-f450a0399cfe.png)

So, for the impact point in bounce animations you have to be able to give the incoming and outgoing speed separately.

Animations with jumps in position are similar-ish, except you also need to say which of the incoming or outgoing position gets used when the time is exactly x.

So, without getting too much into syntax, this means you might have a choice of four keyframe/control point "types" for easing splines:

* smooth - (x, y, y')
* sudden speed change - (x, y, y'<sub>in</sub>, y'<sub>out</sub>)
* sudden position change, use incoming position - (x, y<sub>in</sub>, y'<sub>in</sub>, y<sub>out</sub>, y'<sub>out</sub>)
* sudden position change, use outgoing position - (x, y<sub>in</sub>, y'<sub>in</sub>, y<sub>out</sub>, y'<sub>out</sub>)

Seems decent for hand-authoring, and it's also general enough to support export from most animation software, either exactly or as an extremely close approximation.

-- 
GitHub Notification of comment by visiblecode
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/229#issuecomment-487432462 using your GitHub account
Received on Monday, 29 April 2019 01:25:55 UTC

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