framer-motion 7.2.1 → 7.3.0

package/dist/cjs/index.js

@@ -2235,7 +2235,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.2.1";
+        this.version = "7.3.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4211,7 +4211,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.1 may not work as expected.`);
+                warnOnce(nextValue.version === "7.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5563,6 +5563,12 @@ function boxEquals(a, b) {
         a.y.min === b.y.min &&
         a.y.max === b.y.max);
 }
+function aspectRatio(box) {
+    return calcLength(box.x) / calcLength(box.y);
+}
+function isCloseTo(a, b, max = 0.01) {
+    return popmotion.distance(a, b) <= max;
+}
 
 class NodeStack {
     constructor() {
@@ -6528,9 +6534,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.completeAnimation();
         }
         applyTransformsToTarget() {
-            const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+            const lead = this.getLead();
+            let { targetWithTransforms, target, layout, latestValues } = lead;
             if (!targetWithTransforms || !target || !layout)
                 return;
+            /**
+             * If we're only animating position, and this element isn't the lead element,
+             * then instead of projecting into the lead box we instead want to calculate
+             * a new target that aligns the two boxes but maintains the layout shape.
+             */
+            if (this !== lead &&
+                this.layout &&
+                layout &&
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                target = this.target || createBox();
+                const xLength = calcLength(this.layout.actual.x);
+                target.x.min = lead.target.x.min;
+                target.x.max = target.x.min + xLength;
+                const yLength = calcLength(this.layout.actual.y);
+                target.y.min = lead.target.y.min;
+                target.y.max = target.y.min + yLength;
+            }
             copyBoxInto(targetWithTransforms, target);
             /**
              * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -6762,9 +6786,10 @@ function notifyLayoutUpdate(node) {
         snapshot &&
         node.hasListeners("didUpdate")) {
         const { actual: layout, measured: measuredLayout } = node.layout;
+        const { animationType } = node.options;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
-        if (node.options.animationType === "size") {
+        if (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -6774,7 +6799,7 @@ function notifyLayoutUpdate(node) {
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (node.options.animationType === "position") {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -6907,6 +6932,11 @@ function roundBox(box) {
     roundAxis(box.x);
     roundAxis(box.y);
 }
+function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+    return (animationType === "position" ||
+        (animationType === "preserve-aspect" &&
+            !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+}
 
 const DocumentProjectionNode = createProjectionNode({
     attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),

package/dist/es/projection/geometry/utils.mjs

@@ -1,3 +1,6 @@
+import { distance } from 'popmotion';
+import { calcLength } from './delta-calc.mjs';
+
 function isAxisDeltaZero(delta) {
     return delta.translate === 0 && delta.scale === 1;
 }
@@ -10,5 +13,11 @@ function boxEquals(a, b) {
         a.y.min === b.y.min &&
         a.y.max === b.y.max);
 }
+function aspectRatio(box) {
+    return calcLength(box.x) / calcLength(box.y);
+}
+function isCloseTo(a, b, max = 0.01) {
+    return distance(a, b) <= max;
+}
 
-export { boxEquals, isDeltaZero };
+export { aspectRatio, boxEquals, isCloseTo, isDeltaZero };

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

@@ -9,7 +9,7 @@ import { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength } from
 import { removeBoxTransforms } from '../geometry/delta-remove.mjs';
 import { createBox, createDelta } from '../geometry/models.mjs';
 import { getValueTransition } from '../../animation/utils/transitions.mjs';
-import { boxEquals, isDeltaZero } from '../geometry/utils.mjs';
+import { boxEquals, isDeltaZero, isCloseTo, aspectRatio } from '../geometry/utils.mjs';
 import { NodeStack } from '../shared/stack.mjs';
 import { scaleCorrectors } from '../styles/scale-correction.mjs';
 import { buildProjectionTransform } from '../styles/transform.mjs';
@@ -818,9 +818,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.completeAnimation();
         }
         applyTransformsToTarget() {
-            const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+            const lead = this.getLead();
+            let { targetWithTransforms, target, layout, latestValues } = lead;
             if (!targetWithTransforms || !target || !layout)
                 return;
+            /**
+             * If we're only animating position, and this element isn't the lead element,
+             * then instead of projecting into the lead box we instead want to calculate
+             * a new target that aligns the two boxes but maintains the layout shape.
+             */
+            if (this !== lead &&
+                this.layout &&
+                layout &&
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                target = this.target || createBox();
+                const xLength = calcLength(this.layout.actual.x);
+                target.x.min = lead.target.x.min;
+                target.x.max = target.x.min + xLength;
+                const yLength = calcLength(this.layout.actual.y);
+                target.y.min = lead.target.y.min;
+                target.y.max = target.y.min + yLength;
+            }
             copyBoxInto(targetWithTransforms, target);
             /**
              * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -1052,9 +1070,10 @@ function notifyLayoutUpdate(node) {
         snapshot &&
         node.hasListeners("didUpdate")) {
         const { actual: layout, measured: measuredLayout } = node.layout;
+        const { animationType } = node.options;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
-        if (node.options.animationType === "size") {
+        if (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -1064,7 +1083,7 @@ function notifyLayoutUpdate(node) {
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (node.options.animationType === "position") {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -1197,5 +1216,10 @@ function roundBox(box) {
     roundAxis(box.x);
     roundAxis(box.y);
 }
+function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+    return (animationType === "position" ||
+        (animationType === "preserve-aspect" &&
+            !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+}
 
 export { createProjectionNode, mixAxis, mixAxisDelta, mixBox };

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.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.1 may not work as expected.`);
+                warnOnce(nextValue.version === "7.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.0 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.2.1";
+        this.version = "7.3.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3403,7 +3403,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.2.1";
+            this.version = "7.3.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5379,7 +5379,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.1 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6731,6 +6731,12 @@
             a.y.min === b.y.min &&
             a.y.max === b.y.max);
     }
+    function aspectRatio(box) {
+        return calcLength(box.x) / calcLength(box.y);
+    }
+    function isCloseTo(a, b, max = 0.01) {
+        return distance(a, b) <= max;
+    }
 
     class NodeStack {
         constructor() {
@@ -7696,9 +7702,27 @@
                 this.completeAnimation();
             }
             applyTransformsToTarget() {
-                const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+                const lead = this.getLead();
+                let { targetWithTransforms, target, layout, latestValues } = lead;
                 if (!targetWithTransforms || !target || !layout)
                     return;
+                /**
+                 * If we're only animating position, and this element isn't the lead element,
+                 * then instead of projecting into the lead box we instead want to calculate
+                 * a new target that aligns the two boxes but maintains the layout shape.
+                 */
+                if (this !== lead &&
+                    this.layout &&
+                    layout &&
+                    shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                    target = this.target || createBox();
+                    const xLength = calcLength(this.layout.actual.x);
+                    target.x.min = lead.target.x.min;
+                    target.x.max = target.x.min + xLength;
+                    const yLength = calcLength(this.layout.actual.y);
+                    target.y.min = lead.target.y.min;
+                    target.y.max = target.y.min + yLength;
+                }
                 copyBoxInto(targetWithTransforms, target);
                 /**
                  * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -7930,9 +7954,10 @@
             snapshot &&
             node.hasListeners("didUpdate")) {
             const { actual: layout, measured: measuredLayout } = node.layout;
+            const { animationType } = node.options;
             // TODO Maybe we want to also resize the layout snapshot so we don't trigger
             // animations for instance if layout="size" and an element has only changed position
-            if (node.options.animationType === "size") {
+            if (animationType === "size") {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
@@ -7942,7 +7967,7 @@
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
-            else if (node.options.animationType === "position") {
+            else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
@@ -8075,6 +8100,11 @@
         roundAxis(box.x);
         roundAxis(box.y);
     }
+    function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+        return (animationType === "position" ||
+            (animationType === "preserve-aspect" &&
+                !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+    }
 
     const DocumentProjectionNode = createProjectionNode({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),