Re: [csswg-drafts] [web-animations-2] Prefer phase based start / end delays over converting time based delays (#7749)

When I originally wrote this issue my concern was that a developer may have specified range-based start and end delays which could get clobbered, e.g.

```html
<style>
.animation {
  animation: fade-out 1s;
}
.scroll-driven {
  animation-timeline: scroll();
  animation-delay: contain 0% contain 100%;
}
</style>
<div class="scroll-driven animation"></div>
```

Previously the procedure for [converting time based animations to non-time based timelines](https://drafts.csswg.org/web-animations-2/#time-based-animation-to-a-proportional-animation) would see the non-auto duration from `.animation` and determining that it was a time based animation "convert" the delays to 0. Since we have moved these timeline based delays to `animation-range` this is no longer an issue.

However, while discussing this with @kevers-google, he raised concerns about whether we wanted to keep the complexity of converting time based animations to proportional ones automatically. So in the spirit of evaluating this with the group, I wanted to revisit this with some concrete examples. I think at a high level there are two possible proposals which we'll consider with the following animation:

```html
<style>
@keyframes fade-out {
  to { opacity: 0; }
}
.animation {
  animation: fade-out 1s 1s;
}
.scroll-driven {
  animation-timeline: scroll();
}
</style>
<div class="scroll-driven animation"></div>
```

Options:
1. Keep the [procedure to convert a time-based animation to a proportional animation](https://drafts.csswg.org/web-animations-2/#time-based-animation-to-a-proportional-animation). The 1s start delay will be determined to be 50% of the overall time so we'll get a scroll animation which after 50% of the scroll range will start to fade out, e.g. `animation-delay: 50%`.
2. Treat time based durations and delays as their initial values (e.g. auto and 0 respectively). This means that by default the duration will fill the animation-range. The times will be completely ignored and the fade-out animation will fill the scroll range starting to fade out from the top of the scroller, e.g. `animation-delay: 0`

I'm not sure what the author would expect between the two options, however @birtles raises an interesting use case of switching an animation that is currently running based on scroll to continue to run based on time. If at some point in the developer removes the `scroll-driven` class, then we want the animation to continue to run from the point where it was. While either option can work for single animations (note: we'd have to modify the [procedure to set the timeline](https://drafts.csswg.org/web-animations-2/#setting-the-timeline) to account for the changing delay), I think if we have group / sequence effects with various time based start/end delays and we want to preserve their progress that we have to go with option 1 so that their relative progress and timing can be preserved.

TLDR; I propose resolving on option 1: keep the procedure to convert a time-based animation to a proportional animation.

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


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

Received on Wednesday, 5 April 2023 14:19:07 UTC