Why does resizing window width cause my animation to slow down?

[mattbal]

Hi,

I'm trying to implement a text scrolling effect where some text slides to the left and then slides in again from the right side.

To do this, I created a useEffect hook in React that calculates the width of the text and the width of the text's parent container. Then it calculates based on that the number of repeating elements needed to fully cover the entire width of the page.

I added a resize event handler, so that when the width of the page changes, it re-runs the calculation for the number of elements.

But for some reason, I'm running into a problem: when I resize the window width like 50x-100x times (by clicking and dragging to resize the window back and forth for like 20 seconds), over time the speed of the animation slows down to a TRICKLE.

Above is what my text scroller looks like on initial page load before width resizing.

This is what it looks like after resizing 50x-100x times:

Code: https://codesandbox.io/p/sandbox/motion-slowdown-example-9ypmcs

I'm using a useMotionValue hook to keep the animation of the repeating elements in sync. Initially I tried not using it and just using motion.div with animate={{ ... }}, but then the animations got out of sync as some of the elements were added/removed due to the page width resizing. So I'm using useMotionValue to keep the x the same across all of the repeating elements.

Does anyone have any ideas why the animation speed is slowing down? Is it because of my implementation or is it a bug with motion?

[mattbal]

Closing this because I found a work-around. I store a ref now with the lastWidth and only call animate when the width of the content changes. This reduces the number of calls to animate. I'm going to investigate later and see if I can find an area in the source code that is causing the animate speed to slow down, but for now I'm going to close this post.