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%
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.
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:
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
https://github.com/framer/motion/assets/87395969/2496be79-8cc1-4f73-973f-3e95d31a78d0
7. Environment details
Tested versions: Framer-motion 10.16.9 & 11.2.12 React 18.2 & 18.3