Re: [csswg-drafts] [css-view-transitions-1] How should scroll timeline animations be treated? (#9901)

Thank you @bokand for filing this. Had this on my backlog to do :)

I did indeed find **the need to prevent a View Transition from automatically finishing**. This when using a non-monotonic timeline as the source of time progress that drives the animations – in my case a `ScrollTimeline`.

While you could say this auto-finish behavior is fine for `ScrollTimeline` in my specific demo – the VT should after all end at a certain point in time, it becomes more tricky when the timeline’s animation range is the full 100% or for things like a _(currently spec-fictional)_ `GestureTimeline`.

Practically, continuing with `GestureTimeline`, I’m thinking of a situation where you want to drive a VT via a drag gesture over a dragdistance of 200px. When crossing the 200px boundary you don’t want the VT to finish immediately as the user – while still dragging – might change their mind and drag back to the 180px point. When doing so the same VT should then rewind a little bit, instead of creating a new one. Only on `pointerup` that VT should either snap back to its original state (when dragging back) or play to its end state (when dragging forward).

That to say: It depends on the type of timeline (ScrollTimeline, ViewTimeline, GestureTimeline, [MediaPlaybackTimeline](https://github.com/w3c/csswg-drafts/issues/9110), …) and the use case.

So maybe this should be an opt-in, e.g. `vtObject.preventAutoFinish()` or `document.startViewTransition({ callback, autofinish: false });`?

_(I also thought of maybe using `vtObject.pause()` instead of `vtObject.preventAutoFinish()` here but that doesn’t completely make sense here because you aren’t always pausing the VT’s animations)_

---

>  I think authors can finish the view transition manually by calling cancel() on the transition animations?

What about `vtObject.finish()`? I choose `finish()` here because the vt would first play (forwards) and reach the `finished` state.

---

Along with `vtObject.finish()`, it would be nice here if there also were something like `vtObject.revert()` to have the animations play back to the start and then have the VT undo the DOM update. This for the situation where one starts dragging in one direction but then changes their mind and drags a little bit back in the opposite direction.




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


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

Received on Monday, 5 February 2024 14:14:35 UTC