Re: [csswg-drafts] [css-easing-1] Some ideas for linear() easing (#6533)

Context for an upcoming working group meeting:

This is a proposal for a way to create custom easings, such as bounce, and elastic.

Easings are created using a syntax very similar to `linear-gradient()`:

```css
.whatever {
  animation-timing-function: linear(0, 0.7, 0.87, 0.98, 1);
}
```

This would create the following easing:

<img width="432" alt="Screenshot 2021-08-23 at 13 11 21" src="https://user-images.githubusercontent.com/93594/130444902-68fde7bc-c8d9-4b10-837f-3e2bd79b931f.png">

The input values are distributed automatically, but can also be manually specified, as with `linear-gradient`. For example, the above is equivalent to `linear(0 0%, 0.7 25%, 0.87 50%, 0.98 75%, 1 100%)`.

Like `linear-gradient`, output values are linearly interpolated from one value to the next.

By providing enough points, developers can specify easings that are currently impossible, such as bounce.

```css
.whatever {
  animation-timing-function: linear(0, 0.003, 0.013, 0.03, 0.05, 0.08, 0.11, 0.15, 0.2, 0.26, 0.31, 0.38, 0.45, 0.53, 0.62, 0.71, 0.81, 0.9, 0.99, 0.94, 0.89, 0.85, 0.82, 0.79, 0.77, 0.76, 0.752, 0.75, 0.755, 0.77, 0.78, 0.81, 0.84, 0.87, 0.92, 0.97, 0.99, 0.97, 0.95, 0.94, 0.938, 0.94, 0.949, 0.96, 0.99, 0.994, 0.986, 0.985, 0.989, 1 100% 100%);
}
```

…which would graph like this:

<img width="433" alt="Screenshot 2021-08-23 at 11 45 53" src="https://user-images.githubusercontent.com/93594/130435372-05471f97-7e33-4876-ac45-cc7073eb1f5c.png">

The door would remain open for a more advanced syntax that allowed for curves to be specified, hopefully in a way that also works for `linear-gradient`. However, attempts to introduce that kind of complexity initially have stalled previous efforts, eg https://github.com/w3c/csswg-drafts/issues/229#issuecomment-861247074, so this proposal limits itself to linear interpolation between points.

-- 
GitHub Notification of comment by jakearchibald
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/pull/6533#issuecomment-1023455165 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 27 January 2022 17:13:25 UTC