Re: [csswg-drafts] [scroll-animations-1] Allow optional `<percentage>` in `animation-range-*` (#8438)

> It would default to `0%` in `animation-range-start` and `100%` in `animation-range-end`.

This seems fine to me.

> Also, I guess this `<percentage>` should be restricted to [0,100], so `<percentage [0,100]>`, as well as in [`<keyframe-selector>`](https://drafts.csswg.org/scroll-animations-1/#named-range-keyframes).

Discussed in #8552 already. I don't think there's any need to restrict things and allowing percentages < 0 or > 100% allows for specifying more cases, e.g. `exit -10%` starts 10% before the exit range starts.

> I also wonder if:
> 
> * `<percentage>` should always be lower in `animation-range-start` than in `animation-range-end`

This can't be enforced if they're in different ranges and in many cases whether one is before the other or not will be dynamic, e.g. contain 0% is usually after entry-crossing 99% but not if the element is larger than the viewport.

TLDR I don't think we should try to enforce ordering and just let the math work out as it does. If you specify a 0 range then you'll have an animation that is always inactive.

> * `normal` should not be allowed to repeat

Why not? We don't disallow things like `overflow: hidden hidden;`

> * it would be more intuitive to expand `animation-range: timeline-1 5%` to `animation-range-start: timeline-1 5%; animation-range-end: timeline-1 100%` (instead of `animation-range-start: timeline-1 5%; animation-range-end: normal`

I've actually wondered whether it would be more intuitive for a single value range name / offset to be treated as an inset on the range. E.g. Expand `animation-range: range-name 5%` to `animation-range-start: range-name 5%; animation-range-end: range-name calc(100% - 5%)`. Typically single value shorthands expand to the same value applied to all longhands but that would result in 0 range which is probably never what you want unless you're using it as a trigger point.

> * `<timeline-range-name>` is inappropriate in `<keyframe-selector>` because I think `animation-range` defines an interval for all keyframes and an author is not supposed to declare eg. `timeline-a 0% {} timeline-b 100% {}` with `animation-range: timeline-x`

The range name is not naming a timeline, it's a named range within a timeline. It is valid for particular keyframes to be further refined. For example you could specify
```css
@keyframes frames {
  contain 0% { transform: translateY(-10px); } /* contain 0% is equivalent to 0% given the animation-range. */
  exit 0% { transform: none; opacity: 1; }
  exit 100% { opacity: 0; } /* technically exit 100% is equivalent to 100% given the animation-range. */
}

.animate {
  animation: frames;
  animation-timeline: view();
  animation-range: contain 0% cover 100%;
}
```

> But these questions might deserve their own issue and I realize that these properties are currently under discussion so they may be a bit premature.

Yes, these probably should be separate.

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


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

Received on Friday, 10 March 2023 18:37:05 UTC