Re: [csswg-drafts] Interpolate values between breakpoints (#6245)

@mirisuzanne and I put together this proposal for defining and using query-linked timelines as part of [rethinking various features](https://wiki.csswg.org/ideas/timelines)  for animation timelines and interpolation and how to fit them all together.

## Query-linked Timelines ##

Query-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 Timeline ###

The `@timeline` rule defines a named timeline. It can be expanded later to define other types of timelines, but here we're defining only two types: media query timelines and container query timelines.

```
@timeline NAME {
  type: media | container;
  feature: <media-feature-name> | <container-feature-name>;
  from: <value>; /* 0% of the timeline */
  to: <value>; /* 100% of the timeline */
  container: <'container'>; /* only applies to container query timelines,
                               same seeking function as container queries */
}
```

A typical example might look like:

```
@timeline font-size-timeline {
  type: media;
  feature: width;
  from: 20em;
  to: 60em;
}
```

While query-linked timelines can be referenced in `animation-timeline`, it's not recommended to use this method in most cases because it would cause cascading problem: anyone using query-based interpolation via animation properties would override all affected properties at levels of the cascade.

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 Interpolation ###

Value 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 Interpolation ####

This extends the generic interpolation function adopted (but as yet unnamed ;) in https://github.com/w3c/csswg-drafts/issues/581

```
  mix( [ <timeline> && [ by <easing-function> ]? ] ; <start-value> ; <end-value>)
```

By naming a timeline instead of giving a percentage directly, the author can use progress along a timeline as the progress percentage. Any value valid for `animation-timeline` or any timeline name defined via `@timeline` is valid, which allows the `mix()` to respond to query-linked timelines and scroll-linked timelines.

#### Value Interpolation with Keyframes ####

For more complex interpolation curves, the `<start-value>` and `<end-value>` can be replaced by a reference to a named set of keyframes.

```
  mix( [ <timeline> && [ by <easing-function> ]? && of <animation-name> ] )
```

Note: Using keyword markers (as in gradients) allows the arguments to be reordered, so that authors don't have to memorize positions of arguments.


-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-926351855 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 24 September 2021 05:12:18 UTC