Fix SVG zero-duration opacity animations

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

@@ -0,0 +1,50 @@
+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>
+                <motion.rect
+                    id="transform-target"
+                    animate={{
+                        transform: hidden
+                            ? "translateX(50px)"
+                            : "translateX(0px)",
+                    }}
+                    height={40}
+                    initial={false}
+                    transition={
+                        hidden
+                            ? { duration: 0.3 }
+                            : { duration: 0.3, transform: { duration: 0 } }
+                    }
+                    width={40}
+                    x={120}
+                    y={10}
+                />
+            </svg>
+        </>
+    )
+}

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

@@ -0,0 +1,37 @@
+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")
+            })
+    })
+
+    it("Restores SVG transform with a zero-duration animation", () => {
+        cy.visit("?test=waapi-svg-zero-duration")
+            .get("#toggle")
+            .click()
+            .wait(400)
+            .get("#transform-target")
+            .then(([$target]: any) => {
+                expect($target.style.transform).to.equal("translateX(50px)")
+            })
+            .get("#toggle")
+            .click()
+            .wait(50)
+            .get("#transform-target")
+            .then(([$target]: any) => {
+                expect($target.style.transform).to.equal("translateX(0px)")
+            })
+    })
+})

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/effects/__tests__/svg-effect.test.ts

@@ -9,6 +9,35 @@ async function nextFrame() {
 }
 
 describe("svgEffect", () => {
+    it("renders SVG CSS properties as styles", async () => {
+        const element = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "circle"
+        )
+        const values = {
+            transform: motionValue("translateX(10px)"),
+            opacity: motionValue(0.5),
+            offsetDistance: motionValue("25%"),
+            offsetPath: motionValue('path("M 0 0 L 1 1")'),
+            offsetRotate: motionValue("auto"),
+            offsetAnchor: motionValue("center"),
+        }
+
+        svgEffect(element, values)
+        await nextFrame()
+
+        expect(element.style.transform).toBe("translateX(10px)")
+        expect(element.style.opacity).toBe("0.5")
+        expect(element.style.offsetDistance).toBe("25%")
+        expect(element.style.offsetPath).toBe('path("M 0 0 L 1 1")')
+        expect(element.style.offsetRotate).toBe("auto")
+        expect(element.style.offsetAnchor).toBe("center")
+
+        for (const key in values) {
+            expect(element.getAttribute(key)).toBeNull()
+        }
+    })
+
     it("sets feMorphology radius as unitless number (issue #2779)", async () => {
         const element = document.createElementNS(
             "http://www.w3.org/2000/svg",

packages/motion-dom/src/render/svg/SVGVisualElement.ts

@@ -10,7 +10,7 @@ import { camelToDash } from "../dom/utils/camel-to-dash"
 import type { ResolvedValues } from "../types"
 import type { VisualElement, MotionStyle } from "../VisualElement"
 import { SVGRenderState } from "./types"
-import { buildSVGAttrs } from "./utils/build-attrs"
+import { buildSVGAttrs, cssStyleProperties } from "./utils/build-attrs"
 import { camelCaseAttributes } from "./utils/camel-case-attrs"
 import { isSVGTag } from "./utils/is-svg-tag"
 import { renderSVG } from "./utils/render"
@@ -36,6 +36,13 @@ export class SVGVisualElement extends DOMVisualElement<
             const defaultType = getDefaultValueType(key)
             return defaultType ? defaultType.default || 0 : 0
         }
+
+        if (cssStyleProperties.includes(key)) {
+            const computedStyle = getComputedStyle(instance)
+            const value = computedStyle[key as keyof typeof computedStyle]
+            if (typeof value === "string" && value) return value.trim()
+        }
+
         key = !camelCaseAttributes.has(key) ? camelToDash(key) : key
         return instance.getAttribute(key)
     }

packages/motion-dom/src/render/svg/__tests__/SVGVisualElement.test.ts

@@ -0,0 +1,63 @@
+import { SVGVisualElement } from "../SVGVisualElement"
+
+const createVisualElement = () =>
+    new SVGVisualElement({
+        props: {},
+        presenceContext: null,
+        visualState: {
+            latestValues: {},
+            renderState: {
+                style: {},
+                vars: {},
+                transform: {},
+                transformOrigin: {},
+                attrs: {},
+            },
+        },
+    } as any)
+
+describe("SVGVisualElement", () => {
+    test.each([
+        ["transform", "translateX(10px)"],
+        ["opacity", "0.5"],
+        ["offsetDistance", "25%"],
+        ["offsetPath", 'path("M 0 0 L 1 1")'],
+        ["offsetRotate", "auto"],
+        ["offsetAnchor", "center"],
+    ])("reads %s from CSS style", (key, value) => {
+        const element = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "circle"
+        )
+        element.style[key as any] = value
+
+        expect(createVisualElement().readValueFromInstance(element, key)).toBe(
+            value
+        )
+    })
+
+    test.each([
+        ["transform", "translate(10 20)"],
+        ["opacity", "0.25"],
+        ["offsetDistance", "50%"],
+        ["offsetPath", "none"],
+        ["offsetRotate", "reverse"],
+        ["offsetAnchor", "auto"],
+    ])("falls back to the %s attribute", (key, value) => {
+        const element = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "circle"
+        )
+        element.setAttribute(
+            key.replace(
+                /[A-Z]/gu,
+                (character) => `-${character.toLowerCase()}`
+            ),
+            value
+        )
+
+        expect(createVisualElement().readValueFromInstance(element, key)).toBe(
+            value
+        )
+    })
+})

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

@@ -4,10 +4,9 @@ import { ResolvedValues } from "../../types"
 import { SVGRenderState } from "../types"
 import { buildSVGPath } from "./path"
 
-/**
- * CSS Motion Path properties that should remain as CSS styles on SVG elements.
- */
-const cssMotionPathProperties = [
+export const cssStyleProperties = [
+    "transform",
+    "opacity",
     "offsetDistance",
     "offsetPath",
     "offsetRotate",
@@ -50,14 +49,13 @@ export function buildSVGAttrs(
     state.style = {}
     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.
-     */
-    if (attrs.transform) {
-        style.transform = attrs.transform
-        delete attrs.transform
+    for (const key of cssStyleProperties) {
+        if (attrs[key] !== undefined) {
+            style[key] = attrs[key]
+            delete attrs[key]
+        }
     }
+
     if (style.transform || attrs.transformOrigin) {
         style.transformOrigin = attrs.transformOrigin ?? "50% 50%"
         delete attrs.transformOrigin
@@ -72,13 +70,6 @@ export function buildSVGAttrs(
         delete attrs.transformBox
     }
 
-    for (const key of cssMotionPathProperties) {
-        if (attrs[key] !== undefined) {
-            style[key] = attrs[key]
-            delete attrs[key]
-        }
-    }
-
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined) attrs.x = attrX
     if (attrY !== undefined) attrs.y = attrY