Fixing unresolved animation

framer · Mar 14, 2024 · 5916340 · 5916340
1 parent a7449c6
commit 5916340
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/packages/framer-motion/src/animation/animators/BaseAnimation.ts b/packages/framer-motion/src/animation/animators/BaseAnimation.ts
@@ -106,12 +106,18 @@ export abstract class BaseAnimation<T extends string | number, Resolved>
     ) {
         const { name, type, velocity, delay, onComplete, onUpdate } =
             this.options
-
+        console.log(canAnimate(keyframes, name, type, velocity), {
+            keyframes,
+            name,
+            type,
+            velocity,
+        })
         /**
          * If we can't animate this value with the resolved keyframes
          * then we should complete it immediately.
          */
         if (!canAnimate(keyframes, name, type, velocity)) {
+            console.log("finishing immediately")
             // Finish immediately
             if (instantAnimationState.current || !delay) {
                 onUpdate?.(

diff --git a/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts b/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts
@@ -1424,4 +1424,17 @@ describe("MainThreadAnimation", () => {
             }).duration
         ).toEqual(1.2)
     })
+
+    test("Doesn't throw when forcing animation resolution on an animation that would be skipped", async () => {
+        const animation = animateValue({
+            KeyframeResolver: AsyncKeyframesResolver as any,
+            keyframes: [1, 1],
+            duration: 0.1,
+            ease: "linear",
+        })
+
+        animation.sample(0.4)
+
+        expect(true).toBe(true)
+    })
 })
diff --git a/packages/framer-motion/src/render/utils/KeyframesResolver.ts b/packages/framer-motion/src/render/utils/KeyframesResolver.ts
@@ -1,4 +1,4 @@
-import { cancelFrame, frame } from "../../frameloop"
+import { frame } from "../../frameloop"
 import { MotionValue } from "../../value"
 import type { VisualElement } from "../VisualElement"
 
@@ -35,7 +35,7 @@ function measureAllKeyframes() {
 
     anyNeedsMeasurement = false
     isScheduled = false
-
+    console.log("finishing flush")
     toResolve.forEach((resolver) => resolver.complete())
 
     toResolve.clear()
@@ -49,16 +49,12 @@ function readAllKeyframes() {
             anyNeedsMeasurement = true
         }
     })
-
-    frame.resolveKeyframes(measureAllKeyframes)
 }
 
 export function flushKeyframeResolvers() {
+    console.log("flushing  keyframe resolvers")
     readAllKeyframes()
     measureAllKeyframes()
-
-    cancelFrame(readAllKeyframes)
-    cancelFrame(measureAllKeyframes)
 }
 
 export type OnKeyframesResolved<T extends string | number> = (
@@ -125,6 +121,7 @@ export class KeyframeResolver<T extends string | number = any> {
             if (!isScheduled) {
                 isScheduled = true
                 frame.read(readAllKeyframes)
+                frame.resolveKeyframes(measureAllKeyframes)
             }
         } else {
             this.readKeyframes()
@@ -184,6 +181,9 @@ export class KeyframeResolver<T extends string | number = any> {
 
     complete() {
         this.isComplete = true
+
+        console.log("firing on complete with", this.unresolvedKeyframes)
+
         this.onComplete(
             this.unresolvedKeyframes as ResolvedKeyframes<T>,
             this.finalKeyframe as T