motion
motion copied to clipboard
[BUG] Can't replay existing MainThreadAnimation
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