Re: [csswg-drafts] [web-animations-1] Make animations become idle when they have an inactive timeline (#2066)

In an effort to integrate ScrollTimeline with web animations we came along undefined behaviors, such as:
- Handling unresolved timeline current time by animations. Use cases, based on ScrollTimeline spec:
  - scroll < scrollTimeline.startScrollOffset and scrollTimeline.fill == none or backwards
  - scroll > scrollTimeline.endScrollOffset and scrollTimeline.fill == none or forwards
  - scrollTimeline.startScrollOffset == scrollTimeline.startScrollOffset
- Handling inactive timelines by animations. Use cases, based on ScrollTimeline spec:
  - scroll source does not currently have a CSS layout box
  - scroll source  layout box is not a scroll container

To eliminate a requirement to handle unresolved current time we proposed removing scrollTimeline.fill attribute. Instead, resolve the current time for cases when scroll is outside of start and end offsets as follows:
- If scrollTimeline.startScrollOffset is specified and scroll < startScrollOffset, current time = (0 -  epsilon) (or -infinity).
- If scrollTimeline.endScrollOffset is specified and scroll > endScrollOffset, current_time = (duration + epsilon) (or +infinity).

_What was the original intention to bring scrollTimeline.fill attribute in and which functionality is compromised if the attribute is removed?_

As a result, we extended scroll timeline inactiveness definition to include  scrollTimeline.startScrollOffset == scrollTimeline.startScrollOffset condition and specified the following behavior of animations in regards to handling inactive timelines:
- If animation is playing and timeline becomes inactive, the animation should have no effect applied as if animation.play() was never called.
- As soon as the timeline becomes active, the animation should start playing again without user intervention.

```
scroll_timeline = new ScrollTimeline({scrollSource: scroller, ...});
animation = new Animation(new KeyframeEffect(...}], { duration: 2000}), scroll_timeline);
animation.play();

scroller.scrollTop = 50px;
console.log(animation.startTime); // 0
console.log(animation.currentTime); // some number
console.log(animation.playState); // running

scroller.style.overflow="none"

console.log(animation.startTime); // null
console.log(animation.currentTime); // null
console.log(animation.playState); // running

scroller.style.overflow="scroll"

console.log(animation.startTime); // 0
console.log(animation.currentTime); // some number
console.log(animation.playState); // running
```


Problems with this proposal:

- Hold time is lost when transitioning between active and inactive states. See [this ](https://docs.google.com/document/d/1A2vK9FVAoAUSHLJQYQvFlBGdfqFyznj8Fxq5baIxIvQ/edit?usp=sharing)diagram.
- Requires substantial changes in web animations spec to redefine playState.

@majido brought a case that perhaps inactive timelines should be handled similarly to null timelines. Intuitively these cases look similar and it would be nice to unify the behavior.  Currently running animations with null timeline have start_time = null and hold_time = 0 as illustrated in this [example](https://www.google.com/url?q=https://jsbin.com/jakefanige/1/edit?js,output&sa=D&ust=1574439510888000&usg=AFQjCNGUU9B62zkDyH0hIKyyCN7kUeAKzQ), which works in Firefox too. However animation effect is applied and it is undesired behavior for inactive timelines.

We are looking for suggestions and insights on this subject.


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

Received on Friday, 22 November 2019 17:57:32 UTC