[csswg-drafts] [css-easing-2] Applying easing functions to custom values (#11329)

BaliBalo has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-easing-2] Applying easing functions to custom values ==
### 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:

```css
.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))`

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11329 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 6 December 2024 04:42:29 UTC