[web-animations-2] [css-animations-2] Allow animations to be synchronized to the playback of audio or video elements #9110
Description
(This was originally presented during the lightning round at the 2023 F2F in Cupertino)
With Scroll-Driven Animations 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
72E9
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
List of links
- 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/
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.
#video {
media-playback-timeline: --video;
}
.animated {
animation: slide linear forwards;
animation-timeline: --video;
animation-range: 1s 5s;
}