Removing default transforms from transform string

motiondivision · Aug 1, 2024 · ebf9861 · ebf9861
1 parent 58b8687
commit ebf9861
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/framer-motion/src/render/html/utils/__tests__/build-transform.test.ts b/packages/framer-motion/src/render/html/utils/__tests__/build-transform.test.ts
@@ -75,6 +75,15 @@ describe("buildTransform", () => {
                 ({ x }: { x: string }) => `translateX(${parseFloat(x) * 2}px)`
             )
         ).toBe("translateX(10px)")
+
+        expect(
+            buildTransform(
+                { x: 0, y: 200 },
+                {},
+                ({ x }: { x: string }, generated) =>
+                    `translateX(${parseFloat(x) + 10}px) ${generated}`
+            )
+        ).toBe("translateX(10px) translateY(200px)")
     })
 
     it("Outputs transform values in the correct order", () => {

diff --git a/packages/framer-motion/src/render/html/utils/build-transform.ts b/packages/framer-motion/src/render/html/utils/build-transform.ts
@@ -46,14 +46,14 @@ export function buildTransform(
             valueIsDefault = parseFloat(value) === 0
         }
 
-        if (!valueIsDefault) {
-            transformIsDefault = false
-        }
-
         if (!valueIsDefault || transformTemplate) {
-            const transformName = translateAlias[key] || key
             const valueAsType = getValueAsType(value, numberValueTypes[key])
-            transformString += `${transformName}(${valueAsType}) `
+
+            if (!valueIsDefault) {
+                transformIsDefault = false
+                const transformName = translateAlias[key] || key
+                transformString += `${transformName}(${valueAsType}) `
+            }
 
             if (transformTemplate) {
                 transform[key] = valueAsType