Re: [csswg-drafts] [web-animations-2] Custom effects (#6861)

Hey @graouts 

This came out of a discussion between @okikio and myself about the limitations custom effects leaves us with. I'm super excited about custom effects but I think there's a remaining black hole when talking about interpolating complex values like `KeyframeEffect` that would limit the ability for many JS libraries to leverage existing interpolators already present in the browser.

My first thought was having `CustomEffect` also optionally support keyframes but I think this limits what is clearly a low-level API. For example, it wouldn't allow for custom easing functions like `circIn` etc. Whereas a stand-alone interpolator API would:

```javascript
const mixColors = new Interpolation("#f00", "rgba(255,255,255,0.5)")

document.timeline.animate(p => {
  arbitraryElement.innerHTML = mixColors(circIn(p)) 
})
```

Ideally the interpolator would support unclamped progress values so we could support overshoot easing.

Supported interpolators that would be helpful:

- Number
- Unit numbers (`20px` ↔️ `5px`, `100%` ↔️ `0`) 
- Colors (`blue` ↔️ `rgba(0,0,0, .5)`)
- Transforms (`none`  ↔️ `scale(3) translateX(100px)`)
- Shadows (`5px 5px rgba(0,0,0,0.1)` ↔️ `10px 10px rgba(0,0,0,0.05), 2px 2px 2px rgba(0,0,0,0.2)` )
- Complex strings with matching number formatting, like complex path types

All of these (and more) are already leveraged within browsers, I think direct access would pair very well with `CustomEffect`.

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


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

Received on Tuesday, 1 February 2022 14:39:48 UTC