[css-easing-2] Bikeshed function name for custom easings

[jakearchibald]

What should we call the function that allows developers to define custom easings?

Feature description

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: 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: 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: 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:

Option 1: linear()

Why:

• linear is already an easing keyword. It would be redefined to be shorthand for linear(0, 1).
• The interpolation is 'linear' between points.
• The syntax is similar to linear-gradient(), which starts with linear (although there 'linear' mostly refers to direction than interpolation).

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, 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. Eg something like ease(0, ease-out to 0.5, ease-in to 1)

Why not:

• ease already exists as a shothand keyword for cubic-bezier(0.25, 0.1, 0.25, 1), so the keyword usage is pretty different to the function usage.
• Perhaps it won't make sense to add curves this way, and we'd need to find a new function name for that.

Option 3.5: easing()

As above, but avoids the naming clash with the keyword ease.

Option 4: piecewise()

Why:

• Closeish to the mathematical concept

Why not:

• It isn't that totally like the concept, as the function always interpolates between points.
• I wasn't aware of the term before someone suggested it. Maybe it's obscure?
• The name doesn't communicate that it produces an easing function.

Note: This is a discussion of the function name only, not the format of the function overall.

[jakearchibald]

👍 This comment to vote for linear()

[jakearchibald]

👍 This comment to vote for linear-spline()

[jakearchibald]

👍 This comment to vote for ease()

[jakearchibald]

👍 This comment to vote for piecewise()

[jakearchibald]

👍 This comment to vote for easing()

[MoritzKn]

I think lerpsequence suggested by Paul Lewis on Twitter accurately captures the concept: It's a linear interpolation between a sequence of points.

Also lerpsequence instead of lerp avoids using a general term for a very animation-specific function.

Even though lerp is commonly used in computer graphics I myself (no cg background) found the term quite to be unintuitive at times. So alternatively linearsequence could be used if the term lerp should be avoided. The term lerp is used nowhere on MDN nor whatwg.org and nor w3.org suggesting it's not part of "web vocabulary".

[jakearchibald]

I don't think lerpsequence/linearsequence make it clear enough that this defines an easing function.

[manuelmeister]

Why not linear-steps? The interpolation between steps is linear. With ease I associate a smooth transition of values/speed as for example in After Effects, which is not the case here.

[tabatkins]

Why not linear-steps()?

I don't think it's useful to draw an implicit connection to steps(), which does something relatively different. (And note that steps() cannot be reproduced with this function anyway - steps produces discontinuous easings while this is always C0-continuous, at least.)

---

Strongly opposed to ease(), as this isn't remotely related to the ease-* keywords, all of which are specifically about smoothly curving. Similarly opposed to easing(); it also doesn't match the conjugation of the other values. We already have a function + related keywords group (steps() and step-*) and this would completely break with the pattern they establish. I'd block this if it came to it.

Mildly opposed to linear-spline() - the "spline" doesn't add anything useful, and we've omitted that word from cubic-bezier(), which is technically a "cubic Bezier spline".

Would be okay with piecewise(), tho I prefer linear() over it. It's a little more complex in spelling (I'm always against words with the ie compound if they can be avoided, as whether English spells that sound "ie" or "ei" is pretty random.) I have used "piecewise linear" to refer to functions like this; the term doesn't necessarily imply the ability to have C0 discontinuities like steps() produces.

linear() is definitely the best option. We've done the "keyword and function with same name" variations before (notably in pseudo-classes, but I think elsewhere?), and it fits the "keyword is the obvious default arguments to the function" pattern we use there.

[jakearchibald]

(And note that steps() cannot be reproduced with this function anyway - steps produces discontinuous easings while this is always C0-continuous, at least.)

Huh, I thought you could? For example, steps(3, jump-end) would be function-name(0 0% 33.3%, .333 33.3% 66.6%, .666 66.6% 100%, 1 100% 100%)

Strongly opposed to ease(), as this isn't remotely related to the ease-* keywords

They're pretty related, in that they all return easing functions. I think the main problem with ease is that it's too different to the keyword.

Similarly opposed to easing(); it also doesn't match the conjugation of the other values.

I guess you're not convinced by future extensions that would make it non-linear, eg easing(0, ease-out to 0.5, ease-in to 1)?

linear() is definitely the best option

Fair enough. I guess we'd come up with a different method name if we want to allow non-linear parts.

[WebReflection]

Title: Bikeshed function name for custom easings

Question: What should we call the function that allows developers to define custom easings?

Solution: already in title and question 😜

I mean ... why do we need to find a different name for something that is already described? custom-ease() or easing() look like a no-brainer to me (former is not in the list though).

[jakearchibald]

cubic-bezier() also lets you create custom easings. In fact, all of CSS is customisation to some degree, so using the word 'custom' seems tautologous.

[WebReflection]

fair enough ... we have the second word left then 😊 ... the one I voted 👋

[jakearchibald]

Yeah, I think the choice is coming down to linear() vs easing()

[WebReflection]

imho ease should not be on the list for the mentioned reason ... I hope that will be ignored as result.

[dbaron]

I agree that ease() or easing() is not appropriate because this is just one particular way of defining a custom easing function (using linear segments). I think we'll likely want to add other ways of defining custom easing functions, and I suspect those other ways will likely be better. For example, we might want to support quadratic or cubic splines, or other things mentioned in wikipedia's article on Interpolation. But we may also want to allow multiple segments of such functions separated by points where the timing is less continuous, to allow features like bounces.

[WebReflection]

I think linear-easing() also works if in the future there will be similar function around easing but not linear anymore, although if it's easing() maybe the very last vary argument could be linear, quadratic, and so on? doesn't have to be all on the name, imho, if number of arguments is flexible (and reasonable) enough.

[tabatkins]

Huh, I thought you could? For example, steps(3, jump-end) would be function-name(0 0% 33.3%, .333 33.3% 66.6%, .666 66.6% 100%, 1 100% 100%)

Oh duh, indeed, that does the job. Not technically discontinuous but for all intents and purposes is.

(On that note, is it well-defined what the behavior is at such points? I forget whether steps takes the earlier or later value at its discontinuities, but we should match.)

[jakearchibald]

I asked the same question in internal chat and didn't get a certain answer. From my testing it seems like last-point-wins, so that's what I've written in the spec.

[ollicle]

How about facet()? To my mind at least, a faceted surface (think cut diamond) fits as a visual representation of how a curve is drawn with linear lines between multiple points.

[birtles]

I agree that ease() or easing() is not appropriate because this is just one particular way of defining a custom easing function (using linear segments).

Also, the property for using these functions in Web animations is called easing and there has been a proposal to introduce an animation-easing property to CSS animations that would allow setting the easing across all keyframes (as opposed to per-keyframe). In either case, a function with easing in the name would be a little redundant, as in { easing: 'easing(...)' } or animation-easing: easing(...).

[jakearchibald]

I don't think it's any more redundant than background-image: image(…)

[tabatkins]

Yeah, I don't think that redundancy is problematic, I'm just strongly against ease() as a name for this feature for other reasons.

[jakearchibald]

I'm going to go with linear(). I realise that isn't the one that got the highest vote, but I'm swayed by the points against ease() and easing().

[jakearchibald]

I've applied this change in https://github.com/jakearchibald/csswg-drafts/pull/1