[Bug]: Motion components are unable to reverse its animations if "visible" prop is toggled halfway through animation duration

[Weffe]

Component

Motion

Package version

9.56.8

React version

16.14.0

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 33.98 GB / 63.95 GB
  Browsers:
    Edge: Chromium (134.0.3124.66)
    Internet Explorer: 11.0.22621.3527

Current Behavior

We are currently using @fluentui/[email protected] and more specifically the <Collapse> component. We've noticed some jank that applies to all Motion components when it comes to toggling the visible prop halfway through the animation.

1. Change visible prop from true to false
2. Halfway through the animation, toggle the visible prop back to true
3. See the contents disappear and the enter animation kick off as if it's starting from scratch

Expected Behavior

1. Change visible prop from true to false
2. Halfway through the animation, toggle the visible prop back to true
3. Animation is reversed back to its open state with no jank

Reproduction

https://react.fluentui.dev/?path=/docs/motion-components-preview-collapse--docs#customization

Steps to reproduce

https://react.fluentui.dev/?path=/docs/motion-components-preview-collapse--docs#customization

Visit the Storybook for the preview Motion components. You can use the Collapse as a repro. Under the customization example:

1. Set playbackRate to 5%
2. Toggle Visible to false
3. Halfway through the animation, toggle Visible to true and see the animation end abruptly before starting again

GIF of repro in action:

Are you reporting an Accessibility issue?

no

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.