Ensure that scroll-driven animations are properly displayed in Animations panel
Categories
(DevTools :: Inspector: Animations, task)
Tracking
(Not tracked)
People
(Reporter: sebo, Unassigned)
References
(Blocks 1 open bug)
Details
With scroll-driven animations elements can be animated by scroll position.
Having this new type of animation, we need to ensure that those animations are properly displayed within the Animations panel.
Sebastian
|
||
Comment 1•2 years ago
|
||
This would need a pretty big change in how the animation panel operates.
At the moment, we assume that all animations are time-based, and so the scrubber "navigates" through time.
With scroll-driven animation, this is no longer time-based, but scroll-based, so we need to figure out what to do with the scrubber (is it the right UI ? should it manipulate the scrolling position in the element ?)
Also, there's a question in what we should do if we have both time and scroll based animations within the page
Maybe there should be 2 section/tabs to distinguish between those different types
I know that Chrome DevTools are working on something in their animation panel for supporting scroll-driven animations, so maybe we can take some inspiration from them too
|
Reporter | |
Comment 2•2 years ago
|
||
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)
With scroll-driven animation, this is no longer time-based, but scroll-based, so we need to figure out what to do with the scrubber (is it the right UI ? should it manipulate the scrolling position in the element ?)
I think the UI could be reused but needs to be changed somewhat. Instead of a time we'd display percentages indicating the scroll position.
Manipulating the animation does not necessarily have to change the scroll position. Manipulating a time-based animation also doesn't manipulate the time. :-) We just provide a time value and the position within the animation gets changed based on that. Applying that to scroll-based animations that means we provide a scroll position value to change the animation. That means, the animation will be disconnected from the actual scroll position.
To attach the animation to the scroll position again, you'd simply click the play button.
Also, there's a question in what we should do if we have both time and scroll based animations within the page
Maybe there should be 2 section/tabs to distinguish between those different types
Yes, I also thought of that.
Another approach is to keep the animations in one panel but mark them as "time-based" or "scroll-based". This probably requires to attach an individual timeline to each animation to avoid confusion of time and scroll position. Advantage would be to allow debugging animations completely separately.
I know that Chrome DevTools are working on something in their animation panel for supporting scroll-driven animations, so maybe we can take some inspiration from them too
I didn't have a look at what they are doing yet. But they surely already put some more thought into this.
Sebastian
Description
•