Re: [csswg-drafts] [web-animations-2] Custom effects (#6861)

Another situation: Part of the [`sda-utilities` package](https://www.npmjs.com/package/@bramus/sda-utilities) I created is [a `trackProgress` function](https://github.com/bramus/sda-utilities/blob/main/src/track-progress.js). Authors can use this to [Synchronize videos, 3D-models, etc. to Scroll-Driven Animations](https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/) but also to sync things to `DocumentTimeline`-based animations as well as all future types of timelines we can come up with (e.g. [`PointerTimeline`](https://github.com/w3c/csswg-drafts/issues/10574) and [`MediaPlaybackTimeline`](https://github.com/w3c/csswg-drafts/issues/9110))

The implementation of that function itself pretty nasty as it relies on `requestAnimationFrame` to constantly read the progress of the animation.

```js
const trackProgress = (animation, cb, precision = 5) => {
 const updateValue = () => {
  let newProgress = animation.effect.getComputedTiming().progress * 1;
  if (animation.playState === 'finished') newProgress = 1;
  newProgress = Math.max(0.0, Math.min(1.0, newProgress)).toFixed(precision);

  // … (pass progress into cb)

  requestAnimationFrame(updateValue);
 };
 requestAnimationFrame(updateValue);
};
```

With `animation.progress` available I could replace some of the logic to use `animation.progress`, yet it would not allow me remove the `requestAnimationFrame` as I want the library to support any type of timeline, current and future.

```diff
-let newProgress = animation.effect.getComputedTiming().progress * 1;
-if (animation.playState === 'finished') newProgress = 1;
-newProgress = Math.max(0.0, Math.min(1.0, newProgress)).toFixed(precision);
+let newProgress = animation.progress;
```

Again, an `update` or `progress` event on the existing animation would offer a way out here, as that allows me to ditch `requestAnimationFrame`.

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


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

Received on Tuesday, 22 October 2024 20:22:13 UTC