[css-timing] Rename spec and wording to be more generic

[LeaVerou]

Spec URL: https://drafts.csswg.org/css-timing/

Timing functions can —and most likely will— be used for a variety of things in CSS besides timing. For one, they are candidates for anything that involves customizing a progression from A to B, such as non-linear gradient color stops. I think the language and spec name should be more general. Perhaps css-progression and "CSS Progression Functions"?

[LeaVerou]

Related: #1332

[nearestnabors]

I love that we're trying to be flexible with formats! One concern: I worry that we might be abstracting too much. Yes, in the future people might want to use these terminologies for gradients or heck even font interpolation! But... we run the risk of making these terminologies so obscure and awkward as to be unintelligible to the folks using them for those purposes.

[SebastianZ]

How about merging them into CSS Transitions instead of renaming it? After all, those functions describe a transition from one value to another.

Sebastian

[birtles]

This was split out of CSS transitions because it it used by CSS animations, CSS transitions, and Web Animations. CSS transitions should depend on Web Animations, not the other way around, and we might want to use this from non-animation related specs so I don't think CSS transitions is a good home for this.

In terms of naming, I like "CSS Easing". It's short and memorable. It might not be completely accurate as some might argue that a step timing function is not really "easing" in the narrow sense of the word but my experience is that a simple and memorable name is preferable to a longer or less memorable but academically accurate one (hence why we named the corresponding property in the Web Animations API easing instead of timingFunction—and why we never should have renamed the CSS Motion Path module 😉).

[nearestnabors]

I concur. Easing would make so much sense here.

[LeaVerou]

I’m ok with easing, but why not progression? If anything, progression is an everyday word, whereas easing is unknown outside animation circles.

[birtles]

I'm ok with progression too, although, like offset, it does feel a little abstract to me. To me easing gives more of a sense of rate of change over time/distance. That is, gradient-easing makes more sense to me than gradient-progression since I'd expect the latter to take keywords like reverse and alternate, i.e. what direction does it progress in, as opposed to the rate at which it progresses.

Then again provided it never shows up in any property or attribute name, maybe it doesn't really matter what we name this module.

[nearestnabors]

Easing, though, and is a cross-industry standard term from motion design to studio animation, used wherever rates of visual change over time need describing. People using JS animation libraries use this term. I don't see why we should confuse them with yet another word for something they grok already. I'd keep "timing functions" over adopting "progression" or such.

[AmeliaBR]

I prefer "easing function", too. It is a widely used term in animation, but is not explicitly limited to animation.

"Interpolation function" is more generic, and also widely used, but "easing" has the benefit of being shorter.

I'd recommend against inventing new names (like "progression function") for existing concepts. "Transition function" would be nice if we didn't already have a specific concept of CSS Transitions; but as is, I agree that it is useful to keep the concepts distinct.

For the spec name, I'd prefer CSS Easing Functions compared to CSS Easings Module (but css-easing for short).

[SebastianZ]

Easing, though, and is a cross-industry standard term from motion design to studio animation, used wherever rates of visual change over time need describing. People using JS animation libraries use this term. I don't see why we should confuse them with yet another word for something they grok already. I'd keep "timing functions" over adopting "progression" or such.

The point of generalizing the name is that the functions are expected to be available outside of animation contexts in the future. Keeping the name for those contexts is confusing.

"Interpolation function" is more generic, and also widely used, but "easing" has the benefit of being shorter.

"Interpolation" sounds really good to me, but I could live with "easing" as well.

Sebastian

[birtles]

Interpolation is generally what we use to describe how to calculate an intermediate style value (e.g. the value 50% of the way between translate(100px) and rotate(90deg)). The output of the easing calculation becomes one of the inputs to the interpolation procedure (the 50% in the previous example). I think it would be most confusing to also refer to that as interpolation.

[css-meeting-bot]

The CSS Working Group just discussed CSS Timing, and agreed to the following resolutions:

• RESOLVED: Rename css-timing-functions to css-easing-functions, shortname: css-easing

The full IRC log of that discussion

<iank_> Topic: CSS Timing
<iank_> astearns: Lea may call in later.
<iank_> Rossen: brian can you cover those.
<iank_> birtles: The first issue should be easy, spec - css timing functions, there is interest in using those functions in other specs, e.g. gradient stops
<iank_> birtles: css-easing-functions, shortname: css-easy
<dbaron> Zakim, remind us in 9 hours to go home
<Zakim> ok, dbaron
<iank_> birtles: Does anyone have any other suggestions for the name for renaming the spec?
<fantasai> s/css-easy/css-easing/
<iank_> Rossen: Everyone one happy with those names?
<dino> Dean Jackson, Apple
<iank_> birtles: shortname should be css-easing
<iank_> dauwhe: easing doesn't seem obvious to see, an animation term?
<iank_> birtles: I think it still makes sense in gradient stops.
<iank_> glazou: I think that only english speakers would get it.
<tantek> I don't think even native english speakers will get it either
<tantek> feels like a very "insidery" term
<iank_> Florian: If you use powerpoint, etc, you've probvably used ease-in/out and from there you can work it out?
<tantek> but I have no alternatives to suggest :(
<Myles_> css-curves?
<tantek> is there a github issue for this?
<iank_> birtles: In web animations the property that uses that function is called easing.
<iank_> Rossen: Parametric functions.
<iank_> birtles: just the short name is css-easing
<iank_> fantasai: css-interpolates?
<tantek> what is the github issue?
<iank_> birtles: interpolates has a very different meaning in animations.
<astearns> https://github.com//issues/1577
<iank_> Github: https://github.com//issues/1577
<iank_> Myles_: What these functions are used for today
<fantasai> fantasai^: "CSS Transition Functions" seems the most easy to understand
<iank_> fantasai: Animations.
<iank_> Rossen: Transition functions sounds pretty easy
<Florian> css-curves
<tantek> I agree with https://github.com//issues/1577#issuecomment-314214840
<iank_> tantek: quoting lea - Progression is an everyday word, but easing is specific to animation
<glazou> +1 to what Florian said
<iank_> birtles: progression doesn't suggest an easing function, fwds vs. bwds.
<Rossen> css-curves with short name of css-curvy?
<iank_> dino: Easing is the industry term...
<fantasai> fantasai: I think css-progress is reasonably straightforward
<fantasai> dino: That seems too generic
<iank_> dino: I think understanding terms, is least of worry
<iank_> Florian: if this is a confusing term, which would make you believe something else...
<iank_> Rossen: Can everyone live with easing functions?
<iank_> <silence>
<tantek> -o
<tantek> -0
<Florian> s/something else.../something else, it would be a problem, but merely unfamiliar is OK/
<iank_> RESOLVED: Rename css-timing-functions to css-easing-functions, shortname: css-easing