[BUG] stop and starting animation while repeating doesn't work as expected

[Lvdwardt]

2. Describe the bug

When stopping and starting an infinite loop animation it doesn't work as expected. It doesn't complete a full loop anymore.
Example: I have an element that rotates 360 degrees. when I stop the animation at 180 degrees and then start it again, it goes from 180 to 360 but then jumps to 180 again, instead of continuing at 0.

It also happens for translateX and translateY 100%. when stopping and starting, it only goes between stopped percentage and 100%

3. CodeSandbox

https://codesandbox.io/p/sandbox/framer-loop-pause-h4kshh

4. Steps to reproduce

Steps to reproduce the behavior:

1. hover over the red box.
2. stop and start hovering a few times

5. Expected behavior

The animation should continue at it's current point, and complete a full rotation. when the rotation is complete, the animation should start at 0 again, instead of the previous starting point.

6. Video or screenshots

Screen.Recording.2024-06-30.at.20.48.20.mov

7. Environment details

Tested versions:
Framer-motion 10.16.9 & 11.2.12
React 18.2 & 18.3