framer-motion 7.5.2 → 7.5.4

package/dist/cjs/index.js

@@ -2245,7 +2245,7 @@ class MotionValue {
          * 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 = "7.5.2";
+        this.version = "7.5.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3533,14 +3533,16 @@ function hasScale({ scale, scaleX, scaleY }) {
 }
 function hasTransform(values) {
     return (hasScale(values) ||
-        hasTranslate(values.x) ||
-        hasTranslate(values.y) ||
+        has2DTranslate(values) ||
         values.z ||
         values.rotate ||
         values.rotateX ||
         values.rotateY);
 }
-function hasTranslate(value) {
+function has2DTranslate(values) {
+    return is2DTranslate(values.x) || is2DTranslate(values.y);
+}
+function is2DTranslate(value) {
     return value && value !== "0%";
 }
 
@@ -4221,7 +4223,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "7.5.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4300,6 +4302,10 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
     const baseTarget = {
         ...latestValues,
     };
+    /**
+     * Create an object of the values we initially animated from (if initial prop present).
+     */
+    const initialValues = props.initial ? { ...latestValues } : {};
     // Internal methods ========================
     /**
      * On mount, this will be hydrated with a callback to disconnect
@@ -4646,12 +4652,34 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          * props.
          */
         getBaseTarget(key) {
+            var _a;
+            const { initial } = props;
+            const valueFromInitial = typeof initial === "string" || typeof initial === "object"
+                ? (_a = resolveVariantFromProps(props, initial)) === null || _a === void 0 ? void 0 : _a[key]
+                : undefined;
+            /**
+             * If this value still exists in the current initial variant, read that.
+             */
+            if (initial && valueFromInitial !== undefined) {
+                return valueFromInitial;
+            }
+            /**
+             * Alternatively, if this VisualElement config has defined a getBaseTarget
+             * so we can read the value from an alternative source, try that.
+             */
             if (getBaseTarget) {
                 const target = getBaseTarget(props, key);
                 if (target !== undefined && !isMotionValue(target))
                     return target;
             }
-            return baseTarget[key];
+            /**
+             * If the value was initially defined on initial, but it doesn't any more,
+             * return undefined. Otherwise return the value as initially read from the DOM.
+             */
+            return initialValues[key] !== undefined &&
+                valueFromInitial === undefined
+                ? undefined
+                : baseTarget[key];
         },
         // Lifecyles ========================
         ...lifecycles,
@@ -5970,7 +5998,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                          */
                         if (!hasLayoutChanged &&
                             this.animationProgress === 0) {
-                            this.finishAnimation();
+                            finishAnimation(this);
                         }
                         this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                     }
@@ -6379,7 +6407,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         getClosestProjectingParent() {
-            if (!this.parent || hasTransform(this.parent.latestValues))
+            if (!this.parent ||
+                hasScale(this.parent.latestValues) ||
+                has2DTranslate(this.parent.latestValues))
                 return undefined;
             if ((this.parent.relativeTarget || this.parent.targetDelta) &&
                 this.parent.layout) {

package/dist/es/projection/node/create-projection-node.mjs

@@ -14,7 +14,7 @@ import { NodeStack } from '../shared/stack.mjs';
 import { scaleCorrectors } from '../styles/scale-correction.mjs';
 import { buildProjectionTransform } from '../styles/transform.mjs';
 import { eachAxis } from '../utils/each-axis.mjs';
-import { hasTransform, hasScale } from '../utils/has-transform.mjs';
+import { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { globalProjectionState } from './state.mjs';
@@ -230,7 +230,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                          */
                         if (!hasLayoutChanged &&
                             this.animationProgress === 0) {
-                            this.finishAnimation();
+                            finishAnimation(this);
                         }
                         this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                     }
@@ -639,7 +639,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         getClosestProjectingParent() {
-            if (!this.parent || hasTransform(this.parent.latestValues))
+            if (!this.parent ||
+                hasScale(this.parent.latestValues) ||
+                has2DTranslate(this.parent.latestValues))
                 return undefined;
             if ((this.parent.relativeTarget || this.parent.targetDelta) &&
                 this.parent.layout) {

package/dist/es/projection/utils/has-transform.mjs

@@ -8,15 +8,17 @@ function hasScale({ scale, scaleX, scaleY }) {
 }
 function hasTransform(values) {
     return (hasScale(values) ||
-        hasTranslate(values.x) ||
-        hasTranslate(values.y) ||
+        has2DTranslate(values) ||
         values.z ||
         values.rotate ||
         values.rotateX ||
         values.rotateY);
 }
-function hasTranslate(value) {
+function has2DTranslate(values) {
+    return is2DTranslate(values.x) || is2DTranslate(values.y);
+}
+function is2DTranslate(value) {
     return value && value !== "0%";
 }
 
-export { hasScale, hasTransform };
+export { has2DTranslate, hasScale, hasTransform };

package/dist/es/render/index.mjs

@@ -14,6 +14,7 @@ import { invariant } from 'hey-listen';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createElement } from 'react';
 import { isRefObject } from '../utils/is-ref-object.mjs';
+import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
 
 const featureNames = Object.keys(featureDefinitions);
 const numFeatures = featureNames.length;
@@ -56,6 +57,10 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
     const baseTarget = {
         ...latestValues,
     };
+    /**
+     * Create an object of the values we initially animated from (if initial prop present).
+     */
+    const initialValues = props.initial ? { ...latestValues } : {};
     // Internal methods ========================
     /**
      * On mount, this will be hydrated with a callback to disconnect
@@ -402,12 +407,34 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          * props.
          */
         getBaseTarget(key) {
+            var _a;
+            const { initial } = props;
+            const valueFromInitial = typeof initial === "string" || typeof initial === "object"
+                ? (_a = resolveVariantFromProps(props, initial)) === null || _a === void 0 ? void 0 : _a[key]
+                : undefined;
+            /**
+             * If this value still exists in the current initial variant, read that.
+             */
+            if (initial && valueFromInitial !== undefined) {
+                return valueFromInitial;
+            }
+            /**
+             * Alternatively, if this VisualElement config has defined a getBaseTarget
+             * so we can read the value from an alternative source, try that.
+             */
             if (getBaseTarget) {
                 const target = getBaseTarget(props, key);
                 if (target !== undefined && !isMotionValue(target))
                     return target;
             }
-            return baseTarget[key];
+            /**
+             * If the value was initially defined on initial, but it doesn't any more,
+             * return undefined. Otherwise return the value as initially read from the DOM.
+             */
+            return initialValues[key] !== undefined &&
+                valueFromInitial === undefined
+                ? undefined
+                : baseTarget[key];
         },
         // Lifecyles ========================
         ...lifecycles,

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "7.5.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -24,7 +24,7 @@ class MotionValue {
          * 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 = "7.5.2";
+        this.version = "7.5.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3413,7 +3413,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 = "7.5.2";
+            this.version = "7.5.4";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4701,14 +4701,16 @@
     }
     function hasTransform(values) {
         return (hasScale(values) ||
-            hasTranslate(values.x) ||
-            hasTranslate(values.y) ||
+            has2DTranslate(values) ||
             values.z ||
             values.rotate ||
             values.rotateX ||
             values.rotateY);
     }
-    function hasTranslate(value) {
+    function has2DTranslate(values) {
+        return is2DTranslate(values.x) || is2DTranslate(values.y);
+    }
+    function is2DTranslate(value) {
         return value && value !== "0%";
     }
 
@@ -5389,7 +5391,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.5.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5468,6 +5470,10 @@
         const baseTarget = {
             ...latestValues,
         };
+        /**
+         * Create an object of the values we initially animated from (if initial prop present).
+         */
+        const initialValues = props.initial ? { ...latestValues } : {};
         // Internal methods ========================
         /**
          * On mount, this will be hydrated with a callback to disconnect
@@ -5814,12 +5820,34 @@
              * props.
              */
             getBaseTarget(key) {
+                var _a;
+                const { initial } = props;
+                const valueFromInitial = typeof initial === "string" || typeof initial === "object"
+                    ? (_a = resolveVariantFromProps(props, initial)) === null || _a === void 0 ? void 0 : _a[key]
+                    : undefined;
+                /**
+                 * If this value still exists in the current initial variant, read that.
+                 */
+                if (initial && valueFromInitial !== undefined) {
+                    return valueFromInitial;
+                }
+                /**
+                 * Alternatively, if this VisualElement config has defined a getBaseTarget
+                 * so we can read the value from an alternative source, try that.
+                 */
                 if (getBaseTarget) {
                     const target = getBaseTarget(props, key);
                     if (target !== undefined && !isMotionValue(target))
                         return target;
                 }
-                return baseTarget[key];
+                /**
+                 * If the value was initially defined on initial, but it doesn't any more,
+                 * return undefined. Otherwise return the value as initially read from the DOM.
+                 */
+                return initialValues[key] !== undefined &&
+                    valueFromInitial === undefined
+                    ? undefined
+                    : baseTarget[key];
             },
             // Lifecyles ========================
             ...lifecycles,
@@ -7138,7 +7166,7 @@
                              */
                             if (!hasLayoutChanged &&
                                 this.animationProgress === 0) {
-                                this.finishAnimation();
+                                finishAnimation(this);
                             }
                             this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                         }
@@ -7547,7 +7575,9 @@
                 }
             }
             getClosestProjectingParent() {
-                if (!this.parent || hasTransform(this.parent.latestValues))
+                if (!this.parent ||
+                    hasScale(this.parent.latestValues) ||
+                    has2DTranslate(this.parent.latestValues))
                     return undefined;
                 if ((this.parent.relativeTarget || this.parent.targetDelta) &&
                     this.parent.layout) {