Re: [csswg-drafts] [css-easing] The `midpoint` easing function (#3935)

In general, I like the idea of defining an easing function equivalent to the [curve created by color hints](https://drafts.csswg.org/css-images-4/#coloring-gradient-line).  It would be convenient when defining animations and transitions, for the same reasons that it is simple and intuitive in gradients.

For reference, an easing function defined as `midpoint(H)` for some <var>H</var> value `<number [0,1]>` would define a curve represented by the following <var>y</var>=f(<var>x</var>) calculation in JS syntax:

```
exp = Math.log(0.5)/Math.log(H);
y = Math.pow(x, exp);
```

<var>y</var> would always equal 0.5 when <var>x</var> equals <var>H</var>.

I'm not sure about the name `midpoint`, but I don't have a better proposal at this time.

I like the idea of restricting the parameters to abstract values between 0 and 1 to avoid confusion with percentage lengths in gradients or percentage time selectors in animation keyframes. And it's consistent with the `cubic-bezier()` easing function.

The complication with the fix-up algorithm is unfortunate, but I like your solution of restricting that interaction to the current color hint syntax, so that in general easing functions could be added to gradients in future without affecting positions.

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

Received on Wednesday, 15 May 2019 17:54:52 UTC