-
Notifications
You must be signed in to change notification settings - Fork 689
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-values] Add easing function interpolation to calc #6697
Comments
This would allow |
What about a math-specific interpolation function, akin to color-mix() and cross-fade(), that allows a % and an easing function? Like |
Like #581 (comment), but just for calculation values? |
Yeah. Single-value mixing functions intended to be allowed everywhere need to advertise their type in a way that's determinable at parse-time, like color-mix() or cross-fade() do. Math functions can determine their type at parse time; we'd do the same here. (Like, say, min(), the type of the function would be the result of adding the types of the two arguments, so you could mix "50%" and "20px", but not "20px" and "30deg".) |
Maybe we need I think |
Whatever syntax we're adding here, it should be consistent with |
Rather than adding a If you do need the raw progress value that's easy to extract by just using |
(For what it's worth, I wonder if we'd really use the easing parameter as part of the serialization from animations. We're going to have to evaluate the effect easing first anyway in order to find the keyframes to interpolate between, so we may as well evaluate the keyframe easing too -- especially given some of the very verbose easing functions we looking to introduce soon. Furthermore, we'd still need to work out how to represent addition in CSS in order to be able to use this function in any computed value.) |
It should be possible to compute the output of an easing function, given an input fraction, in calc. Something like:
width: calc(100% * interpolate(ease-in-out, 0.7))
. The first argument tointerpolate()
would accept any of the easing functions specified in https://drafts.csswg.org/css-easing-1/#easing-functions.The text was updated successfully, but these errors were encountered: