framer-motion 7.6.4 → 7.6.6

package/dist/es/animation/use-animated-state.mjs

@@ -1,29 +1,39 @@
 import { useState, useEffect } from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.mjs';
-import { visualElement } from '../render/index.mjs';
 import { animateVisualElement } from '../render/utils/animation.mjs';
 import { makeUseVisualState } from '../motion/utils/use-visual-state.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
+import { VisualElement } from '../render/VisualElement.mjs';
 
 const createObject = () => ({});
-const stateVisualElement = visualElement({
-    build() { },
-    measureViewportBox: createBox,
-    resetTransform() { },
-    restoreTransform() { },
-    removeValueFromRenderState() { },
-    render() { },
-    scrapeMotionValuesFromProps: createObject,
+class StateVisualElement extends VisualElement {
+    build() { }
+    measureInstanceViewportBox() {
+        return createBox();
+    }
+    resetTransform() { }
+    restoreTransform() { }
+    removeValueFromRenderState() { }
+    renderInstance() { }
+    scrapeMotionValuesFromProps() {
+        return createObject();
+    }
+    getBaseTargetFromProps() {
+        return undefined;
+    }
     readValueFromInstance(_state, key, options) {
         return options.initialState[key] || 0;
-    },
-    makeTargetAnimatable(element, { transition, transitionEnd, ...target }) {
-        const origin = getOrigin(target, transition || {}, element);
-        checkTargetForNewValues(element, target, origin);
+    }
+    sortInstanceNodePosition() {
+        return 0;
+    }
+    makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }) {
+        const origin = getOrigin(target, transition || {}, this);
+        checkTargetForNewValues(this, target, origin);
         return { transition, transitionEnd, ...target };
-    },
-});
+    }
+}
 const useVisualState = makeUseVisualState({
     scrapeMotionValuesFromProps: createObject,
     createRenderState: createObject,
@@ -35,10 +45,12 @@ const useVisualState = makeUseVisualState({
 function useAnimatedState(initialState) {
     const [animationState, setAnimationState] = useState(initialState);
     const visualState = useVisualState({}, false);
-    const element = useConstant(() => stateVisualElement({ props: {}, visualState }, { initialState }));
+    const element = useConstant(() => {
+        return new StateVisualElement({ props: {}, visualState }, { initialState });
+    });
     useEffect(() => {
         element.mount({});
-        return element.unmount;
+        return () => element.unmount();
     }, [element]);
     useEffect(() => {
         element.setProps({

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);
@@ -121,9 +121,9 @@ class VisualElementDragControls {
              * of a re-render we want to ensure the browser can read the latest
              * bounding box to ensure the pointer and element don't fall out of sync.
              */
-            this.visualElement.syncRender();
+            this.visualElement.render();
             /**
-             * This must fire after the syncRender call as it might trigger a state
+             * This must fire after the render call as it might trigger a state
              * change which itself might trigger a layout update.
              */
             onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, info);
@@ -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));
             }
         });
@@ -312,6 +312,8 @@ class VisualElementDragControls {
      */
     scalePositionWithinConstraints() {
         var _a;
+        if (!this.visualElement.current)
+            return;
         const { drag, dragConstraints } = this.getProps();
         const { projection } = this.visualElement;
         if (!isRefObject(dragConstraints) || !projection || !this.constraints)
@@ -337,7 +339,7 @@ class VisualElementDragControls {
          * Update the layout of this element and resolve the latest drag constraints
          */
         const { transformTemplate } = this.visualElement.getProps();
-        this.visualElement.getInstance().style.transform = transformTemplate
+        this.visualElement.current.style.transform = transformTemplate
             ? transformTemplate({}, "")
             : "none";
         (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
@@ -360,8 +362,10 @@ class VisualElementDragControls {
     }
     addListeners() {
         var _a;
+        if (!this.visualElement.current)
+            return;
         elementDragControls.set(this.visualElement, this);
-        const element = this.visualElement.getInstance();
+        const element = this.visualElement.current;
         /**
          * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
          */
@@ -400,7 +404,7 @@ class VisualElementDragControls {
                     this.originPoint[axis] += delta[axis].translate;
                     motionValue.set(motionValue.get() + delta[axis].translate);
                 });
-                this.visualElement.syncRender();
+                this.visualElement.render();
             }
         }));
         return () => {

package/dist/es/gestures/use-focus-gesture.mjs

@@ -7,7 +7,7 @@ import { useDomEvent } from '../events/use-dom-event.mjs';
  * @param ref
  * @internal
  */
-function useFocusGesture({ whileFocus, visualElement }) {
+function useFocusGesture({ whileFocus, visualElement, }) {
     const { animationState } = visualElement;
     const onFocus = () => {
         animationState && animationState.setActive(AnimationType.Focus, true);

package/dist/es/gestures/use-tap-gesture.mjs

@@ -38,7 +38,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          * We only count this as a tap gesture if the event.target is the same
          * as, or a child of, this component's element
          */
-        !isNodeOrChild(visualElement.getInstance(), event.target)
+        !isNodeOrChild(visualElement.current, event.target)
             ? onTapCancel && onTapCancel(event, info)
             : onTap && onTap(event, info);
     }

package/dist/es/index.mjs

@@ -37,7 +37,7 @@ export { useDomEvent } from './events/use-dom-event.mjs';
 export { createMotionComponent } from './motion/index.mjs';
 export { isMotionComponent } from './motion/utils/is-motion-component.mjs';
 export { unwrapMotionComponent } from './motion/utils/unwrap-motion-component.mjs';
-export { visualElement } from './render/index.mjs';
+export { VisualElement } from './render/VisualElement.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { useInstantTransition } from './utils/use-instant-transition.mjs';
 export { useInstantLayoutTransition } from './projection/use-instant-layout-transition.mjs';

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -23,7 +23,7 @@ const thresholdNames = {
 };
 function useIntersectionObserver(shouldObserve, state, visualElement, { root, margin: rootMargin, amount = "some", once }) {
     useEffect(() => {
-        if (!shouldObserve)
+        if (!shouldObserve || !visualElement.current)
             return;
         const options = {
             root: root === null || root === void 0 ? void 0 : root.current,
@@ -61,7 +61,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
                 : props.onViewportLeave;
             callback && callback(entry);
         };
-        return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
+        return observeIntersection(visualElement.current, options, intersectionCallback);
     }, [shouldObserve, root, rootMargin, amount]);
 }
 /**

package/dist/es/motion/utils/use-visual-element.mjs

@@ -10,7 +10,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
     const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = useRef(undefined);
+    const visualElementRef = useRef();
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */
@@ -29,14 +29,14 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     }
     const visualElement = visualElementRef.current;
     useIsomorphicLayoutEffect(() => {
-        visualElement && visualElement.syncRender();
+        visualElement && visualElement.render();
     });
     useEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
     });
-    useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notifyUnmount(), []);
+    useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notify("Unmount"), []);
     return visualElement;
 }
 

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;
             }
@@ -151,12 +151,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 instance instanceof SVGElement && instance.tagName !== "svg";
             this.instance = instance;
             const { layoutId, layout, visualElement } = this.options;
-            if (visualElement && !visualElement.getInstance()) {
+            if (visualElement && !visualElement.current) {
                 visualElement.mount(instance);
             }
             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.notifyLayoutMeasure(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);
@@ -573,13 +579,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // TODO If this is unsuccessful this currently happens every frame
             if (!this.targetDelta && !this.relativeTarget) {
                 // TODO: This is a semi-repetition of further down this function, make DRY
-                this.relativeParent = this.getClosestProjectingParent();
-                if (this.relativeParent && this.relativeParent.layout) {
+                const relativeParent = this.getClosestProjectingParent();
+                if (relativeParent && relativeParent.layout) {
+                    this.relativeParent = relativeParent;
                     this.relativeTarget = createBox();
                     this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, this.relativeParent.layout.actual);
+                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
+                else {
+                    this.relativeParent = this.relativeTarget = undefined;
+                }
             }
             /**
              * If we have no relative target or no target delta our target isn't valid
@@ -608,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);
             }
@@ -619,24 +629,28 @@ 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.
              */
             if (this.attemptToResolveRelativeTarget) {
                 this.attemptToResolveRelativeTarget = false;
-                this.relativeParent = this.getClosestProjectingParent();
-                if (this.relativeParent &&
-                    Boolean(this.relativeParent.resumingFrom) ===
+                const relativeParent = this.getClosestProjectingParent();
+                if (relativeParent &&
+                    Boolean(relativeParent.resumingFrom) ===
                         Boolean(this.resumingFrom) &&
-                    !this.relativeParent.options.layoutScroll &&
-                    this.relativeParent.target) {
+                    !relativeParent.options.layoutScroll &&
+                    relativeParent.target) {
+                    this.relativeParent = relativeParent;
                     this.relativeTarget = createBox();
                     this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.target, this.relativeParent.target);
+                    calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
+                else {
+                    this.relativeParent = this.relativeTarget = undefined;
+                }
             }
         }
         getClosestProjectingParent() {
@@ -672,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.
@@ -749,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) {
@@ -833,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;
             }
@@ -852,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);
@@ -935,7 +949,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 return;
             // Force a render of this element to apply the transform with all rotations
             // set to 0.
-            visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
+            visualElement === null || visualElement === void 0 ? void 0 : visualElement.render();
             // Put back all the values we reset
             for (const key in resetValues) {
                 visualElement.setStaticValue(key, resetValues[key]);
@@ -1008,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 =
@@ -1072,53 +1086,53 @@ 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;
         if (!node.resumeFrom) {
-            node.relativeParent = node.getClosestProjectingParent();
+            const relativeParent = node.getClosestProjectingParent();
             /**
              * If the relativeParent is itself resuming from a different element then
              * the relative snapshot is not relavent
              */
-            if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                const { snapshot: parentSnapshot, layout: parentLayout } = node.relativeParent;
+            if (relativeParent && !relativeParent.resumeFrom) {
+                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;
                     }
@@ -1153,7 +1167,7 @@ function clearMeasurements(node) {
 function resetTransformStyle(node) {
     const { visualElement } = node.options;
     if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
-        visualElement.notifyBeforeLayoutMeasure();
+        visualElement.notify("BeforeLayoutMeasure");
     }
     node.resetTransform();
 }