[css-easing-2] Applying easing functions to custom values

[BaliBalo]

Goal

Being able to apply an easing function to a given value.

Motivation

With all the recent additions to CSS (maths functions, @property, ...), a pattern that can sometimes be used is to control many properties from a single custom property (while this one is simply controlled by something else, to name a few examples: time-based keyframes, scroll-linked keyframes, linked to some media progress via JavaScript, ...). For example:

.element {
	opacity: var(--t);
	translate: 0 calc(16px * (var(--t) - 1));
}

It would be nice to be able to easily apply different easings to these properties.

I believe it would be very hard to reproduce the default ease-* functions in CSS. Even when using JavaScript, the cubic-bezier function (and consequently all the ease functions based on it) is not trivial to implement as far as I am aware.

Suggested definition

I don't have a strong opinion about the syntax but a possible definition could be

apply-easing(<easing-function> at <number>)

With the <number> value being in [0,1] (could be clamped) and the return value being a number (not necessarily in [0,1] in case of elastic easing etc.)

Example: apply-easing(ease-out at var(--progress))

[cdoublev]

Like mix(var(--t) by ease-out, 1px, 16px)?

[BaliBalo]

@cdoublev Yes !
Is this a thing already ? I can't see by <easing-function> mentioned in the documentation you linked (nor in the issues of this repository but it is hard to search).
Or are you just suggesting this should be the syntax for it ? If so I would be happy with your version for sure.

[BaliBalo]

Oh yes, just read the definition of <progress> which is what I missed. Thanks !

[cdoublev]

You are welcome. This is not "my version" at all and you can see all similar feature explorations and suggest your interface/syntax improvements here (edit: oups, no, this issue is unrelated).