Re: [csswg-drafts] [web-animations-2] [css-animations-2] Allow animations to be synchronized to the playback of audio or video elements (#9110)

> I'm not sure if this is possible as of now, but will there also be a possibility to sync the `<audio>` or `<video>` – play position to the scroll position syncing it the other way around?

This is possible using a tad of JS

```js
// Get Animation Progress
let progress = animation.effect.getComputedTiming().progress * 1;
if (animation.playState === "finished") progress = 1;
progress = Math.max(0.0, Math.min(1.0, progress)).toFixed(2);

// Sync Video to Animation Progress
document.querySelector("video").currentTime = (document.querySelector("video").duration * progress).toFixed(5);
```

See https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/ for a full write-up and an easy to use utility function to simplify things for you.

Note that thanks to the resolution in https://github.com/w3c/csswg-drafts/issues/8799#issuecomment-1561576205, you can simplify the code and simply rely on `animation.progress`, but that’s not implemented in any browser just yet.

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


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

Received on Tuesday, 25 July 2023 15:28:55 UTC