Design Review #761

#761: Review request: linear() easing function

Opened Aug 1, 2022

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.

Explainer¹ (minimally containing user needs and example code): See discussion linked above. This is a relatively simple feature that allows you to provide the points of an easing function and interpolate linearly between them.
Specification URL: https://drafts.csswg.org/css-easing-2/#the-linear-easing-function
Tests: https://wpt.fyi/results/css/css-easing?label=master&label=experimental&aligned&q=linear-timing
User research: N/A
Security and Privacy self-review²: This doesn't expose any new information.
GitHub repo (if you prefer feedback filed there): https://github.com/w3c/csswg-drafts/
Primary contacts (and their relationship to the specification):
- Jake Archibald (@jakearchibald), Google
- David Shin (@dshin-moz), Mozilla
- Emilio Cobos Álvarez (@emilio), Mozilla
Organization(s)/project(s) driving the specification: N/A
Key pieces of existing multi-stakeholder review or discussion of this specification:
- https://github.com/w3c/csswg-drafts/issues/229
- https://github.com/w3c/csswg-drafts/issues/7508
External status/issue trackers for this specification (publicly visible, e.g. Chrome Status):
- https://bugzilla.mozilla.org/show_bug.cgi?id=1764126

Further details:

I have reviewed the TAG's Web Platform Design Principles
Relevant time constraints or deadlines: Not super urgent, but I think it should be a relatively straight-forward review, it is relatively simple and allows extension / further improvements.
The group where the work on this specification is currently being done: CSSWG
Major unresolved issues with or opposition to this specification: None, I think

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

Discussions

Comment by @jakearchibald Aug 1, 2022 (See Github)

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:

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

Discussed Oct 1, 2022 (See Github)

Peter: I asked if we even need to review this...

Lea: seems like a fairly small feature.

Peter: just another easing function - don't see any architectural concerns.

Peter: shall we close?

Lea: happy to close with res: satisfied.

consensus recorded

Peter: I will close this

Comment by @plinss Oct 10, 2022 (See Github)

We don't see any issues with this. Thanks for flying TAG.