- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Wed, 29 Sep 2021 16:52:28 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `interpolating values between breakpoints`, and agreed to the following: * `RESOLVED: Accept mix() function into Values 5` <details><summary>The full IRC log of that discussion</summary> <TabAtkins> Topic: interpolating values between breakpoints<br> <TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/6245<br> <fantasai> https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-926351855<br> <TabAtkins> miriam: This is building on that same idea, but creating timelines out of MQ/CQs<br> <TabAtkins> miriam: In this caes you're more often doing interpolated values based on the timeline, not animations specifically<br> <flackr> q+<br> <TabAtkins> miriam: We want to be able to create timelines off the size of the container<br> <TabAtkins> miriam: So for defining the query timeline, we have an @timeline syntax.<br> <smfr> q+<br> <TabAtkins> miriam: Give it a name, say what we're querying, what feature we're querying<br> <TabAtkins> miriam: And give it a from/to value to offset that range<br> <TabAtkins> miriam: So interp between a container being 100px and 40em to define the timeline<br> <TabAtkins> miriam: If it's a CQ we give the name of the container<br> <TabAtkins> miriam: If there are multiple CQs with that name this'll apply to all of them<br> <TabAtkins> miriam: Kids will look at their appropriate ancestor container<br> <TabAtkins> miriam: And we can use the timeline name in an animation-timeline<br> <TabAtkins> miriam: But more often we'll want a value that interps in the cascade instead, so we can override it if we need to<br> <TabAtkins> miriam: A generic interpolate() function has been discussed for a long time<br> <TabAtkins> miriam: We called in mix() here, named TBD<br> <TabAtkins> miriam: Idea is it could be generic, taking a %, or take a timeline which resolves to a %. Could invoke scroll timelines too, etc.<br> <TabAtkins> miriam: And then it takes an easing function and two values to interp between<br> <TabAtkins> miriam: In some cases this'll get more complex with multiple values, maybe get quite long<br> <TabAtkins> miriam: Wondered if mix() could ref keyframes<br> <TabAtkins> miriam: So you could pull out the value details into keyframes for more detailed control<br> <TabAtkins> fantasai: I wanted to point out the cascade effects<br> <chris> q+ to wonder about once more doing piecewise functions with no continuity<br> <TabAtkins> fantasai: We considered putting query-based timelines as a value of aniamtion-timeline<br> <TabAtkins> fantasai: That ends up applyin all the props at once, and at an overriding level of the cascade<br> <TabAtkins> fantasai: Usually you don't want that, you just want to specify a value at a normal cascade spot, but *based on* a timeline<br> <TabAtkins> fantasai: So my font-size timeline can just spec an interpolated normal font size, and then have an overriding rule setting the font-size to a specific value as normal.<br> <Rossen_> ack fantasai<br> <Zakim> fantasai, you wanted to react to flackr to point out cascade effects<br> <Rossen_> ack flackr<br> <fantasai> s/as normal/as usual in the cascade/<br> <TabAtkins> flackr: I think what fantasai just said might change my q...<br> <TabAtkins> flackr: So this isn't an animation timeline, it only exists for the mix() function?<br> <TabAtkins> fantasai: We were debating that.<br> <TabAtkins> fantasai: We definitely want it for mix(). Whether it's available for animation-timeline is an open question<br> <TabAtkins> fantasai: We've asked brian for feedback and he pointed out there were a lot of complexities, so we might not want to do it<br> <TabAtkins> fantasai: Not the most important; mix() is the primary case<br> <TabAtkins> flackr: Yeah was gonna raise the same complexities; if it's animation, we have to have the animation progress update in the middle of the cascade.<br> <TabAtkins> flackr: Anders said it would be a huge technical burden to have anims update as part of the cascade due to the cascade<br> <TabAtkins> smfr: This feels like calc() to me<br> <Rossen_> ack smfr<br> <TabAtkins> smfr: We could have one that interps with easing funcs<br> <TabAtkins> smfr: Missing piece is input from media features, could come in as env()<br> <TabAtkins> smfr: And so with a calc easing function thing<br> <fantasai> TabAtkins: not quite, implies only doing calc()-able things<br> <fantasai> TabAtkins: not all things that can be interpolated<br> <fantasai> TabAtkins: which includes colors, etc.<br> <fantasai> smfr: Can we make calc() accept these things?<br> <fantasai> TabAtkins: I don't want to but we can talk about it?<br> <Rossen_> ack chris<br> <Zakim> chris, you wanted to wonder about once more doing piecewise functions with no continuity<br> <TabAtkins> chris: So this is unpopular<br> <TabAtkins> chris: We start by lerping two values<br> <TabAtkins> chris: Then we add more values and lerp them<br> <TabAtkins> chris: And if you draw that it's jaggy on a graph because slopes are different<br> <TabAtkins> chris: And then we add easings, and you can maybe fake it to look continuous<br> <TabAtkins> chris: But we never get to a thing that smoothly interpolates thru N values<br> <TabAtkins> chris: Is that something we want to do or just continue keeping it pairwise?<br> <TabAtkins> flackr: Is this not having easing on the mix function?<br> <TabAtkins> chris: That requires the author to figure out C1 continuity on their own<br> <TabAtkins> fantasai: This seems compatible with what keyframes do right now, we could default to smooth interp<br> <TabAtkins> TabAtkins: So chris's request is for the abilty to spec an animation with N values and have it automatically smoothly interp, rather than only having pairwise interp control that needs manual adjustment<br> <TabAtkins> chris: yes<br> <TabAtkins> TabAtkins: c1 continuity, to be specific<br> <fantasai> fantasai: We specced multi-stop animations using @keyframes, see last section of proposal<br> <Rossen_> q?<br> <fantasai> TabAtkins: I suspect that's something we can handle at a higher level<br> <fantasai> TabAtkins: we have a default for pairwise interpolation, default to ?<br> <fantasai> TabAtkins: could do smarter things in animations<br> <fantasai> TabAtkins: fits within existing syntax structure of animations<br> <fantasai> flackr: It will be challenging, though<br> <fantasai> flackr: easing function per keyframe is just between those endpoints<br> <fantasai> flackr: easin function on animation is just input time to output time<br> <fantasai> TabAtkins: animation-easing-function is the default between frames<br> <fantasai> flackr: that's correct for CSS. Web Animations also adds an easing curve to the timeline<br> <fantasai> TabAtkins: you're easing time into massaged version, that's separate from this<br> <Rossen_> ack fantasai<br> <TabAtkins> fantasai: i think we could easily have a "tweak the time"-based version, we could add that into the rule as well<br> <fantasai> s/rule/@timeline rule/<br> <fantasai> fantasai: Intention of mix() argument was the default easing between frames<br> <fantasai> fantasai: If we want to default to doing continuous magic, or adding a keyword to opt into it, that's fine<br> <TabAtkins> flackr: Yeah it would be like combining adjacent pairs that have the same value into one continuous timing function<br> <TabAtkins> fantasai: I want to point out we dont' ahve a resolution on the form of the generic interp function<br> <TabAtkins> fantasai: So our proposal is to have it accept %s and two values<br> <fantasai> https://github.com/w3c/csswg-drafts/issues/581#issuecomment-926353789<br> <TabAtkins> fantasai: So this would be a function that replaces the % with a timeline that computes to a %<br> <TabAtkins> fantasai: We have a resolution to *add* a mix() function but didn't settle on the syntax<br> <TabAtkins> Rossen_: So what can we resolve on?<br> <fantasai> s/this would be/this proposal is/<br> <TabAtkins> fantasai: resolution the first: generic interpolate function is called mix(). Takes %, then start value, then end value. Values are separated with semicolons to avoid ambiguity with comma-containing values<br> <TabAtkins> (you can interp a comma-separated list, for example)<br> <TabAtkins> TabAtkins: Simon had some thoughts about this in calc(), do you want to continue talkinga bout this?<br> <TabAtkins> smfr: I'm not quite sold on @timeline yet, but I don't want to stall this<br> <fantasai> https://github.com/w3c/csswg-drafts/issues/581<br> <TabAtkins> fantasai: Right now it's just mix()<br> <TabAtkins> smfr: Would this be like a calc()?<br> <TabAtkins> fantasai: Like, but wider.<br> <fantasai> fantasai: It has to be able to interpolate every possible computed value in the entire space of CSS<br> <TabAtkins> smfr: It requires UAs to have a parallel version of calc trees, for every possible value<br> <TabAtkins> fantasai: You kinda already have that since everything can interp<br> <TabAtkins> fantasai: Like, how do you interp between currentcolor and blue? No way to represent that right now. (color-mix() is coming, but this is a wider issue)<br> <TabAtkins> fantasai: So we have lots of places where we want to interp things that don't have intermediate values<br> <TabAtkins> smfr: That makes sense, we also invented cross-fade() to hit the image case<br> <TabAtkins> smfr: I'd like to hear from other impls about their thoughts on impl complexity, and whether it makes sense to think of it in terms of calc()<br> <fantasai> TabAtkins: I don't have problem of thinking about it in terms of calc(), can re-use machinery there<br> <fantasai> TabAtkins: but I think that's an internal detail<br> <TabAtkins> fantasai: Note that we *resolved* to add the function years ago but didn't resolve on the syntax<br> <fantasai> see also https://github.com/w3c/csswg-drafts/issues/2854<br> <TabAtkins> RESOLVED: Accept mix() function into Values 5<br> <Rossen_> s/Accept mix() function into Values 5/Accept mix() function into Values 4/<br> <TabAtkins> fantasai: So next is do we want mix() to accept a timeline+easing function instead of a %<br> <TabAtkins> fantasai: If no, I don't need to go into details. If yes, we'd use the @timeline rule discussed previously.<br> <TabAtkins> TabAtkins: This just got proposed last week, it's a little big. I'd like more time to review on it.<br> <TabAtkins> fantasai: And this would def go into level 5<br> <fantasai> ScribeNick: fantasai<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-930355155 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 29 September 2021 16:52:30 UTC