Review request: linear() easing function

[emilio]

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 w3c/csswg-drafts#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:
  • [css-easing-2] Complex easing/timing functions w3c/csswg-drafts#229
  • [css-easing-2] Custom curve-based easing functions w3c/csswg-drafts#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

[jakearchibald]

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: w3c/csswg-drafts#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

[plinss]

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