[csswg-drafts] [css-timing-1] - Custom Timing Functions in JavaScript

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

== [css-timing-1] - Custom Timing Functions in JavaScript ==
This is in reference to this issue on the webanimations spec: 
https://github.com/w3c/web-animations/issues/169

I think that it would be very useful to be able to define timing 
functions in JavaScript.  Although, I propose this mainly for the sake
 of WAAPI, I think that it should be possible to define a way to 
register custom timing functions for CSS as well

**Custom Timing Function in WAAPI**
``` javascript
element.animate({
  /* ... */
  easing: function(x) {
    if (x < 0.3) {
      return x * x;
    }
    if (x < 0.6) {
      return x * x * x;
    }
    if (x < 0.8) {
      return x * x + 0.1;
    }
    return x * x * x - 0.01;
  }
})
```
In the above example, x is a number normally between 0 and 1 that 
describes the time of the animation 0% to 100%.  The return should be 
an integer between 0 and 1 that describes the progression of the 
animation.  (for the sake of supporting elastic functions and certain 
cubic bezier functions, it should support overshooting on either side)

**Proposed timing function registration**

```js
document.registerTimingFunction('rough', function(x) {
    if (x < 0.3) {
      return x * x;
    }
    if (x < 0.6) {
      return x * x * x;
    }
    if (x < 0.8) {
      return x * x + 0.1;
    }
    return x * x * x - 0.01;
  });
```

**Usage in CSS**
```cs
.rough.animated {
  animation-timing-function: rough;
}
```

In the example, I have registered a custom timing function somewhere 
in JavaScript named 'rough'.  I think that if the browser has not had 
a function registered by the time it renders, it should ignore the 
value until it does and fallback to its inherited timing function.

Since this may need to be sampled at any time by the browser for 
performance reasons, I think it makes sense that best practice dictate
 that this function should be stateless.

Adding this functionality would allow animation libraries a path 
forward for timing functions that are hard to describe otherwise, and 
provide an opportunity for new timing functions to be invented and to 
be polyfilled.  

Here are some examples of how this signature could be used for 
future-proofing/feature-gap filling:

https://github.com/just-animate/just-curves




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

Received on Wednesday, 8 February 2017 01:44:30 UTC