framer-motion 5.5.5 → 5.5.8

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-3615b5bb.js');
+var useMotionValue = require('./use-motion-value-742e9825.js');
 var React = require('react');
 var styleValueTypes = require('style-value-types');
 var popmotion = require('popmotion');
@@ -274,6 +274,9 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
     else if (transformTemplate) {
         style.transform = transformTemplate({}, "");
     }
+    else if (!latestValues.transform && style.transform) {
+        style.transform = "none";
+    }
     if (hasTransformOrigin) {
         style.transformOrigin = buildTransformOrigin(transformOrigin);
     }
@@ -2695,13 +2698,7 @@ function MotionConfig(_a) {
      * Creating a new config context object will re-render every `motion` component
      * every time it renders. So we only want to create a new one sparingly.
      */
-    var transitionDependency = typeof config.transition === "object"
-        ? config.transition.toString()
-        : "";
-    var context = React.useMemo(function () { return config; }, [
-        transitionDependency,
-        config.transformPagePoint,
-    ]);
+    var context = React.useMemo(function () { return config; }, [JSON.stringify(config.transition), config.transformPagePoint]);
     return (React__namespace.createElement(useMotionValue.MotionConfigContext.Provider, { value: context }, children));
 }
 

package/dist/cjs/three-entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-3615b5bb.js');
+var useMotionValue = require('./use-motion-value-742e9825.js');
 var React = require('react');
 var popmotion = require('popmotion');
 var three = require('three');

package/dist/cjs/{use-motion-value-3615b5bb.js → use-motion-value-742e9825.js}

@@ -1139,6 +1139,12 @@ function animate(from, to, transition) {
 
 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 var numBorders = borders.length;
+var asNumber = function (value) {
+    return typeof value === "string" ? parseFloat(value) : value;
+};
+var isPx = function (value) {
+    return typeof value === "number" || styleValueTypes.px.test(value);
+};
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -1162,15 +1168,17 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             continue;
         followRadius || (followRadius = 0);
         leadRadius || (leadRadius = 0);
-        /**
-         * Currently we're only crossfading between numerical border radius.
-         * It would be possible to crossfade between percentages for a little
-         * extra bundle size.
-         */
-        if (typeof followRadius === "number" &&
-            typeof leadRadius === "number") {
-            var radius = Math.max(popmotion.mix(followRadius, leadRadius, progress), 0);
-            target[borderLabel] = radius;
+        var canMix = followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius);
+        if (canMix) {
+            target[borderLabel] = Math.max(popmotion.mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (styleValueTypes.percent.test(leadRadius) || styleValueTypes.percent.test(followRadius)) {
+                target[borderLabel] += "%";
+            }
+        }
+        else {
+            target[borderLabel] = leadRadius;
         }
     }
     /**
@@ -4580,6 +4588,9 @@ var visualElement = function (_a) {
              * added to our map, old ones removed, and listeners updated.
              */
             setProps: function (newProps) {
+                if (newProps.transformTemplate || props.transformTemplate) {
+                    element.scheduleRender();
+                }
                 props = newProps;
                 lifecycles.updatePropListeners(newProps);
                 prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);

package/dist/es/components/MotionConfig/index.mjs

@@ -36,13 +36,7 @@ function MotionConfig(_a) {
      * Creating a new config context object will re-render every `motion` component
      * every time it renders. So we only want to create a new one sparingly.
      */
-    var transitionDependency = typeof config.transition === "object"
-        ? config.transition.toString()
-        : "";
-    var context = useMemo(function () { return config; }, [
-        transitionDependency,
-        config.transformPagePoint,
-    ]);
+    var context = useMemo(function () { return config; }, [JSON.stringify(config.transition), config.transformPagePoint]);
     return (React.createElement(MotionConfigContext.Provider, { value: context }, children));
 }
 

package/dist/es/projection/animation/mix-values.mjs

@@ -1,7 +1,14 @@
 import { mix, progress, linear, circOut } from 'popmotion';
+import { px, percent } from 'style-value-types';
 
 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 var numBorders = borders.length;
+var asNumber = function (value) {
+    return typeof value === "string" ? parseFloat(value) : value;
+};
+var isPx = function (value) {
+    return typeof value === "number" || px.test(value);
+};
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -25,15 +32,17 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             continue;
         followRadius || (followRadius = 0);
         leadRadius || (leadRadius = 0);
-        /**
-         * Currently we're only crossfading between numerical border radius.
-         * It would be possible to crossfade between percentages for a little
-         * extra bundle size.
-         */
-        if (typeof followRadius === "number" &&
-            typeof leadRadius === "number") {
-            var radius = Math.max(mix(followRadius, leadRadius, progress), 0);
-            target[borderLabel] = radius;
+        var canMix = followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius);
+        if (canMix) {
+            target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (percent.test(leadRadius) || percent.test(followRadius)) {
+                target[borderLabel] += "%";
+            }
+        }
+        else {
+            target[borderLabel] = leadRadius;
         }
     }
     /**

package/dist/es/render/html/utils/build-styles.mjs

@@ -61,6 +61,9 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
     else if (transformTemplate) {
         style.transform = transformTemplate({}, "");
     }
+    else if (!latestValues.transform && style.transform) {
+        style.transform = "none";
+    }
     if (hasTransformOrigin) {
         style.transformOrigin = buildTransformOrigin(transformOrigin);
     }

package/dist/es/render/index.mjs

@@ -349,6 +349,9 @@ var visualElement = function (_a) {
              * added to our map, old ones removed, and listeners updated.
              */
             setProps: function (newProps) {
+                if (newProps.transformTemplate || props.transformTemplate) {
+                    element.scheduleRender();
+                }
                 props = newProps;
                 lifecycles.updatePropListeners(newProps);
                 prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);

package/dist/framer-motion.dev.js

@@ -2374,6 +2374,12 @@
 
     var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
     var numBorders = borders.length;
+    var asNumber = function (value) {
+        return typeof value === "string" ? parseFloat(value) : value;
+    };
+    var isPx = function (value) {
+        return typeof value === "number" || px.test(value);
+    };
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         var _a, _b, _c, _d;
         if (shouldCrossfadeOpacity) {
@@ -2397,15 +2403,17 @@
                 continue;
             followRadius || (followRadius = 0);
             leadRadius || (leadRadius = 0);
-            /**
-             * Currently we're only crossfading between numerical border radius.
-             * It would be possible to crossfade between percentages for a little
-             * extra bundle size.
-             */
-            if (typeof followRadius === "number" &&
-                typeof leadRadius === "number") {
-                var radius = Math.max(mix(followRadius, leadRadius, progress), 0);
-                target[borderLabel] = radius;
+            var canMix = followRadius === 0 ||
+                leadRadius === 0 ||
+                isPx(followRadius) === isPx(leadRadius);
+            if (canMix) {
+                target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+                if (percent.test(leadRadius) || percent.test(followRadius)) {
+                    target[borderLabel] += "%";
+                }
+            }
+            else {
+                target[borderLabel] = leadRadius;
             }
         }
         /**
@@ -4498,6 +4506,9 @@
         else if (transformTemplate) {
             style.transform = transformTemplate({}, "");
         }
+        else if (!latestValues.transform && style.transform) {
+            style.transform = "none";
+        }
         if (hasTransformOrigin) {
             style.transformOrigin = buildTransformOrigin(transformOrigin);
         }
@@ -7426,6 +7437,9 @@
                  * added to our map, old ones removed, and listeners updated.
                  */
                 setProps: function (newProps) {
+                    if (newProps.transformTemplate || props.transformTemplate) {
+                        element.scheduleRender();
+                    }
                     props = newProps;
                     lifecycles.updatePropListeners(newProps);
                     prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
@@ -8535,13 +8549,7 @@
          * Creating a new config context object will re-render every `motion` component
          * every time it renders. So we only want to create a new one sparingly.
          */
-        var transitionDependency = typeof config.transition === "object"
-            ? config.transition.toString()
-            : "";
-        var context = React.useMemo(function () { return config; }, [
-            transitionDependency,
-            config.transformPagePoint,
-        ]);
+        var context = React.useMemo(function () { return config; }, [JSON.stringify(config.transition), config.transformPagePoint]);
         return (React__namespace.createElement(MotionConfigContext.Provider, { value: context }, children));
     }