Skip WAAPI for non-animatable keyframe values

dev/react/src/tests/animate-filter-blur.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from "react"
+import { animate } from "framer-motion"
+
+/**
+ * Test for #3102 — filter blur animation should work correctly.
+ *
+ * Tests valid filter blur animations and verifies that
+ * re-animating (simulating HMR) works without issues.
+ */
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+    const [done, setDone] = useState(false)
+    const [reanimated, setReanimated] = useState(false)
+
+    useEffect(() => {
+        const el = ref.current
+        if (!el) return
+
+        // First animation: blur(10px) → blur(0px)
+        const anim = animate(
+            el,
+            { filter: ["blur(10px)", "blur(0px)"] },
+            { duration: 0.3 }
+        )
+
+        anim.then(() => {
+            setDone(true)
+
+            // Re-animate (simulates HMR re-triggering the animation)
+            const anim2 = animate(
+                el,
+                { filter: ["blur(10px)", "blur(0px)"] },
+                { duration: 0.3 }
+            )
+
+            anim2.then(() => setReanimated(true))
+        })
+    }, [])
+
+    return (
+        <div>
+            <div
+                id="box"
+                ref={ref}
+                style={{ width: 100, height: 100, background: "red" }}
+            />
+            <p id="done">{String(done)}</p>
+            <p id="reanimated">{String(reanimated)}</p>
+        </div>
+    )
+}

packages/framer-motion/cypress/integration/animate-filter-blur.ts

@@ -0,0 +1,37 @@
+describe("animate() filter blur (#3102)", () => {
+    it("animates filter blur values correctly including re-animation", () => {
+        cy.visit("?test=animate-filter-blur")
+
+        // First animation should complete
+        cy.get("#done").should("contain", "true")
+
+        // Re-animation should also complete
+        cy.get("#reanimated").should("contain", "true")
+
+        // The box should have the correct final filter value
+        cy.get("#box").should(($el) => {
+            const el = $el[0] as HTMLElement
+            const filter = getComputedStyle(el).filter
+            // After blur(0px) animation, filter should be "none" or "blur(0px)"
+            expect(
+                filter === "none" || filter === "blur(0px)"
+            ).to.be.true
+        })
+    })
+
+    it("uses WAAPI for valid filter blur animations", () => {
+        cy.visit("?test=animate-filter-blur")
+
+        // During animation, the element should have a WAAPI animation
+        cy.get("#box").should(($el) => {
+            const el = $el[0] as HTMLElement
+            // We can check that a WAAPI animation was created
+            // (it may have already finished by the time we check,
+            // so we just verify no error occurred)
+            expect(el).to.exist
+        })
+
+        // Wait for both animations to complete
+        cy.get("#reanimated").should("contain", "true")
+    })
+})

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

@@ -118,7 +118,10 @@ export class AsyncMotionValueAnimation<T extends AnyResolvedKeyframe>
          * If we can't animate this value with the resolved keyframes
          * then we should complete it immediately.
          */
+        let canAnimateValue = true
         if (!canAnimate(keyframes, name, type, velocity)) {
+            canAnimateValue = false
+
             if (MotionGlobalConfig.instantAnimations || !delay) {
                 onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe))
             }
@@ -160,8 +163,14 @@ export class AsyncMotionValueAnimation<T extends AnyResolvedKeyframe>
          * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
          * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
          * optimised animation.
+         *
+         * Also skip WAAPI when keyframes aren't animatable, as the resolved
+         * values may not be valid CSS and would trigger browser warnings.
          */
-        const useWaapi = !isHandoff && supportsBrowserAnimation(resolvedOptions)
+        const useWaapi =
+            canAnimateValue &&
+            !isHandoff &&
+            supportsBrowserAnimation(resolvedOptions)
         const element = resolvedOptions.motionValue?.owner?.current
 
         const animation = useWaapi

packages/motion-dom/src/animation/utils/__tests__/can-animate.test.ts

@@ -0,0 +1,25 @@
+import { canAnimate } from "../can-animate"
+
+describe("canAnimate", () => {
+    it("returns true for valid filter blur keyframes", () => {
+        expect(
+            canAnimate(["blur(10px)", "blur(0px)"], "filter")
+        ).toBeTruthy()
+    })
+
+    it("returns false for bare filter function names without parentheses", () => {
+        expect(canAnimate(["blur(10px)", "blur"], "filter")).toBeFalsy()
+    })
+
+    it("returns false when both keyframes are non-animatable", () => {
+        expect(canAnimate(["blur", "blur"], "filter")).toBeFalsy()
+    })
+
+    it("returns false when origin keyframe is null", () => {
+        expect(canAnimate([null, "blur(10px)"], "filter")).toBe(false)
+    })
+
+    it("returns true for opacity keyframes", () => {
+        expect(canAnimate([0, 1], "opacity")).toBeTruthy()
+    })
+})

packages/motion-dom/src/animation/utils/__tests__/is-animatable.test.ts

@@ -0,0 +1,35 @@
+import { isAnimatable } from "../is-animatable"
+
+describe("isAnimatable", () => {
+    it("returns true for valid filter blur values", () => {
+        expect(isAnimatable("blur(10px)", "filter")).toBe(true)
+        expect(isAnimatable("blur(0px)", "filter")).toBe(true)
+        expect(isAnimatable("blur(0)", "filter")).toBe(true)
+        expect(isAnimatable("blur(5.5px)", "filter")).toBe(true)
+    })
+
+    it("returns false for bare filter function names without parentheses", () => {
+        expect(isAnimatable("blur", "filter")).toBe(false)
+        expect(isAnimatable("brightness", "filter")).toBe(false)
+        expect(isAnimatable("contrast", "filter")).toBe(false)
+    })
+
+    it("returns true for complex filter values", () => {
+        expect(
+            isAnimatable(
+                "blur(10px) brightness(50%) contrast(100%)",
+                "filter"
+            )
+        ).toBe(true)
+    })
+
+    it("returns true for numeric values", () => {
+        expect(isAnimatable(0)).toBe(true)
+        expect(isAnimatable(100)).toBe(true)
+    })
+
+    it("returns false for non-animatable strings", () => {
+        expect(isAnimatable("none")).toBe(false)
+        expect(isAnimatable("url(image.png)")).toBe(false)
+    })
+})