Merge pull request #2575 from framer/fix/waapi-interrupt

Fixing WAAPI interruption

dev/tests/waapi-interrupt.tsx

@@ -0,0 +1,42 @@
+import { motion, animate } from "framer-motion"
+import * as React from "react"
+import { useEffect, useState } from "react"
+import styled from "styled-components"
+
+const Container = styled.section`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 100px;
+
+    #box {
+        width: 100px;
+        height: 100px;
+        position: relative;
+        top: 100px;
+        left: 100px;
+        background-color: red;
+        opacity: 1;
+    }
+`
+
+export const App = () => {
+    const [state, setState] = useState(false)
+
+    return (
+        <Container>
+            <motion.div
+                id="box"
+                transition={{ duration: 1 }}
+                initial={{ transform: "scale(1)", opacity: 1 }}
+                animate={{
+                    transform: `scale(${state ? 1 : 2})`,
+                    opacity: state ? 1 : 0,
+                }}
+                onClick={() => setState(!state)}
+            >
+                Content
+            </motion.div>
+        </Container>
+    )
+}

packages/framer-motion/cypress/integration/waapi.ts

@@ -8,4 +8,22 @@ describe("waapi", () => {
                 expect($element.getBoundingClientRect().left).to.equal(200)
             })
     })
+
+    it("Animations are correctly interrupted", () => {
+        cy.visit("?test=waapi-interrupt")
+            .wait(200)
+            .get("#box")
+            .should(([$element]: any) => {
+                expect(getComputedStyle($element).opacity).not.to.equal("1")
+                expect($element.getBoundingClientRect().width).not.to.equal(100)
+            })
+            .trigger("click", 250, 250, { force: true })
+            .wait(200)
+            .should(([$element]: any) => {
+                expect(getComputedStyle($element).opacity).not.to.equal("1")
+                expect(
+                    Math.floor($element.getBoundingClientRect().width)
+                ).not.to.equal(100)
+            })
+    })
 })

packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts

@@ -147,6 +147,9 @@ export class AcceleratedAnimation<
         keyframes: ResolvedKeyframes<T>,
         finalKeyframe: T
     ): ResolvedAcceleratedAnimation {
+        // TODO
+        // Add test for setting duration to 0
+        // Add test for when component has been unmounted and element is null
         let duration = this.options.duration || 300
 
         /**
@@ -327,9 +330,11 @@ export class AcceleratedAnimation<
                 keyframes,
             })
 
+            const sampleTime = secondsToMilliseconds(this.time)
+
             motionValue.setWithVelocity(
-                sampleAnimation.sample(this.time - sampleDelta).value,
-                sampleAnimation.sample(this.time).value,
+                sampleAnimation.sample(sampleTime - sampleDelta).value,
+                sampleAnimation.sample(sampleTime).value,
                 sampleDelta
             )
         }