-
Notifications
You must be signed in to change notification settings - Fork 719
Interpolate values between breakpoints #6245
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
Comments
Yeah, this would be real useful for something like "intrinsic typography" - but I can imagine other use-cases as well. It's interesting to think about media/container "breakpoints" as keyframes in an animation, which we can then interpolate (with easing). My immediate association is scroll-timeline. I wonder if there would be a way to adapt something similar to get, basically, a container-timeline. |
@mirisuzanne and I put together this proposal for defining and using query-linked timelines as part of rethinking various features for animation timelines and interpolation and how to fit them all together. Query-linked TimelinesQuery-linked interpolation uses a set of keyframes (minimally, two) to interpolate values along an easing curve based on the value of a query (such as a media query or container query). The timeline is therefore defined by the value of the query, and can be referenced by an interpolation function in individual property declarations. Defining the Query TimelineThe
A typical example might look like:
While query-linked timelines can be referenced in They can, however, be referenced by an interpolation function within the affected property declarations, which allows the interpolated value to cascade the same as any other declared value. Value InterpolationValue interpolation uses a percentage value to indicate how close or far from the start/end points to calculate the interpolated value. Interpolation is interpreted through an easing curve, and the input percentage can be selected based on the current position on a timeline such as a query timeline. Timeline-based Value InterpolationThis extends the generic interpolation function adopted (but as yet unnamed ;) in #581
By naming a timeline instead of giving a percentage directly (see percentage mixes in #581 (comment)), the author can use progress along a timeline as the progress percentage. Any value valid for Value Interpolation with KeyframesFor more complex interpolation curves, the
Note: Using keyword markers (as in gradients) allows the arguments to be reordered, so that authors don't have to memorize positions of arguments. |
As an addendum: for CSS They replaced it with one descriptor named As per spec:
That way they allow more than two offset to be used. Relevant Issue: #4912, specifically this comment. |
@bramus If I understand right, we're thinking about timelines a bit differently here. They seem to be establishing the number and placement of keyframes in the timeline description, and that seems to me like the wrong location for that information. In our proposal, the timeline doesn't establish the available keyframes, just the distance that we travel from 0% complete to 100% complete. Then authors can attach that to an animation or interpolation function with as many keyframes as they need. The individual offset concerns of each animation ("reveal, "unreveal", etc) are handled in keyframes, rather than in the timeline itself. So you have a single timeline (x to y), and then the ability to offset keyframes within that timeline. "Reveal" might happen between 20%-40% of the timeline, and "unreveal" happens from 60%-80%, each one using as many keyframes as it wants. The number and placement of keyframes is controlled by the animation/interpolation rather than by the timeline. But maybe I'm misunderstanding something there? |
@mirisuzanne You understand correctly there. Simply wanted to point out that “this move in the other direction” was made before, and that it perhaps could be relevant to take into account ;) |
The CSS Working Group just discussed
The full IRC log of that discussion |
I have updated this issue with a more detailed explainer containing a proposal. Here is the explainer. |
Hello, everyone! Since we now have scroll- and view-timelines, maybe it makes sense to do something similar for this problem? A container timeline is created similarly to how a scroll/view-timeline is created:
And then the animation is set up as you would set up a scroll/view-timeline:
And keyframe offsets will accept
So, overall:
With container-timeline-range being min and max lengths for the progress of the animation. |
I’m very much sold on the idea. Two remarks though:
|
It very much is, it's just that it's set automatically from min/max scroll (etc) for those. The animation attachment range is not the same thing as the timeline range itself. Notice how animation-range-start/end:normal refers to the start/end of the timeline. Without |
Ah yes, I see now why one would need to define the |
Sorry, I forgot about the functional notation. Container timeline can be created directly with a functional notation.
|
Agenda+ to see if we can add |
The CSS Working Group just discussed
The full IRC log of that discussion |
Syntax follow-up questions are:
|
For me, Other options that I’ll throw in:
I like |
*-interpolate makes the most sense to me. |
+1
Also +1. The word might be long, but it most accurately reflects what is happening. I would also argue against |
We use a lot of technical terms in the specs that don't translate to author-facing names.
Could be more explicit, like |
If WRT This also reminds me, can these be nested? How does that behave? (also not for the MVP) |
Re |
Hmmmm I was gonna complain that I didn't like using that for the generic function because it can take a keyframes name as an argument, but actually And that lets us link the concept super directly to that of easing between keyframes vs over the whole animation, etc. |
Yeah, it Just Works, since they resolve to an appropriately typed value. (Including the generic one, as its arguments are |
There is precedent:
|
The second and third aren't part of the "author-facing API", they're just spec terms. The first and fourth, granted. |
The CSS Working Group just discussed
The full IRC log of that discussion |
In accordance with the CSSWG resolutions from February and April, @tabatkins and I have rewritten the css-values-5 section on mixing functions to introduce the weighted-average Comments are welcome. Agenda+ to request a CSSWG review and publication. CC @scottkellum @mirisuzanne |
Step 4 in the "normalize mix percentages" algorithm:
I don't understand what difference the force normalization flag makes, given that both sides of the 'or' include "total is greater than 0%". In the section on transform-mix(): As an aid to readers, suggest linking to the matrix interpolation algorithms in transforms-1 and transforms-2. Personally, I found the section on the interpolate() family to be (out of necessity) heavy on abstract concepts and hard to wrap my brain around as a result. I feel like a generous sprinkling of examples, or a link to an explainer, might be helpful. Specific points I'll call out:
In one of the examples for interpolation, we have: background-color: color-interpolate(300px in hsl, 200px: red, 500px: green, 600px: blue); Reading "300px in hsl" without having yet wrapped my brain around the grammar threw me for a loop. The way the commas are placed through the rest of the value, it read to me like we were somehow supposed to convert 300px to hsl and use that as the progress value, which made no sense. Would it be feasible to separate the progress and global-options more clearly? Or would that be too inconsistent with already specified constructs? |
Eh, that second one should be "less than". |
Not quite. There were two overlapping errors in that line - I missed that you'd applied the "clamped to 100%" to Fixed now. |
The definition of I assume how interpolation functions are restricted in some contexts will be clarified in #10982. For example, when they take
This somewhat suggests that
In my opinion, the description of the
This section is about the interpolation map (the stop list) while the first argument refers to the global options. All interpolation functions requires two or more stops and do not allow omitting stop positions, while The value range of Is it 7.2.1 Type Checking may suggest that it can also be
It also suggests that there are multiple
But then this confuses me:
Do you consider
Should the |
Uh oh!
There was an error while loading. Please reload this page.
Edit by @LeaVerou: CSS WG resolution to work on this, pending a name (options here)
Allow interpolation between both viewport and element breakpoints.
The problems with clamp(), min(), and max() is that you can only interpolate length values on a single property between two points. You may want to interpolate rulesets across multiple breakpoints. You may also want to interpolate things like variable font settings, color, etc. Additionally it would be nice to be able to ease how breakpoints are interpolated as rates at which things scale across different screen or element sizes can often be variable.
Update Dec. 7, 2022
I’ve created an explainer on this issue with a more detailed proposal: https://css.typetura.com/ruleset-interpolation/explainer/
This includes a more specific and detailed proposal as well as a companion proposal to expand scroll timeline. Expanding scroll timeline is likely the easiest solution at the moment but it would make it more user friendly to allow length values as keyframes. This can always be added at a later date though.
The text was updated successfully, but these errors were encountered: