flackr / scroll-timeline

A polyfill of ScrollTimeline.
Apache License 2.0
891 stars 84 forks source link

Defer tickAnimation to requestAnimationFrame to prevent relayout and ResizeObserver errors #174

Closed johannesodland closed 8 months ago

johannesodland commented 8 months ago

In updateInternal we call .currentTime before updating animations.

When there's multiple ViewTimelines, updateInternal will be called individually for each timeline on the scroll event, causing unnecessary reflow. It also causes ResizeObserver to throw a "ResizeObserver loop completed with undelivered notifications." error.

Deferring tickAnimation to requestAnimationFrame to complete all calls to currentTime before ticking animations.

Example of unexpected errors in /scroll-timelines/finish-animation.html:

Before

image

After

image
johannesodland commented 8 months ago

I realized that this will not work if we have consumers that expect timing to be updated on the next animation frame. Closing this PR. Will be submitting a new where we handle scroll and resize events only once for each scroll source, so that we can update the timing of all associated timelines before ticking their animations.