Closed emilio closed 1 year ago
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 something developers can use until a curve-based solution is designed.
The original issue 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:
We don't see any issues with this. Thanks for flying TAG.
Wotcher TAG!
I'm requesting a TAG review of the linear() CSS easing function.
This is a custom easing function that allows easings to be defined by a series of points that are linearly interpolated. The idea is that this allows to approximate a lot of custom easings in a simple way. There's a lot more of background in https://github.com/w3c/csswg-drafts/issues/229.
Further details:
We'd prefer the TAG provide feedback as (please delete all but the desired option):
🐛 open issues in our GitHub repo for each point of feedback