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; }
.scrolling-animation { animation-play-state: running; animation-timeline: timeline;  }


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; // set start_time to 0 or end_effect => animation progress is in sync with scroll 


- Unpausing first,  setting scroll timeline second

```; // 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]( 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](, is:

- Modify unpause procedure to resume from position synchronized with a scroller.
- Add additional step after [4]( 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 using your GitHub account

Sent via github-notify-ml as configured in

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