W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2019

Re: [csswg-drafts] [css-values-4] How to interpolate min/max/clamp? (#4082)

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Thu, 04 Jul 2019 15:38:40 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-508522111-1562254719-sysbot+gh@w3.org>
My preference would be to interpolate the individual parts of the function.

So, if you are transitioning from `width: min(5em, 0)` to `width: min(5em, 100%)`, the mid-point of the transition would be `width: min(5em, 50%)`, regardless of how 5em and 50% compare in the current layout.

This would be consistent to what happens if you have a fixed `width` (or `height`) and transition `max-width` or `min-width`, or vice versa: transition the `width` value but keep the max/min constant.  There are authoring use cases for this behavior, too: if you have multiple elements that you are animating between zero and different target values (e.g., widths of progress bars or bar chart data), you can create an effect of them all transitioning at the same rate, but stopping when they each meet their target, by animating the max clamp from 0 to 100%.

For the functions, this method of interpolation could be extending to work when transitioning from a simple dimension to a min/max/clamp function.  The simple dimension could be replaced by a matching function with all the parameters set to the original value, and transitioned from there.

E.g., when transitioning from `font-size: 16px` to `font-size: max(18px, 20vh)`, the initial value for interpolation would be treated like `font-size: max(16px, 16px)`.  The mid-point would therefore be ``font-size: max(17px, calc(8px + 10vh))`.

For transitioning from one function type to another (e.g., from a min() function to a max() function), they would need to be treated as separate terms combined in a calc expression.  So, the mid-point between `min(5px, 1em)` and `max(10px, 1em)` would be `calc( 0.5*min(5px, 1em) + 0.5*max(10px, 1em) )`.

GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4082#issuecomment-508522111 using your GitHub account
Received on Thursday, 4 July 2019 15:38:42 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:50 UTC