Re: [css-houdini-drafts] [css-animationworklet] Custom easing (#1012)

Updated example:

```js
CSS.animationWorklet.addModule('custom-easings.js');
```

And in `custom-easings.js`:

```js
registerEasing('bounce', class BounceEasing {
  static get inputArguments() { return ['<number>']; }

  constructor([numBounces = 3]) {
    this.numBounces = numBounces;
  }

  ease(position) {
    // position is 0-1. This function should return a number.
    // Returning < 0 or > 1 is allowed.
    // Returning position as-is would be a linear easing.
    return position …
  }
});
```

Then in CSS:

```css
@keyframes drop {
  from {
    transform: translateY(-400%);
    animation-timing-function: ease(bounce, 3);
  }
}

.el {
  animation: drop 1s;
}
```

Or the equivalent in the web animation API:

```js
el.animate({
  offset: 0,
  transform: 'translateY(-400%)',
  easing: 'ease(bounce, 3)',
}, 1000);
```

We may also need an API like `CSS.whenEasingDefined('bounce')`, which returns a promise which resolves when an easing with name 'bounce' is registered. This is based on [`customElements.whenDefined`](https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-whendefined), and it's something we may also want for other kinds of registrations like paint & animation.

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


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

Received on Friday, 4 December 2020 09:33:41 UTC