framer-motion 12.4.12 → 12.4.13

package/dist/framer-motion.dev.js

@@ -1106,7 +1106,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "12.4.12";
+            this.version = "12.4.13";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -1949,25 +1949,89 @@
         }
     }
 
-    const isNumOrPxType = (v) => v === number || v === px;
-    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-        if (transform === "none" || !transform)
-            return 0;
-        const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
-        if (matrix3d) {
-            return getPosFromMatrix(matrix3d[1], pos3);
+    const radToDeg = (rad) => (rad * 180) / Math.PI;
+    const rotate = (v) => {
+        const angle = radToDeg(Math.atan2(v[1], v[0]));
+        return rebaseAngle(angle);
+    };
+    const matrix2dParsers = {
+        x: 4,
+        y: 5,
+        translateX: 4,
+        translateY: 5,
+        scaleX: 0,
+        scaleY: 3,
+        scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+        rotate,
+        rotateZ: rotate,
+        skewX: (v) => radToDeg(Math.atan(v[1])),
+        skewY: (v) => radToDeg(Math.atan(v[2])),
+        skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+    };
+    const rebaseAngle = (angle) => {
+        angle = angle % 360;
+        if (angle < 0)
+            angle += 360;
+        return angle;
+    };
+    const rotateZ = rotate;
+    const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+    const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+    const matrix3dParsers = {
+        x: 12,
+        y: 13,
+        z: 14,
+        translateX: 12,
+        translateY: 13,
+        translateZ: 14,
+        scaleX,
+        scaleY,
+        scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+        rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+        rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+        rotateZ,
+        rotate: rotateZ,
+        skewX: (v) => radToDeg(Math.atan(v[4])),
+        skewY: (v) => radToDeg(Math.atan(v[1])),
+        skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+    };
+    function defaultTransformValue(name) {
+        return name.includes("scale") ? 1 : 0;
+    }
+    function parseValueFromTransform(transform, name) {
+        if (!transform || transform === "none") {
+            return defaultTransformValue(name);
         }
-        else {
-            const matrix = transform.match(/^matrix\((.+)\)$/u);
-            if (matrix) {
-                return getPosFromMatrix(matrix[1], pos2);
-            }
-            else {
-                return 0;
-            }
+        const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+        let parsers;
+        let match;
+        if (matrix3dMatch) {
+            parsers = matrix3dParsers;
+            match = matrix3dMatch;
         }
+        else {
+            const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+            parsers = matrix2dParsers;
+            match = matrix2dMatch;
+        }
+        if (!match) {
+            return defaultTransformValue(name);
+        }
+        const valueParser = parsers[name];
+        const values = match[1].split(",").map(convertTransformToNumber);
+        return typeof valueParser === "function"
+            ? valueParser(values)
+            : values[valueParser];
+    }
+    const readTransformValue = (instance, name) => {
+        const { transform = "none" } = getComputedStyle(instance);
+        return parseValueFromTransform(transform, name);
     };
+    function convertTransformToNumber(value) {
+        return parseFloat(value.trim());
+    }
+
+    const isNumOrPxType = (v) => v === number || v === px;
     const transformKeys = new Set(["x", "y", "z"]);
     const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
     function removeNonTranslationalTransform(visualElement) {
@@ -1990,8 +2054,8 @@
         bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
         right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
         // Transform
-        x: getTranslateFromMatrix(4, 13),
-        y: getTranslateFromMatrix(5, 14),
+        x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
+        y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
     };
     // Alias translate longform names
     positionalValues.translateX = positionalValues.x;
@@ -5965,7 +6029,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.4.12", `Attempting to mix Motion versions ${nextValue.version} with 12.4.12 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.4.13", `Attempting to mix Motion versions ${nextValue.version} with 12.4.13 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7065,8 +7129,7 @@
         }
         readValueFromInstance(instance, key) {
             if (transformProps.has(key)) {
-                const defaultType = getDefaultValueType(key);
-                return defaultType ? defaultType.default || 0 : 0;
+                return readTransformValue(instance, key);
             }
             else {
                 const computedStyle = getComputedStyle$1(instance);