[csswg-drafts] [scroll-animations-1] Allow named ranges to be used with math functions (#8852)

ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1] Allow named ranges to be used with math functions ==
Currently the spec treats [`<timeline-range-name>`](https://drafts.csswg.org/scroll-animations-1/#typedef-timeline-range-name) as an `<ident>` and a named range is specified as [`<timeline-range-name> <length-percentage>`](https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start).

A range can also be simply a `<length-percentage>` without a name for use with ScrollTimelines, and [there's a suggestion](https://github.com/w3c/csswg-drafts/issues/8672#issuecomment-1545980510) for allowing the same for ViewTimelines, for attaching to the entire scroll range.

However, there are some use-cases, which are currently not addressed, more specifically: clamping a scroll range at the edges of the scroll container, so the effect, for example, will always start at 0% progress or end at 100% progress, regardless of layout.

Example could be an element that has the following animation:

```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.target {
  animation: fadeIn auto both view();
  animation-range: entry;
}
```

But when the page loads the target is already partially visible in the viewport. So it will present on load as semi-transparent.

One way to address these could be but can be done if we could use named ranges inside math functions, so authors could write it as:

```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.target {
  animation: fadeIn auto both view();
  animation-range: max(0%, entry 0%) entry 100%;
}
```

So questions are:
* can we make it possible?
* does this require syntax changes? Or just spec changes to how these types interact?

cc @fantasai @flackr @bramus 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8852 using your GitHub account


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

Received on Thursday, 18 May 2023 08:10:50 UTC