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

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-2] [css-animations-2] Allow animations to be synchronized to the playback of audio or video elements ==
_(This was originally presented during the lightning round at the 2023 F2F in Cupertino)_

With [Scroll-Driven Animations](https://drafts.csswg.org/scroll-animations-1/) we have defined some new types of timelines which authors can use to run an animation on. Besides the existing `DocumentTimeline`, authors can now use a `ScrollTimeline` to animate based on a scroller’s scroll offset or `ViewTimeline` to animate as an element crosses its scrollport.

One thing that authors also want to do is synchronise their animations to the playback of an `<audio>` or `<video>` element; see list of links enclosed below

<details>
<summary>List of links</summary>

- https://stackoverflow.com/questions/74212169/how-can-i-perfectly-synchronize-a-css-animation-to-the-start-of-a-looping-html-v
- https://stackoverflow.com/questions/71802931/sync-motion-of-graphics-with-video-in-javascript
- https://stackoverflow.com/questions/39489464/canvas-animation-synchronized-with-video-time
- https://stackoverflow.com/questions/6520772/how-to-link-synchronize-animation-to-a-video-recording-in-real-time
- http://www.elusien.co.uk/shotcut/OBS-animation/index.html
- https://fenomas.com/2014/03/animate-video-sync/
- https://www.smashingmagazine.com/2011/03/syncing-content-with-html5-video/
- https://www.geeksforgeeks.org/how-to-sync-css-animations-with-html5-audio/#
- https://www.sitepoint.com/syncing-css-animations-with-html5-audio/
</details>

The proposal is to add a `MediaPlaybackTimeline` type of timeline which would allow that. Authors can use it tosync up animations to a media element – `<audio>` or `<video>` – play position.

Reusing the existing `animation-timeline` and `animation-range` syntax, the CSS code for it would look like this. A new `media-playback-timeline` to create a `MediaPlaybackTimeline` would also be introduced.

```css
#video {
  media-playback-timeline: --video;
}

.animated {
  animation: slide linear forwards;
  animation-timeline: --video;
  animation-range: 1s 5s;
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9110 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 00:45:57 UTC