Re: [web-animations] Is compounding easing functions really useful?

Hi Glen,

The current two-tier approach to easings exists because:
(1) CSS behaves as you've proposed, but with disjoint: true *always* set
(2) This behavior is generally less useful than easings that operate over
the whole animation.

We'd generally recommend not specifying per-keyframe easings, which solves
the problem of compounding being difficult to reason about.

Your proposal has the advantage of allowing easings that apply over part of
the animation, but those easings would need to be tied to discrete keyframe
boundaries. A better approach would be to allow serialization of multiple
easings across the animation - something that we've decided to defer until
level 2.

Cheers,
    -Shane

On Thu, Apr 23, 2015 at 2:41 PM Glen Huang <curvedmark@gmail.com> wrote:

> I find it to be pretty hard to predict the result of compounding two
> non-linear easing functions:
>
> ```
> new KeyframeEffect(target, [{
>         left: 100px
> }, {
>         left: 200px, easing: "ease"
> }, {
>         left: 300px
> }], {
>         duration: 1000, easing: "ease"
> })
> ```
>
> Depending on which keyframe has the non-linear easing, the animation will
> be played out very differently if the keyframe effect already has a
> non-linear easing function. I doubt this kind of compound will be wildly
> used in real world situations, as you have to remember three things to
> remember the result easing effect: the compounded easing function, the
> compounding easing function, and the time portion being compounded.
>
> I want to proposal an alternative way of applying easing function to
> keyframes:
>
> Firstly, easing functions can never be compounded. Keyframes inherit
> easing functions from the animation effect.
>
> So
>
> ```
> new KeyframeEffect(target, [{
>         left: 100px
> }, {
>         left: 200px
> }, {
>         left: 300px
> }], {
>         duration: 1000, easing: "ease"
> })
> ```
>
> is equivalent to
>
> ```
> new KeyframeEffect(target, [{
>         left: 100px, easing: "ease"
> }, {
>         left: 200px, easing: "ease"
> }, {
>         left: 300px, easing: "ease"
> }], {
>         duration: 1000
> })
> ```
>
> Second, adjacent keyframes using the same easing function have the easing
> function apply to them as a whole. That means with
>
> ```
> new KeyframeEffect(target, [{
>         left: 100px
> }, {
>         left: 200px, easing: "ease"
> }, {
>         left: 300px, easing: "ease"
> }], {
>         duration: 1000
> })
> ```
>
> There will be no slow down in the third keyframe.
>
> Third, if the slow down effect is desired, use a new attribute like
> "disjoint: true"
>
> ```
> new KeyframeEffect(target, [{
>         left: 100px
> }, {
>         left: 200px, easing: "ease"
> }, {
>         left: 300px, easing: "ease", disjoint: true
> }], {
>         duration: 1000
> })
> ```
>
> Finally, If you really want to compound easing functions, you should use
> cubic-bezier().
>
> I think this should behave more intuitively, and it also has the ability
> of applying continuous easing function to a portion of keyframes, which is
> currently impossible.
>
> Thoughts?
>