[csswg-drafts] [css-animations-2] Synchronised animation timelines (#8534)

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

== [css-animations-2] Synchronised animation timelines ==
When adding elements to a page, the applied animations _(when not paused)_ start ticking forwards from the moment the elements are added. In some cases this is not wanted and authors want to keep (repeating) animations synchronized: independent of when a new elements was added, its animations need to be in sync with the other elements that use those animations.

The author of the web-based https://athenacrisis.com/ game for example mentioned this as one of the things they had to work around while building their game that uses CSS animations. As you can see in the demo video on their homepage, the game characters hover/bounce in sync with each other.

To do this today, an author currently has to resort to JavaScript:

1. Add the elements to the DOM
2. Loop the animations and alter them one by one by either
    - Altering the effect’s delay _([demo](https://codepen.io/bramus/pen/poOPWBL))_
    - Overriding the `startTime` _([demo](https://codepen.io/bramus/pen/xxaLXeJ))_

_(Step 2 needs to be reapplied as more animation effects get added)_

I think there should be an easier way to do this. I was thinking of introducing a new type of [timeline](https://www.w3.org/TR/web-animations-1/#timeline) to solve this: the synchronised timeline. When applied, the running animation still ticks forward on the document timeline, but its start is synced to multiples of its duration or – even easier – to simply `0`.

For example, say a repeating animation has a duration of `6s` and the element gets added at `21.15s` into the page’s lifespan. Upon adding that element, the `startTime` for its animations is set to the preceding multiple of its duration (here `18s`). That way, it’s animation is already at the `3.15s` mark at first render, making it visually sync up with possible other elements that use the synchronised timeline for its animations. The animation delay would also need to be taken into account in this.

A proposed notation for this type of timeline would be a new function `sync()` or maybe `document(sync)` to indicate its relation to the default document timeline.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8534 using your GitHub account


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

Received on Monday, 6 March 2023 23:05:19 UTC