Skip to content
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

Open
smfr opened this issue Sep 29, 2021 · 8 comments
Open

[css-values] Add easing function interpolation to calc #6697

smfr opened this issue Sep 29, 2021 · 8 comments

Comments

@smfr
Copy link
Contributor

smfr commented Sep 29, 2021

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 to interpolate() would accept any of the easing functions specified in https://drafts.csswg.org/css-easing-1/#easing-functions.

@smfr
Copy link
Contributor Author

smfr commented Sep 29, 2021

This would allow calc to cover some of the use cases proposed for #6245

@tabatkins
Copy link
Member

What about a math-specific interpolation function, akin to color-mix() and cross-fade(), that allows a % and an easing function? Like interp(70% ease-in-out, 100px, 40em).

@Loirooriol
Copy link
Contributor

Like #581 (comment), but just for calculation values?

@tabatkins
Copy link
Member

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".)

@smfr
Copy link
Contributor Author

smfr commented Sep 29, 2021

interp(70% ease-in-out, 100px, 40em)
would be identical to:
calc(100px + interpolate(ease-in-out, 70%) * (40em - 100px))
I think?

Maybe we need lerp(start, end, fraction) so you can do calc(100px + lerp(100px, 40em, interpolate(ease-in-out, 70%)))

I think calc() should generally expose the primitives, but add convenience functions when appropriate.

@fantasai
Copy link
Collaborator

Whatever syntax we're adding here, it should be consistent with mix() as possible.

@tabatkins
Copy link
Member

Rather than adding a lerp() that takes a progress amount, and an interpolate() that computes a progress amount from an easing function, we can just do the two together like I suggested. ^_^ We should design it to be easy in the situations we expect it to be used, rather than just providing primitives that might be awkward or verbose in practice.

If you do need the raw progress value that's easy to extract by just using 0 and 1 as the start/end values.

@birtles
Copy link
Contributor

birtles commented Oct 1, 2021

(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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants