Merge pull request #1337 from framer/fix/x-conversion

Fixing unit conversion for translation

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+## [5.2.1] 2021-11-05
+
+### Fixed
+
+-   Fixing unit conversion for `x` and `y` styles. [Issue](https://github.com/framer/motion/issues/1336)
+
 ## [5.2.0] 2021-11-04
 
 ### Added

cypress/integration/unit-conversion.ts

@@ -0,0 +1,13 @@
+describe("Unit conversion", () => {
+    it("Animate x from 0 to calc", () => {
+        cy.visit("?test=unit-conversion")
+            .wait(50)
+            .get("#box")
+            .trigger("click")
+            .wait(30)
+            .should(([$box]: any) => {
+                const { left } = $box.getBoundingClientRect()
+                expect(left).to.equal(150)
+            })
+    })
+})

dev/examples/Animation-between-value-types-x.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { motion, useCycle } from "@framer"
+
+/**
+ * An example of animating between different value types
+ */
+
+export const App = () => {
+    const [x, cycleX] = useCycle(0, "calc(3 * var(--width))")
+
+    return (
+        <motion.div
+            initial={false}
+            animate={{ x }}
+            transition={{ duration: 5, ease: () => 0.5 }}
+            style={{
+                width: 100,
+                height: 100,
+                background: "white",
+                "--width": "100px",
+            }}
+            onClick={() => cycleX()}
+        />
+    )
+}

dev/tests/unit-conversion.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { motion, useCycle } from "@framer"
+
+/**
+ * An example of animating between different value types
+ */
+
+export const App = () => {
+    const [x, cycleX] = useCycle(0, "calc(3 * var(--width))")
+
+    return (
+        <motion.div
+            initial={false}
+            animate={{ x }}
+            transition={{ duration: 5, ease: () => 0.5 }}
+            style={{
+                width: 100,
+                height: 100,
+                background: "#ffaa00",
+                "--width": "100px",
+            }}
+            onClick={() => cycleX()}
+            id="box"
+        />
+    )
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "description": "A simple and powerful React animation library",
     "main": "dist/framer-motion.cjs.js",
     "module": "dist/es/index.mjs",

src/render/dom/utils/unit-conversion.ts

@@ -4,7 +4,7 @@ import { isKeyframesTarget } from "../../../animation/utils/is-keyframes-target"
 import { invariant } from "hey-listen"
 import { MotionValue } from "../../../value"
 import { transformProps } from "../../html/utils/transform"
-import { VisualElement } from "../../types"
+import { ResolvedValues, VisualElement } from "../../types"
 import { findDimensionValueType } from "../value-types/dimensions"
 import { Box } from "../../../projection/geometry/types"
 
@@ -121,6 +121,7 @@ const convertChangedValueTypes = (
     const element = visualElement.getInstance()
     const elementComputedStyle = getComputedStyle(element)
     const { display } = elementComputedStyle
+    const origin: ResolvedValues = {}
 
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
@@ -131,6 +132,13 @@ const convertChangedValueTypes = (
         )
     }
 
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach((key) => {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle)
+    })
+
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender()
 
@@ -140,10 +148,8 @@ const convertChangedValueTypes = (
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         const value = visualElement.getValue(key) as MotionValue
-        setAndResetVelocity(
-            value,
-            positionalValues[key](originBbox, elementComputedStyle)
-        )
+
+        setAndResetVelocity(value, origin[key])
         target[key] = positionalValues[key](targetBbox, elementComputedStyle)
     })