Proposal: Easing as a function

[notoriousb1t]

I propose that animations easings should be able to be specified as functions.

Reason
While cubic-bezier and step provide a good basis for most animations, there are easing functions that cannot be expressed through the existing CSS timing functions. For instance, creating a believable bounce in an animation requires setting easings on multiple keyframes. This is not a good scenario for reusability and doesn't empower developers to innovate in this area.

Also, this would be a good starting point for building more complex animation systems on top of WAAPI.

Here is an issue submitted for CSS that has a lot of ideas on the subject of advanced/complex timings: w3c/csswg-drafts#229

While I personally think JS functions don't belong there, I do think that in the Web Animation API, they would make a lot of sense.

Syntax
Using the keyframe syntax, it would look something like this for a linear function:

element.animate({
    /* ... */
    easing: function(offset) {
        // linear function
        return offset;
    }
})

Constraints
Since (I think) cubic bezier functions can overshoot 100% progression and undershoot 0% progression, I think it is reasonable that the returned offset should be able to be -Infinity to Infinity. If the function does not return a number, it should throw an error.

[birtles]

Yes, agreed, and this is definitely we've talked about a lot. Bear in mind that we need to be able to either (a) run the same timing function on a separate (e.g. compositor) process, or (b) define it such that it could be sampled once at high-resolution and then pass those sample points across (i.e. define it such that it is stateless).

At some point in the next few weeks I'll move the timing functions currently defined in CSS transitions to a separate "timing functions" spec and that might be the place to follow up on this.

[notoriousb1t]

I think that guaranteeing that the function is stateless seems reasonable for performance. My real concern with discussing it alongside CSS is the thought of having to register it globally under a CSS function name. I think that invites crossfire between animation libraries and developer code and makes it unnecessarily difficult to create adhoc timing functions.

That is... I think that from the perspective of JavaScript, doing something like this

element.animate({
    /* ... */
    easing: function(offset) {
        // linear function
        return offset;
    }
})

or this

var easing = new AnimationTiming({
    onsample: function(offset) {
         return offset;
    }
});
element.animate({
    /* ... */
    easing: easing 
})

seems more reasonable that doing this

registerTimingFunction('temp12AB', {
    onsample: function(offset) {
         return offset;
    }
});
element.animate({
    /* ... */
    easing: 'temp12AB'
})

[birtles]

Closing this as it is superseded by the issue on the CSS timing functions spec.