- From: BaliBalo via GitHub <sysbot+gh@w3.org>
- Date: Fri, 06 Dec 2024 04:42:28 +0000
- To: public-css-archive@w3.org
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