Fixing interruption (#2433)

motiondivision · Dec 1, 2023 · eaa2258 · eaa2258
1 parent bbedef2
commit eaa2258
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/dev/examples/Events-whileHover.tsx b/dev/examples/Events-whileHover.tsx
@@ -6,7 +6,7 @@ export function App() {
     return (
         <motion.div
             whileHover={{
-                scale,
+                opacity: 0.5,
                 transition: {
                     type: "spring",
                     mass: 0.5,

diff --git a/dev/webpack/index.html b/dev/webpack/index.html
@@ -14,7 +14,7 @@
         </style>
     </head>
 
-    <body style="margin: 0; overflow-x: hidden">
+    <body style="margin: 0; overflow-x: hidden; background: black">
         <div id="root"></div>
         <script src="framer.debug.js"></script>
     </body>

diff --git a/packages/framer-motion/src/animation/interfaces/visual-element-target.ts b/packages/framer-motion/src/animation/interfaces/visual-element-target.ts
@@ -99,21 +99,17 @@ export function animateTarget(
             canSkip = false
         }
 
-        if (canSkip) continue
-
         /**
-         * Skip this animation if the value hasn't changed. With an exception
-         * that we can't skip if it's a spring animation
+         * Temporarily disable skipping animations if there's an animation in
+         * progress. Better would be to track the current target of a value
+         * and compare that against valueTarget.
          */
-        if (
-            canSkipHandoff &&
-            valueTarget === value.get() &&
-            (valueTransition.type !== "spring" ||
-                (!value.getVelocity() && !valueTransition.velocity))
-        ) {
-            continue
+        if (value.animation) {
+            canSkip = false
         }
 
+        if (canSkip) continue
+
         value.start(
             animateMotionValue(
                 key,