Re: [w3ctag/design-reviews] Review request: linear() easing function (Issue #761)

I think the examples are a good starting point to learn about the feature https://drafts.csswg.org/css-easing-2/#linear-easing-function-examples.

Some bikeshedding on the naming, which may be of interest https://github.com/w3c/csswg-drafts/issues/7419.

A common question that comes up is "why doesn't this support curves", so I'll preemptively address that:

Firstly, not all easings use curves. We already have `step()`, for instance. Right now, if you use `step()`, it interpolates linearly over a given number of steps, whereas with `linear()`, you can create a stepped-easing that's non-linear.

But mostly, this feature isn't supposed to be instead of a curve-based solution, but it's definitely something developers can use until a curve-based solution is designed.

The [original issue](https://github.com/w3c/csswg-drafts/issues/229) is from 2016, and progress seemed to stall whenever folks tried to figure out how to incorporate curves.

I deliberately chose `linear-gradient`-like syntax because it's also a one-dimensional series of points, but it's also another feature that could benefit from non-linear interpolation. I'm hoping the solution for one will work for the other.

I plan to create a developer tool to convert JavaScript and SVG-based easings into `linear()` format. Here are some super-rough prototypes of that, for a few of predefined easings:

- Bounce https://static-misc-3.glitch.me/linear-easing/5.html
- Material design 'emphasised easing' https://static-misc-3.glitch.me/linear-easing/6.html
- Elastic https://static-misc-3.glitch.me/linear-easing/7.html

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/761#issuecomment-1201295076
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/761/1201295076@github.com>