Animation loops no longer leak CSS animations in long-running previews
Fixed a subtle memory leak where CSS animations accumulated on every loop cycle, degrading performance in React previews that run for extended periods.
2 min read
0.47.0
Fixed
CSS animation accumulation in looping React compositions. When animations loop in a React preview that runs for an extended period, @editframe/elements was creating duplicate CSS animations on every cycle. The engine cancels finished animations to prepare for the next loop, but calling synchronizeAnimation() immediately after would resurrect the canceled animation via the Web Animations API. For CSS-based animations, the browser also creates a fresh CSSAnimation object for the still-present CSS rule. This left two animation instances where there should be one, accumulating indefinitely and degrading performance in long-running previews.
We now skip synchronizeAnimation() when the animation's playState is idle after cancellation. The browser-created replacement animation is discovered and controlled correctly on the next frame. Your looping compositions no longer leak memory or slow down over time.