Fixing stop sync

Author: mattgperry

packages/motion-dom/src/animation/JSAnimation.ts

@@ -5,6 +5,7 @@ import {
     pipe,
     secondsToMilliseconds,
 } from "motion-utils"
+import { frame } from "../frameloop/frame"
 import { time } from "../frameloop/sync-time"
 import { activeAnimations } from "../stats/animation-count"
 import { mix } from "../utils/mix"
@@ -433,16 +434,13 @@ export class JSAnimation<T extends number | string>
      * animation.stop is returned as a reference from a useEffect.
      */
     stop = () => {
-        const { motionValue } = this.options
-        if (motionValue && motionValue.updatedAt !== time.now()) {
-            this.tick(time.now())
-        }
-
-        this.isStopped = true
-        if (this.state === "idle") return
-        this.teardown()
-        const { onStop } = this.options
-        onStop && onStop()
+        frame.preRender(() => {
+            this.isStopped = true
+            if (this.state === "idle") return
+            this.teardown()
+            const { onStop } = this.options
+            onStop && onStop()
+        })
     }
 
     complete() {