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

I had a thought this week -- knots in a spline are a lot like stops in a gradient, just
with value+slope instead of colors.

...what if the syntax for splines worked like the syntax for gradients?

`animation-timing-function: cubic-spline(<value> <slope> <time%>, ...);`

So for example:

`animation-timing-function: cubic-spline(0 0 0%, 0.1 auto 25%, 0.9 auto 75%, 1 0 100%);`

![Screenshot_2019-05-11 cubic-spline()](https://user-images.githubusercontent.com/17750010/57568004-297f2d80-7396-11e9-8a3a-c7cf31cdd76d.png)

It probably makes sense to support some shorthands.

To start with, using the rules for gradient stops, if you just want equal spacing you can leave off the knot positions:

`animation-timing-function: cubic-spline(0 0, 0.1 auto, 0.9 auto, 1 0);`

It'd probably also make sense to make slopes optional (defaulting to `auto`):

`animation-timing-function: cubic-spline(0 0, 0.1, 0.9, 1 0);`

(Both of these give the same result as the original above.)

That feels pretty nice.

If we go with the same rules as for gradients, you can create abrupt changes by doubling up knots:

`animation-timing-function: cubic-spline(0, 1 50%, 1 50%, 0);`

![Screenshot_2019-05-11 cubic-spline()(1)](https://user-images.githubusercontent.com/17750010/57568048-c2ae4400-7396-11e9-9df4-49542eb10f72.png)

`animation-timing-function: cubic-spline(0.5, 1 50%, 0 50%, 0.5);`

![Screenshot_2019-05-11 cubic-spline()(2)](https://user-images.githubusercontent.com/17750010/57568057-e07ba900-7396-11e9-8b18-6341a51647f2.png)

`animation-timing-function: cubic-spline(1 0, 0 -3 50%, 0 3 50%, 1 0);`

![Screenshot_2019-05-11 cubic-spline()(3)](https://user-images.githubusercontent.com/17750010/57568083-55e77980-7397-11e9-9d61-86ee6d3934ca.png)

EBNF syntax for this idea might look something like:

```
<cubic-spline-easing-function> = cubic-spline( <cubic-spline-knot-list> )

<cubic-spline-knot-list> = <cubic-spline-knot> [, <cubic-spline-knot># ]?
<cubic-spline-knot> = <cubic-spline-knot-value> <cubic-spline-knot-slope>? <cubic-spline-knot-position>?

<cubic-spline-knot-value> = <number>
<cubic-spline-knot-slope> = auto | <number>
<cubic-spline-knot-position> = <percentage>
```

-- 
GitHub Notification of comment by visiblecode
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/229#issuecomment-491497200 using your GitHub account

Received on Saturday, 11 May 2019 09:56:10 UTC