#994: Spec review for Animation.progress

Visit on Github.

Opened Sep 17, 2024

こんにちは TAG-さん!

I'm requesting a TAG review of Animation.progress.

This feature adds a "progress" property to the JavaScript class Animation. The goal of this property is provide authors a convenient and consistent representation of how far along an animation has advanced across its iterations and regardless of the nature of its timeline.

Further details:

Discussions

2024-10-07

Minutes

discussion on why this isn't in "explainers by google"

Dan: assigns jeffrey & lea

2024-10-14

Minutes

Jeffrey: It seems confusing that Animation.progress would be the overall progress over all iterations, while getComputedTiming().progress would only return progress over the current iteration. They should have different names.

Jeffrey: https://github.com/DavMila/explainer-animation.progress?tab=readme-ov-file#time-driven-animation doesn't look compelling to me: you need some trigger to call updateInfo(), but a progresschanged event defeats a lot of the purpose of putting animations into CSS in the first place, that they can run more efficiently and off-the-main-thread.

Jeffrey: Similarly, https://github.com/DavMila/explainer-animation.progress?tab=readme-ov-file#scroll-driven-animation seems roundabout and should show the code an author would use to show a scroll percentage without using animations. IIRC, it's possible to use animations to set an element's contents, although it's a bit tricky and breaks copy/paste. Maybe the proponents should work on that instead?

<blockquote>

The explainer doesn't justify this feature well enough. It presents two use cases: one for showing a percentage through a time-based animation, and another for showing a scroll percentage.

The time-based animation has two issues:

  1. It doesn't say why the developer is writing code like this in the first place.
  2. It doesn't show how updateInfo would get called. A big reason to do animations with CSS is to get them off the main thread, but this seems to require interrupting the main thread periodically to change the text.

The scroll percentage code doesn't show the "before" state? What would the code look like if you only used scrollTop to measure progress and draw the meter? Is using animations simpler or more performant here?

It's possible but complicated to render text directly from an animated property: https://dev.to/madsstoumann/clocks-countdowns-timing-in-css-and-javascript-554n. Maybe the use cases for Animation.progress would be better served by making that easier to use?

Finally, if you do need a property for this, it seems confusing to have two .progress properties with different meanings (within-iteration for getComputedTiming().progress vs overall for Animation.progress). Please find a different name for the new meaning.

</blockquote>
2024-10-21

Minutes

we discuss draft comment from Jeffrey

we agree to post

Posted to https://github.com/w3ctag/design-reviews/issues/994#issuecomment-2427287323.

2024-10-28

Minutes

Jeffrey owes this a re-review.

2024-11-04

Minutes

Jeffrey: [sketches explainer update]. My sense is to say to keep trying to find a clearer name, but otherwise that this looks good.

Jeffrey to draft a closing comment.