[csswg-drafts] Pull Request: [css-easing-1] Some ideas for linear() easing

chrishtr has just labeled a pull request from jakearchibald for https://github.com/w3c/csswg-drafts as "Agenda+":

== [css-easing-1] Some ideas for linear() easing ==
This is an attempt to make some progress on custom easing functions, specifically https://github.com/w3c/csswg-drafts/issues/229#issuecomment-861247074

I've never edited a CSS spec before, so I don't really know what I'm doing. Sorry if this isn't helpful in any way. Here's what I'm trying to do:

**Edit**: I've updated this following discussion below.

There's already a `linear` keyword. I figured we could overload that, so `linear` is a shorthand for `linear()`.

The arguments are a comma-separated groups of:

- Output (number)
- Start input (optional, percentage)
- End input (optional, percentage)

The values work very similar to `linear-gradient`.

`linear(0, 0.7, 0.87, 0.98, 1)` - this creates 5 points:

<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">

Which is equivalent to `linear(0 0%, 0.7 25%, 0.87 50%, 0.98 75%, 1 100%)`, as points without a 'start input' are given one automatically (using the same process as linear gradients).

The third value, again similar to gradients, can be used to create an extra point using the same output value. So `linear(0, 0.5 25% 75%, 1)` creates 4 points:

<img width="432" alt="Screenshot 2021-08-23 at 08 52 21" src="https://user-images.githubusercontent.com/93594/130410833-eba70188-f844-47ce-ae5e-82dc078c910d.png">

Output values will typically be 0-1, but can be outside of that, as they can with `cubic-bezier`. A likely usage here will be elastic/spring easings.

Similarly, input values will typically be 0%-100%, but can extend beyond that to provide points for edge-cases where easings are chained.

The ends of the graph automatically extend beyond their specified point using their final angle, so the previous easing (`linear(0, 0.5 25% 75%, 1)`) would extend like this:

<img width="435" alt="Screenshot 2021-08-23 at 09 00 32" src="https://user-images.githubusercontent.com/93594/130411964-bbc668db-8331-41c8-b75f-42ce76306b89.png">

However, if the final two points are in the same position, the line extends horizontally, so `linear(0, 0.5 25% 75%, 1 100% 100%)` (the difference being the `100% 100%` at the end), would be:

<img width="433" alt="Screenshot 2021-08-23 at 09 02 27" src="https://user-images.githubusercontent.com/93594/130412244-10550d78-7dc6-4032-95f0-559ab4e7a859.png">

Some edge cases: `linear()` is equivalent to `linear` (as in, an identity function). If only one value is provided, then the output value is always that value, so `linear(0.5)` always outputs `0.5`.

The overall goal is to allow something like:

```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">

And here's a demo of how that would animate: https://static-misc-3.glitch.me/linear-easing/

See https://github.com/w3c/csswg-drafts/pull/6533


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

Received on Thursday, 27 January 2022 17:18:27 UTC