framer-motion 7.6.5 → 7.6.7

package/dist/cjs/index.js

@@ -2258,7 +2258,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.6.5";
+        this.version = "7.6.7";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3738,7 +3738,7 @@ class VisualElementDragControls {
                  * If the MotionValue is a percentage value convert to px
                  */
                 if (styleValueTypes.percent.test(current)) {
-                    const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                    const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.layoutBox[axis];
                     if (measuredAxis) {
                         const length = calcLength(measuredAxis);
                         current = length * (parseFloat(current) / 100);
@@ -3839,7 +3839,7 @@ class VisualElementDragControls {
         }
         else {
             if (dragConstraints && layout) {
-                this.constraints = calcRelativeConstraints(layout.actual, dragConstraints);
+                this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
             }
             else {
                 this.constraints = false;
@@ -3856,7 +3856,7 @@ class VisualElementDragControls {
             !this.hasMutatedConstraints) {
             eachAxis((axis) => {
                 if (this.getAxisMotionValue(axis)) {
-                    this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], this.constraints[axis]);
+                    this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
                 }
             });
         }
@@ -3872,7 +3872,7 @@ class VisualElementDragControls {
         if (!projection || !projection.layout)
             return false;
         const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
-        let measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
+        let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
         /**
          * If there's an onMeasureDragConstraints listener we call it and
          * if different constraints are returned, set constraints to that
@@ -3954,7 +3954,7 @@ class VisualElementDragControls {
             const { projection } = this.visualElement;
             const axisValue = this.getAxisMotionValue(axis);
             if (projection && projection.layout) {
-                const { min, max } = projection.layout.actual[axis];
+                const { min, max } = projection.layout.layoutBox[axis];
                 axisValue.set(point[axis] - popmotion.mix(min, max, 0.5));
             }
         });
@@ -4521,7 +4521,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.6.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.5 may not work as expected.`);
+                warnOnce(nextValue.version === "7.6.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.7 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4675,17 +4675,6 @@ class VisualElement {
                 }
             }
         }
-        /**
-         * Update external values with initial values
-         */
-        if (props.values) {
-            for (const key in props.values) {
-                const value = props.values[key];
-                if (latestValues[key] !== undefined && isMotionValue(value)) {
-                    value.set(latestValues[key]);
-                }
-            }
-        }
     }
     /**
      * This method takes React props and returns found MotionValues. For example, HTML
@@ -5721,7 +5710,7 @@ const transformAxes = ["", "X", "Y", "Z"];
 const animationTarget = 1000;
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
-        constructor(id, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+        constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.
@@ -5774,7 +5763,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * An object representing the calculated contextual/accumulated/tree scale.
              * This will be used to scale calculcated projection transforms, as these are
-             * calculated in screen-space but need to be scaled for elements to actually
+             * calculated in screen-space but need to be scaled for elements to layoutly
              * make it to their calculated destinations.
              *
              * TODO: Lazy-init
@@ -5804,13 +5793,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             // TODO Only running on root node
             this.sharedNodes = new Map();
-            this.id = id;
+            this.elementId = elementId;
             this.latestValues = latestValues;
             this.root = parent ? parent.root || parent : this;
             this.path = parent ? [...parent.path, parent] : [];
             this.parent = parent;
             this.depth = parent ? parent.depth + 1 : 0;
-            id && this.root.registerPotentialNode(id, this);
+            elementId && this.root.registerPotentialNode(elementId, this);
             for (let i = 0; i < this.path.length; i++) {
                 this.path[i].shouldResetTransform = true;
             }
@@ -5849,7 +5838,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.root.nodes.add(this);
             (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
-            this.id && this.root.potentialNodes.delete(this.id);
+            this.elementId && this.root.potentialNodes.delete(this.elementId);
             if (isLayoutDirty && (layout || layoutId)) {
                 this.isLayoutDirty = true;
             }
@@ -6065,14 +6054,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         updateSnapshot() {
             if (this.snapshot || !this.instance)
                 return;
-            const measured = this.measure();
-            const layout = this.removeTransform(this.removeElementScroll(measured));
-            roundBox(layout);
-            this.snapshot = {
-                measured,
-                layout,
-                latestValues: {},
-            };
+            this.snapshot = this.measure();
         }
         updateLayout() {
             var _a;
@@ -6097,18 +6079,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     node.updateScroll();
                 }
             }
-            const measured = this.measure();
-            roundBox(measured);
             const prevLayout = this.layout;
-            this.layout = {
-                measured,
-                actual: this.removeElementScroll(measured),
-            };
+            this.layout = this.measure(false);
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
-            this.notifyListeners("measure", this.layout.actual);
-            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
+            this.notifyListeners("measure", this.layout.layoutBox);
+            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.layoutBox, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.layoutBox);
         }
         updateScroll() {
             if (this.options.layoutScroll && this.instance) {
@@ -6134,7 +6111,25 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
             }
         }
-        measure() {
+        measure(removeTransform = true) {
+            const pageBox = this.measurePageBox();
+            let layoutBox = this.removeElementScroll(pageBox);
+            /**
+             * Measurements taken during the pre-render stage
+             * still have transforms applied so we remove them
+             * via calculation.
+             */
+            if (removeTransform) {
+                layoutBox = this.removeTransform(layoutBox);
+            }
+            roundBox(layoutBox);
+            return {
+                measuredBox: pageBox,
+                layoutBox,
+                latestValues: {},
+            };
+        }
+        measurePageBox() {
             const { visualElement } = this.options;
             if (!visualElement)
                 return createBox();
@@ -6215,9 +6210,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     continue;
                 hasScale(node.latestValues) && node.updateSnapshot();
                 const sourceBox = createBox();
-                const nodeBox = node.measure();
+                const nodeBox = node.measurePageBox();
                 copyBoxInto(sourceBox, nodeBox);
-                removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
+                removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layoutBox, sourceBox);
             }
             if (hasTransform(this.latestValues)) {
                 removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -6271,7 +6266,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent = relativeParent;
                     this.relativeTarget = createBox();
                     this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, relativeParent.layout.actual);
+                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
                 else {
@@ -6305,10 +6300,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             else if (this.targetDelta) {
                 if (Boolean(this.resumingFrom)) {
                     // TODO: This is creating a new object every frame
-                    this.target = this.applyTransform(this.layout.actual);
+                    this.target = this.applyTransform(this.layout.layoutBox);
                 }
                 else {
-                    copyBoxInto(this.target, this.layout.actual);
+                    copyBoxInto(this.target, this.layout.layoutBox);
                 }
                 applyBoxDelta(this.target, this.targetDelta);
             }
@@ -6316,7 +6311,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 /**
                  * If no target, use own layout as target
                  */
-                copyBoxInto(this.target, this.layout.actual);
+                copyBoxInto(this.target, this.layout.layoutBox);
             }
             /**
              * If we've been told to attempt to resolve a relative target, do so.
@@ -6373,7 +6368,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * Reset the corrected box with the latest values from box, as we're then going
              * to perform mutative operations on it.
              */
-            copyBoxInto(this.layoutCorrected, this.layout.actual);
+            copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
             /**
              * Apply all the parent deltas to this box to produce the corrected box. This
              * is the layout box, as it will appear on screen as a result of the transforms of its parents.
@@ -6450,7 +6445,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeTargetOrigin &&
                     this.layout &&
                     ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
-                    calcRelativePosition(relativeLayout, this.layout.actual, this.relativeParent.layout.actual);
+                    calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                     mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                 }
                 if (isSharedLayoutAnimation) {
@@ -6534,12 +6529,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this !== lead &&
                 this.layout &&
                 layout &&
-                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
                 target = this.target || createBox();
-                const xLength = calcLength(this.layout.actual.x);
+                const xLength = calcLength(this.layout.layoutBox.x);
                 target.x.min = lead.target.x.min;
                 target.x.max = target.x.min + xLength;
-                const yLength = calcLength(this.layout.actual.y);
+                const yLength = calcLength(this.layout.layoutBox.y);
                 target.y.min = lead.target.y.min;
                 target.y.max = target.y.min + yLength;
             }
@@ -6553,7 +6548,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Update the delta between the corrected box and the final target box, after
              * user-set transforms are applied to it. This will be used by the renderer to
-             * create a transform style that will reproject the element from its actual layout
+             * create a transform style that will reproject the element from its layout layout
              * into the desired bounding box.
              */
             calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
@@ -6709,7 +6704,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             else {
                 /**
-                 * Or we're not animating at all, set the lead component to its actual
+                 * Or we're not animating at all, set the lead component to its layout
                  * opacity and other components to hidden.
                  */
                 styles.opacity =
@@ -6773,37 +6768,37 @@ function notifyLayoutUpdate(node) {
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
-        const { actual: layout, measured: measuredLayout } = node.layout;
+        const { layoutBox: layout, measuredBox: 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 (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
-                    ? snapshot.measured[axis]
-                    : snapshot.layout[axis];
+                    ? snapshot.measuredBox[axis]
+                    : snapshot.layoutBox[axis];
                 const length = calcLength(axisSnapshot);
                 axisSnapshot.min = layout[axis].min;
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
-                    ? snapshot.measured[axis]
-                    : snapshot.layout[axis];
+                    ? snapshot.measuredBox[axis]
+                    : snapshot.layoutBox[axis];
                 const length = calcLength(layout[axis]);
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
         const layoutDelta = createDelta();
-        calcBoxDelta(layoutDelta, layout, snapshot.layout);
+        calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
         const visualDelta = createDelta();
         if (snapshot.isShared) {
-            calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
+            calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
         }
         else {
-            calcBoxDelta(visualDelta, layout, snapshot.layout);
+            calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
         }
         const hasLayoutChanged = !isDeltaZero(layoutDelta);
         let hasRelativeTargetChanged = false;
@@ -6817,9 +6812,9 @@ function notifyLayoutUpdate(node) {
                 const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                 if (parentSnapshot && parentLayout) {
                     const relativeSnapshot = createBox();
-                    calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
+                    calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
                     const relativeLayout = createBox();
-                    calcRelativePosition(relativeLayout, layout, parentLayout.actual);
+                    calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
                     if (!boxEquals(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true;
                     }

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -84,7 +84,7 @@ class VisualElementDragControls {
                  * If the MotionValue is a percentage value convert to px
                  */
                 if (percent.test(current)) {
-                    const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                    const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.layoutBox[axis];
                     if (measuredAxis) {
                         const length = calcLength(measuredAxis);
                         current = length * (parseFloat(current) / 100);
@@ -185,7 +185,7 @@ class VisualElementDragControls {
         }
         else {
             if (dragConstraints && layout) {
-                this.constraints = calcRelativeConstraints(layout.actual, dragConstraints);
+                this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
             }
             else {
                 this.constraints = false;
@@ -202,7 +202,7 @@ class VisualElementDragControls {
             !this.hasMutatedConstraints) {
             eachAxis((axis) => {
                 if (this.getAxisMotionValue(axis)) {
-                    this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], this.constraints[axis]);
+                    this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
                 }
             });
         }
@@ -218,7 +218,7 @@ class VisualElementDragControls {
         if (!projection || !projection.layout)
             return false;
         const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
-        let measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
+        let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
         /**
          * If there's an onMeasureDragConstraints listener we call it and
          * if different constraints are returned, set constraints to that
@@ -300,7 +300,7 @@ class VisualElementDragControls {
             const { projection } = this.visualElement;
             const axisValue = this.getAxisMotionValue(axis);
             if (projection && projection.layout) {
-                const { min, max } = projection.layout.actual[axis];
+                const { min, max } = projection.layout.layoutBox[axis];
                 axisValue.set(point[axis] - mix(min, max, 0.5));
             }
         });

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

@@ -28,7 +28,7 @@ const transformAxes = ["", "X", "Y", "Z"];
 const animationTarget = 1000;
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
-        constructor(id, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+        constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.
@@ -81,7 +81,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * An object representing the calculated contextual/accumulated/tree scale.
              * This will be used to scale calculcated projection transforms, as these are
-             * calculated in screen-space but need to be scaled for elements to actually
+             * calculated in screen-space but need to be scaled for elements to layoutly
              * make it to their calculated destinations.
              *
              * TODO: Lazy-init
@@ -111,13 +111,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             // TODO Only running on root node
             this.sharedNodes = new Map();
-            this.id = id;
+            this.elementId = elementId;
             this.latestValues = latestValues;
             this.root = parent ? parent.root || parent : this;
             this.path = parent ? [...parent.path, parent] : [];
             this.parent = parent;
             this.depth = parent ? parent.depth + 1 : 0;
-            id && this.root.registerPotentialNode(id, this);
+            elementId && this.root.registerPotentialNode(elementId, this);
             for (let i = 0; i < this.path.length; i++) {
                 this.path[i].shouldResetTransform = true;
             }
@@ -156,7 +156,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.root.nodes.add(this);
             (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
-            this.id && this.root.potentialNodes.delete(this.id);
+            this.elementId && this.root.potentialNodes.delete(this.elementId);
             if (isLayoutDirty && (layout || layoutId)) {
                 this.isLayoutDirty = true;
             }
@@ -372,14 +372,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         updateSnapshot() {
             if (this.snapshot || !this.instance)
                 return;
-            const measured = this.measure();
-            const layout = this.removeTransform(this.removeElementScroll(measured));
-            roundBox(layout);
-            this.snapshot = {
-                measured,
-                layout,
-                latestValues: {},
-            };
+            this.snapshot = this.measure();
         }
         updateLayout() {
             var _a;
@@ -404,18 +397,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     node.updateScroll();
                 }
             }
-            const measured = this.measure();
-            roundBox(measured);
             const prevLayout = this.layout;
-            this.layout = {
-                measured,
-                actual: this.removeElementScroll(measured),
-            };
+            this.layout = this.measure(false);
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
-            this.notifyListeners("measure", this.layout.actual);
-            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
+            this.notifyListeners("measure", this.layout.layoutBox);
+            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.layoutBox, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.layoutBox);
         }
         updateScroll() {
             if (this.options.layoutScroll && this.instance) {
@@ -441,7 +429,25 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
             }
         }
-        measure() {
+        measure(removeTransform = true) {
+            const pageBox = this.measurePageBox();
+            let layoutBox = this.removeElementScroll(pageBox);
+            /**
+             * Measurements taken during the pre-render stage
+             * still have transforms applied so we remove them
+             * via calculation.
+             */
+            if (removeTransform) {
+                layoutBox = this.removeTransform(layoutBox);
+            }
+            roundBox(layoutBox);
+            return {
+                measuredBox: pageBox,
+                layoutBox,
+                latestValues: {},
+            };
+        }
+        measurePageBox() {
             const { visualElement } = this.options;
             if (!visualElement)
                 return createBox();
@@ -522,9 +528,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     continue;
                 hasScale(node.latestValues) && node.updateSnapshot();
                 const sourceBox = createBox();
-                const nodeBox = node.measure();
+                const nodeBox = node.measurePageBox();
                 copyBoxInto(sourceBox, nodeBox);
-                removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
+                removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layoutBox, sourceBox);
             }
             if (hasTransform(this.latestValues)) {
                 removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -578,7 +584,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent = relativeParent;
                     this.relativeTarget = createBox();
                     this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, relativeParent.layout.actual);
+                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
                 else {
@@ -612,10 +618,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             else if (this.targetDelta) {
                 if (Boolean(this.resumingFrom)) {
                     // TODO: This is creating a new object every frame
-                    this.target = this.applyTransform(this.layout.actual);
+                    this.target = this.applyTransform(this.layout.layoutBox);
                 }
                 else {
-                    copyBoxInto(this.target, this.layout.actual);
+                    copyBoxInto(this.target, this.layout.layoutBox);
                 }
                 applyBoxDelta(this.target, this.targetDelta);
             }
@@ -623,7 +629,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 /**
                  * If no target, use own layout as target
                  */
-                copyBoxInto(this.target, this.layout.actual);
+                copyBoxInto(this.target, this.layout.layoutBox);
             }
             /**
              * If we've been told to attempt to resolve a relative target, do so.
@@ -680,7 +686,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * Reset the corrected box with the latest values from box, as we're then going
              * to perform mutative operations on it.
              */
-            copyBoxInto(this.layoutCorrected, this.layout.actual);
+            copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
             /**
              * Apply all the parent deltas to this box to produce the corrected box. This
              * is the layout box, as it will appear on screen as a result of the transforms of its parents.
@@ -757,7 +763,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeTargetOrigin &&
                     this.layout &&
                     ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
-                    calcRelativePosition(relativeLayout, this.layout.actual, this.relativeParent.layout.actual);
+                    calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                     mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                 }
                 if (isSharedLayoutAnimation) {
@@ -841,12 +847,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this !== lead &&
                 this.layout &&
                 layout &&
-                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
                 target = this.target || createBox();
-                const xLength = calcLength(this.layout.actual.x);
+                const xLength = calcLength(this.layout.layoutBox.x);
                 target.x.min = lead.target.x.min;
                 target.x.max = target.x.min + xLength;
-                const yLength = calcLength(this.layout.actual.y);
+                const yLength = calcLength(this.layout.layoutBox.y);
                 target.y.min = lead.target.y.min;
                 target.y.max = target.y.min + yLength;
             }
@@ -860,7 +866,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Update the delta between the corrected box and the final target box, after
              * user-set transforms are applied to it. This will be used by the renderer to
-             * create a transform style that will reproject the element from its actual layout
+             * create a transform style that will reproject the element from its layout layout
              * into the desired bounding box.
              */
             calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
@@ -1016,7 +1022,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             else {
                 /**
-                 * Or we're not animating at all, set the lead component to its actual
+                 * Or we're not animating at all, set the lead component to its layout
                  * opacity and other components to hidden.
                  */
                 styles.opacity =
@@ -1080,37 +1086,37 @@ function notifyLayoutUpdate(node) {
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
-        const { actual: layout, measured: measuredLayout } = node.layout;
+        const { layoutBox: layout, measuredBox: 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 (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
-                    ? snapshot.measured[axis]
-                    : snapshot.layout[axis];
+                    ? snapshot.measuredBox[axis]
+                    : snapshot.layoutBox[axis];
                 const length = calcLength(axisSnapshot);
                 axisSnapshot.min = layout[axis].min;
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
-                    ? snapshot.measured[axis]
-                    : snapshot.layout[axis];
+                    ? snapshot.measuredBox[axis]
+                    : snapshot.layoutBox[axis];
                 const length = calcLength(layout[axis]);
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
         const layoutDelta = createDelta();
-        calcBoxDelta(layoutDelta, layout, snapshot.layout);
+        calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
         const visualDelta = createDelta();
         if (snapshot.isShared) {
-            calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
+            calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
         }
         else {
-            calcBoxDelta(visualDelta, layout, snapshot.layout);
+            calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
         }
         const hasLayoutChanged = !isDeltaZero(layoutDelta);
         let hasRelativeTargetChanged = false;
@@ -1124,9 +1130,9 @@ function notifyLayoutUpdate(node) {
                 const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                 if (parentSnapshot && parentLayout) {
                     const relativeSnapshot = createBox();
-                    calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
+                    calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
                     const relativeLayout = createBox();
-                    calcRelativePosition(relativeLayout, layout, parentLayout.actual);
+                    calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
                     if (!boxEquals(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true;
                     }

package/dist/es/render/VisualElement.mjs

@@ -133,17 +133,6 @@ class VisualElement {
                 }
             }
         }
-        /**
-         * Update external values with initial values
-         */
-        if (props.values) {
-            for (const key in props.values) {
-                const value = props.values[key];
-                if (latestValues[key] !== undefined && isMotionValue(value)) {
-                    value.set(latestValues[key]);
-                }
-            }
-        }
     }
     /**
      * This method takes React props and returns found MotionValues. For example, HTML