[csswg-drafts] [css-easing-2] Bikeshed function name for custom easings (#7419)

jakearchibald has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-easing-2] Bikeshed function name for custom easings ==
What should we call the function that allows developers to define custom easings?

<details>
<summary>Feature description</summary>

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

`function-name(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 `function-name(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 `function-name(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 (`function-name(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 `function-name(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">
</details>

## Option 1: `linear()`

Why:

- `linear` is already an easing keyword, so this would allow it to also be used as a function.
- The interpolation is linear between points.
- Similar syntax to `linear-gradient()`.

Why not:

People seem initially confused by this, as they expect linear to be a single line. When I explain "but it's still linear, but between points", they roll their eyes as if I've found a loophole 😄 

## Option 2: `linear-spline()`

Why:

- 'spline' is often used when interpolating between points.

Why not:

- It often evokes curves, which this isn't really.

## Option 3: `ease()`

Why:

- It's the definition of an easing. Naming similar to keywords `ease-in`, `ease-out` etc.
- Leaves the door open for defining a non-linear interpolation between two points, without having to use a new function name.

Why not:

- Perhaps it won't make sense to add curves this way, and we'd need to find a new function name for that.

I'm leaning towards option 3.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7419 using your GitHub account


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

Received on Monday, 27 June 2022 08:40:55 UTC