[animation-frame-rate] Synchronising multiple low framerate animations

[jakearchibald]

https://github.com/WebKit/explainers/tree/main/animation-frame-rate

The proposal suggests the animation has a frame rate, but I'm not sure that's the right place for this to be defined (but maybe it could become a shorthand).

A non-basic 'animation' is created using multiple Animations, and if each of these are 10fps for stylistic reasons, it feels likely that you could end up with multiple animations running at 10fps but out of sync with each other, so the overall effect seems wrong.

I'm not sure what the alternative is. Maybe some way to place a new framerate-limited timeline on the document timeline, then allow animations to exist be on that new timeline. All animations on that timeline would have the same framerate and tick at the same time.

[graouts]

Web Animations 2 introduces the notion of group effects. This would allow a single animation to group multiple effects, and thus the frameRate set on the animation would apply to several effects at once.

This does not negate the usefulness of setting the frame rate on an entire timeline. This could be an interesting idea in a world where multiple timelines are allowed, which is a new feature that would need to be added.

We'd need to define how frame rates set on animations relate to the potential frame rate on a timeline.

My hunch is that setting the frame rate on an entire timeline does not offer sufficient granularity since a single timeline may be shared by multiple animations managed by different components with no knowledge of each other's logic. Allowing multiple effects in groups tied to a single animation with a given frame rate seems more contained.

[smfr]

My preference would be to allow for the UA to synchronize low framerate animations by default. That would be a big power win. It would mean some unpredictability around when the first callback happens after starting an animation.

[jakearchibald]

@smfr could work, but I worry it's one of those heuristic things that doesn't work in practice. What's the cut-off for "low" here? Feels like it should be specific.

[graouts]

I think there are two topics being discussed here.

The first topic is the notion of an animation being comprised of multiple sub-animations. As of this writing, the proposed solution for this is to use group effects as introduced by Web Animations Level 2. If an animation is indeed acting as the player for multiple effects, a single frameRate is specified on the animation and, although this would have to be clearly specified, all of the associated effects would be performed in sync as the animation is updated. I don't think this topic needs to be discussed in this explainer.

The second topic is about multiple Animation objects with no necessary relationship linking them setting the same frameRate value. This explainer should specify what happens in this case.

Our intention in terms of implementation is to update all animation for a given timeline with the same frame rate in the same page rendering update. Going further, our intention is to also ensure that animations with differing frame rates that could land in synchronized updates must land in synchronized updates. Consider setting some animations to update at 10fps and some at 20fps on a 60Hz display, the browser must update 20fps animations as it updates 10fps animations.

While this probably seems obvious, it remains to be seen what is the best thing to do for newly-started animations, as @smfr points out. Consider that you have existing 10fps animations running on a 60Hz display. The last update to 10fps animations occurred in the previous frame and you called requestAnimationFrame() to do some work that ends up starting a new 10fps animation. Do we:

1. update this animation right away, out of sync with other 10fps animations and again when all other 10fps update next?
2. update this animation right away and also all other 10fps animations and update such animations 10 frames from now?
3. wait until the next update to 10fps animations to update this animation? If so, should its startTime resolve immediately or at that update?

I will propose an edit to this document that addresses the topic of synchronizing updates for animations based on their frameRate value.

[birtles]

I'm not sure what the alternative is. Maybe some way to place a new framerate-limited timeline on the document timeline, then allow animations to exist be on that new timeline. All animations on that timeline would have the same framerate and tick at the same time.

Slightly tangential to this, we have occasionally seen a need to run animations that don't drop frames, but hang instead of jumping. I believe this was most clearly explained in a blog about various Xbox animations:

• https://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit (see the section "Duration based vs frame-count based animation")

In the past we've considered addressing this with a different type of timeline whose current time increments can be capped.

If we have group effects, however, I suppose that extension point could be either the timeline or the animation.

[flackr]

I think my preference would be to set the frame rate on the timeline. This way, it is obvious to the developer that multiple animations running on the same timeline will align with each other as the timeline ticks at the lower rate. Also, by setting the framerate on the default document timeline you could implicitly opt your entire page into a different tick rate.

[birtles]

I think my preference would be to set the frame rate on the timeline. This way, it is obvious to the developer that multiple animations running on the same timeline will align with each other as the timeline ticks at the lower rate.

I came to the same conclusion in my comment on w3c/csswg-drafts#7196 (comment)

[jakearchibald]

Same conclusion here whatwg/html#5025 (comment)

[jakearchibald]

Although, there's the case where you have a 60fps animation, and a 30fps animation, and you want them to be in sync. As in, the 30fps anim's frames are shown at the same time as every other 60fps animation frame.

[jakearchibald]

The above could be solved by allowing a timeline to have a parent timeline, which defaults to the document timeline. That way, you could create a 15fps timeline which has a parent 30fps timeline. Then, every other frame on the 30fps timeline would be in sync with the 15fps timeline.