Re: [csswg-drafts] [css-easing-2] - Custom Timing Functions in JavaScript (#1012)

An issue with JS-driven easing functions is that animations are often done on the compositing thread, which doesn't have access to the JS engine and has stricter timing guarantees. Precompiling to linear(), while inconvenient, definitely fixes that issue. 

An alternative might be that custom JS timing functions get compiled *by* the browser, called repeatedly at a browser-chosen resolution and essentially translated into a linear function automatically.

Another alternative is we just provide the compilation function as a browser API - given a function and a desired resolution, it'll auto-generate a `linear()` string for you. Of course, this is also a pretty trivial function to do yourself:

```js
function compileTimingFunction(fn, resolution=.01) {
  let args = [];
  for(var i = 0; i*resolution <= 1; i++) {
    let input = i*resolution;
    let output = fn(input);
    args.push(`${output} ${input*100}%`);
  }
  return `linear(${args.join(", ")})`;
}

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1012#issuecomment-2347202836 using your GitHub account


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

Received on Thursday, 12 September 2024 20:41:53 UTC