motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] Can't replay existing MainThreadAnimation

Open chrisbrown-io opened this issue 7 months ago • 0 comments

2. Describe the bug

On subsequent calls to the .play() method of an animation using a non WAAPI supported value (anything other than "opacity", "clipPath", "filter", "transform", as defined in accelerated-values.ts) the animation does not play.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/y5shq5

Repro that demonstrates that the AcceleratedAnimation (opacity) plays correctly on subsequent .play() calls, and the MainThreadAnimation (background) does not play on subsequent .play() calls.

I have also tried different non-accelerated css values and SVG element attributes (<circle> r,cx and cy attributes) and the issue persists. This is why I assume the issue is related to the MainThreadAnimation class and its differences from the AcceleratedAnimation class, however I may be wrong.

I had a scan through the source to see if I could implement a fix and unfortunately I can't get to the bottom of why this is occurring.

5. Expected behavior

Animation should repeat/play each time .play() is called.

The documentation for animate lists the functionality of play() as:

If an animation has finished, it will restart.

There's no mention of discrepancy of functionality between different properties.

6. Video or screenshots

https://github.com/user-attachments/assets/1e14abdc-6fc3-4dba-9afb-627cb3370ab6

7. Environment details

motion 12.6.2 Chrome 133.0.6943.142 macOS 14.7 (23H124) MacBook Pro M3 Max

chrisbrown-io avatar Mar 28 '25 18:03 chrisbrown-io