Fix SVG zero-duration opacity animations

dev/react/src/tests/waapi-svg-zero-duration.tsx

@@ -0,0 +1,32 @@
+import { motion } from "framer-motion"
+import { useState } from "react"
+
+export const App = () => {
+    const [hidden, setHidden] = useState(false)
+
+    return (
+        <>
+            <button id="toggle" onClick={() => setHidden(!hidden)}>
+                toggle
+            </button>
+            <svg height={60} width={200}>
+                <motion.foreignObject
+                    id="chip"
+                    animate={{ opacity: hidden ? 0 : 1 }}
+                    height={40}
+                    initial={false}
+                    transition={
+                        hidden
+                            ? { duration: 0.3 }
+                            : { duration: 0.3, opacity: { duration: 0 } }
+                    }
+                    width={100}
+                    x={10}
+                    y={10}
+                >
+                    <div style={{ background: "red" }}>chip</div>
+                </motion.foreignObject>
+            </svg>
+        </>
+    )
+}

packages/framer-motion/cypress/integration/waapi-svg-zero-duration.ts

@@ -0,0 +1,19 @@
+describe("waapi-svg-zero-duration", () => {
+    it("Restores SVG opacity with a zero-duration animation", () => {
+        cy.visit("?test=waapi-svg-zero-duration")
+            .get("#toggle")
+            .click()
+            .wait(400)
+            .get("#chip")
+            .then(([$chip]: any) => {
+                expect(getComputedStyle($chip).opacity).to.equal("0")
+            })
+            .get("#toggle")
+            .click()
+            .wait(50)
+            .get("#chip")
+            .then(([$chip]: any) => {
+                expect(getComputedStyle($chip).opacity).to.equal("1")
+            })
+    })
+})

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

@@ -46,7 +46,7 @@ describe("waapi-svg", () => {
                 expect(translateX).to.be.greaterThan(3)
 
                 // Per-frame rendered values remain at the initial keyframe
-                expect($circle.getAttribute("opacity")).to.equal("1")
+                expect($circle.style.opacity).to.equal("1")
                 expect($circle.style.transform).to.equal("translateX(0px)")
             })
             cy.get("#rect").then(([$rect]: any) => {
@@ -58,7 +58,7 @@ describe("waapi-svg", () => {
                 const [scaleX] = parseMatrix(computed.transform)
                 expect(scaleX).to.be.greaterThan(1.01)
 
-                expect($rect.getAttribute("opacity")).to.equal("1")
+                expect($rect.style.opacity).to.equal("1")
                 expect($rect.style.transform).to.equal("scale(1)")
             })
         })
@@ -74,8 +74,9 @@ describe("waapi-svg", () => {
                     .getAnimations()
                     .flatMap((animation) =>
                         Object.keys(
-                            (animation.effect as KeyframeEffect).getKeyframes()[0] ??
-                                {}
+                            (
+                                animation.effect as KeyframeEffect
+                            ).getKeyframes()[0] ?? {}
                         )
                     )
 

packages/motion-dom/src/render/svg/utils/build-attrs.ts

@@ -51,13 +51,16 @@ export function buildSVGAttrs(
     const { attrs, style } = state
 
     /**
-     * However, we apply transforms as CSS transforms.
-     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
+     * However, we apply transforms and opacity as CSS styles.
      */
     if (attrs.transform) {
         style.transform = attrs.transform
         delete attrs.transform
     }
+    if (attrs.opacity !== undefined) {
+        style.opacity = attrs.opacity
+        delete attrs.opacity
+    }
     if (style.transform || attrs.transformOrigin) {
         style.transformOrigin = attrs.transformOrigin ?? "50% 50%"
         delete attrs.transformOrigin