Re: [csswg-drafts] [web-animations-1] Add steps for transitioning to/from a scroll timeline. (#5423)

> case 1: Transitioning from a document timeline to a scroll timeline

I believe it is the most common case and, I assume, the desired behavior is:
-  Animation doesn't animate on document timeline before scroll timeline is attached. 
-  Once the animation is attached to scroll timeline and running, animation progress is synced with scroll position.

In this case initial CSS is:

```
@Keyframes fade-anim { ... }
.fade { animation: fade-anim, paused; }

element.classList.add("fade ");// play_state = 'paused', hold_time = 0
```

Attaching the animation to scroll timeline:

```
@scroll-timeline timeline { ... }
.scrolling-animation { animation-timeline: timeline; animation-play-state: running; }
  OR
.scrolling-animation { animation-play-state: running; animation-timeline: timeline;  }

element.classList.add("scrolling-animation");
```

For both declarations of .scrolling-animation class we want to achieve identical behavior. 

- Setting scroll timeline first, unpausing animation second:

```
anim.timeline = scroll_timeline; // hold_time remains 0
anim.play(); // set start_time to 0 or end_effect => animation progress is in sync with scroll 

```

- Unpausing first,  setting scroll timeline second

```
anim.play(); // hold_time = 0, play pending state
anim.timeline = scroll_timeline;  // animation is running => set start_time to 0 or end_effect  => animation progress is in sync with scroll 
```
Note, to achieve the above we need to change how [unpause](https://drafts.csswg.org/web-animations/#playing-an-animation-section) currently works for scroll animations to always keep it in sync with the scroller. Keeping current time on unpause can be controlled by setting current/start time on running animation via Javascript.

To summarize, Option 4, additional to [described her](https://github.com/w3c/csswg-drafts/pull/5423#issuecomment-679178972), is:

- Modify unpause procedure to resume from position synchronized with a scroller.
- Add additional step after [4](https://drafts.csswg.org/web-animations/#setting-the-timeline) to handle transition to scroll timeline as follows:
  - If animation is in 'running' state set start time to 0 or end effect.  










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


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

Received on Thursday, 27 August 2020 22:37:36 UTC