Re: [csswg-drafts] [scroll-animations-1][css-animations-2] Out-of-range range offsets (#8578)

> Does it depend on https://github.com/w3c/csswg-drafts/issues/8672? Can't you specify all possibilities using the longhands?

If `<percentage>` without a range name is not  computed differently, i.e. expanded to a `<name>` + `<percentage>`, then maybe it doesn't depend on #8672, but I was assuming that for view-timelines a `<length-percentage>` will always be expanded that way.

> Using absolute offsets is already supported by spec using the non-named-range <length-percentage> version of animation-range on a scroll timeline. https://www.w3.org/TR/scroll-animations-1/#animation-range-start
>
> There's an [open bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1441013) to get this working in chromium's implementation.

Yes, we support `<length>` for attaching to an absolute offset on scroll-timelines, but I was hoping we could use existing syntax to also limit effects and mapping their progress to the given layout.

> Maybe we should revisit the range of view-timeline and make it so that it can reference ranges over the entire scroll which I think would directly support your use case, e.g.
>
```css
.target {
  /* Animate from initial scroll position to exit. */
  animation-range-start: 0px;
  animation-range-end: exit 100%;
}
```

Yes, that could be useful. But I realize this should be on a separate issue (:

-----

Back to the issue at hand, if I understand it correctly, the question is: "do we allow range offset values that correspond to outside the entire `cover` range", correct?

So regarding @flackr's comment:

> I agree we should allow all values and not clamp them. This will allow authors to define animations that start just before or end just after particular ranges.

This is specifically the case with effects like:

```css
@keyframe parallax {
  from {
    transform: translateY(-500px);
  }
  to {
    transform: translateY(500px);
  }
}

.parallaxed {
  animation: parallax both view();
  animation-range: cover 0% cover 100%;
}
```

Because we ignore the transforms, the animation will actually start when the element is 500px above `cover 0%` and end when the element is 500px below `cover 100%`.
Now, there are 3 ways to tackle this:

1. Extend the effective scrollport with `view-timeline-inset: -500px`.
2. Allow negative values like suggested here, and set: `animation-range: entry -500px exit 500px` or with calc()'s: `calc(entry 0% - 500px) calc(exit 100% + 500px)`, but I assume these are equivalent, right?
3. Use a named `view-timeline` on a different element that's 1000px higher and the `.parallaxed` element is centered inside it.

Same can be said for effects where the animated element is offset from the view-timeline subject and or extends beyond it.

I think option 3 requires an extra element, so having to resort to that is a less desirable solution.

So, if my conclusion is correct, it's either we clamp for simplicity's sake, or we allow offsets that are out-of-range?
I think we can allow out-of-range if that makes more sense to authors, no particular reason why not to allow it also.

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


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

Received on Tuesday, 9 May 2023 22:18:49 UTC