[csswg-drafts] [css-easing-2] Permit direct JS access to easing functions (#6261)

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

== [css-easing-2] Permit direct JS access to easing functions ==
With [new proposals](https://github.com/w3c/csswg-drafts/issues/229) for complex easing functions, the amount of API surface JavaScript animation libraries are duplicating is to increase.

This is a waste of bundle size when these functions are already present in the browser. This [`cubic-bezier` implementation](https://github.com/gre/bezier-easing/blob/master/src/index.js) alone can cost 1kb minified, so I'm eager that when new easing curves appear there's already requirement for them to be available to JS authors.

It would also ensure browser-based animation authoring tools like [Framer](https://framer.com/) could use the current browser's exact implementation when displaying and editing easing curves.

## Proposal

A new `Easing` namespace, which contains access to the [specced easing curves](https://www.w3.org/TR/css-easing-1/#step-easing-functions):

```javascript
// cubic-bezier
const curve = Easing.cubicBezier(.17,.67,.83,.67)
const easedProgress = curve(0.5)

// steps
const stepped = Easing.steps(4, "end")
const easedProgress = stepped(0.5)
```

This would also allow the composition of easing functions:

```javascript
stepped(curve(0.5))
```

And their usage outside of the Web Animations API, for instance drawing visualisations:

![Screenshot of Framer's bezier editing tool](https://user-images.githubusercontent.com/7850794/116805890-61eb1980-ab21-11eb-8e96-4ab6dae8a589.png)


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


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

Received on Sunday, 2 May 2021 07:36:35 UTC