framer-motion 8.4.7 → 8.5.2-alpha.0

package/dist/cjs/index.js

@@ -850,6 +850,8 @@ const validMotionProps = new Set([
     "layout",
     "layoutId",
     "layoutDependency",
+    "layoutScroll",
+    "layoutRoot",
     "onLayoutAnimationStart",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
@@ -877,7 +879,6 @@ const validMotionProps = new Set([
     "dragTransition",
     "onHoverStart",
     "onHoverEnd",
-    "layoutScroll",
     ...inViewProps,
     ...tapProps,
     ...animationProps,
@@ -2104,7 +2105,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 = "8.4.7";
+        this.version = "8.5.2-alpha.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2803,8 +2804,21 @@ const appearStoreId = (id, value) => `${id}: ${value}`;
 function handoffOptimizedAppearAnimation(id, name, value) {
     const { MotionAppearAnimations } = window;
     const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
-    const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
-    if (animation) {
+    const { animation, ready } = (MotionAppearAnimations && MotionAppearAnimations.get(animationId)) ||
+        {};
+    if (!animation)
+        return 0;
+    const cancelOptimisedAnimation = () => {
+        MotionAppearAnimations.delete(animationId);
+        /**
+         * Animation.cancel() throws so it needs to be wrapped in a try/catch
+         */
+        try {
+            animation.cancel();
+        }
+        catch (e) { }
+    };
+    if (ready) {
         const sampledTime = performance.now();
         /**
          * Resync handoff animation with optimised animation.
@@ -2829,19 +2843,12 @@ function handoffOptimizedAppearAnimation(id, name, value) {
          *   2. As all independent transforms share a single transform animation, stopping
          *      it synchronously would prevent subsequent transforms from handing off.
          */
-        sync.render(() => {
-            MotionAppearAnimations.delete(animationId);
-            /**
-             * Animation.cancel() throws so it needs to be wrapped in a try/catch
-             */
-            try {
-                animation.cancel();
-            }
-            catch (e) { }
-        });
+        sync.render(cancelOptimisedAnimation);
+        console.log(animation.currentTime);
         return animation.currentTime || 0;
     }
     else {
+        cancelOptimisedAnimation();
         return 0;
     }
 }
@@ -3383,7 +3390,7 @@ const velocitySampleDuration = 5;
 /**
  * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
  */
-function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
+function spring({ keyframes, restDelta, restSpeed, ...options }) {
     let origin = keyframes[0];
     let target = keyframes[keyframes.length - 1];
     /**
@@ -3399,12 +3406,15 @@ function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
         const initialDelta = target - origin;
         const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
         /**
-         * If we're working within what looks like a 0-1 range, change the default restDelta
-         * to 0.01
+         * If we're working on a granular scale, use smaller defaults for determining
+         * when the spring is finished.
+         *
+         * These defaults have been selected emprically based on what strikes a good
+         * ratio between feeling good and finishing as soon as changes are imperceptible.
          */
-        if (restDelta === undefined) {
-            restDelta = Math.min(Math.abs(target - origin) / 100, 0.4);
-        }
+        const isGranularScale = Math.abs(initialDelta) < 5;
+        restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
+        restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
         if (dampingRatio < 1) {
             const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
             // Underdamped spring
@@ -5997,7 +6007,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.4.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.7 may not work as expected.`);
+                warnOnce(nextValue.version === "8.5.2-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.2-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6255,7 +6265,7 @@ class VisualElement {
         }
         if (!this.projection && ProjectionNodeConstructor) {
             this.projection = new ProjectionNodeConstructor(projectionId, this.latestValues, this.parent && this.parent.projection);
-            const { layoutId, layout, drag, dragConstraints, layoutScroll } = renderedProps;
+            const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
             this.projection.setOptions({
                 layoutId,
                 layout,
@@ -6273,6 +6283,7 @@ class VisualElement {
                 animationType: typeof layout === "string" ? layout : "both",
                 initialPromotionConfig: initialLayoutGroupConfig,
                 layoutScroll,
+                layoutRoot,
             });
         }
         return features;
@@ -7413,7 +7424,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                      * relative to its parent has indeed changed. So here we check for that.
                      */
                     const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
-                    if (((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
+                    if (this.options.layoutRoot ||
+                        ((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
                         hasOnlyRelativeTargetChanged ||
                         (hasLayoutChanged &&
                             (targetChanged || !this.currentAnimation))) {
@@ -7427,7 +7439,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             onPlay: onLayoutAnimationStart,
                             onComplete: onLayoutAnimationComplete,
                         };
-                        if (visualElement.shouldReduceMotion) {
+                        if (visualElement.shouldReduceMotion ||
+                            this.options.layoutRoot) {
                             animationOptions.delay = 0;
                             animationOptions.type = false;
                         }
@@ -7483,6 +7496,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
             this.animationId++;
         }
+        getTransformTemplate() {
+            var _a;
+            return (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+        }
         willUpdate(shouldNotifyListeners = true) {
             var _a, _b, _c;
             if (this.root.isUpdateBlocked()) {
@@ -7497,12 +7514,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 const node = this.path[i];
                 node.shouldResetTransform = true;
                 node.updateScroll("snapshot");
+                if (node.options.layoutRoot) {
+                    node.willUpdate(false);
+                }
             }
             const { layoutId, layout } = this.options;
             if (layoutId === undefined && !layout)
                 return;
-            const transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
-            this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            this.prevTransformTemplateValue = (_c = this.getTransformTemplate()) === null || _c === void 0 ? void 0 : _c(this.latestValues, "");
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
         }
@@ -7634,8 +7653,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 return;
             const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
             const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
-            const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
-            const transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            const transformTemplateValue = (_a = this.getTransformTemplate()) === null || _a === void 0 ? void 0 : _a(this.latestValues, "");
             const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
             if (isResetRequested &&
                 (hasProjection ||
@@ -7890,9 +7908,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         getClosestProjectingParent() {
             if (!this.parent ||
                 hasScale(this.parent.latestValues) ||
-                has2DTranslate(this.parent.latestValues))
+                has2DTranslate(this.parent.latestValues)) {
                 return undefined;
-            if ((this.parent.relativeTarget || this.parent.targetDelta) &&
+            }
+            if ((this.parent.relativeTarget ||
+                this.parent.targetDelta ||
+                this.parent.options.layoutRoot) &&
                 this.parent.layout) {
                 return this.parent;
             }
@@ -7987,7 +8008,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
             const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
-            this.relativeTarget = this.relativeTargetOrigin = undefined;
+            if (!this.relativeParent ||
+                !this.relativeParent.options.layoutRoot) {
+                this.relativeTarget = this.relativeTargetOrigin = undefined;
+            }
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
             const relativeLayout = createBox();
             const isSharedLayoutAnimation = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.source) !== ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.source);
@@ -8018,7 +8042,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
                 this.animationProgress = progress;
             };
-            this.mixTargetDelta(0);
+            this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
         }
         startAnimation(options) {
             var _a, _b;
@@ -8208,7 +8232,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp = {}) {
-            var _a, _b, _c;
+            var _a, _b;
             // TODO: Return lifecycle-persistent object
             const styles = {};
             if (!this.instance || this.isSVG)
@@ -8219,7 +8243,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             else {
                 styles.visibility = "";
             }
-            const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            const transformTemplate = this.getTransformTemplate();
             if (this.needsReset) {
                 this.needsReset = false;
                 styles.opacity = "";
@@ -8264,7 +8288,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 styles.opacity =
                     lead === this
-                        ? (_c = (_b = valuesToRender.opacity) !== null && _b !== void 0 ? _b : this.latestValues.opacity) !== null && _c !== void 0 ? _c : 1
+                        ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
                         : this.preserveOpacity
                             ? this.latestValues.opacity
                             : valuesToRender.opacityExit;
@@ -8394,6 +8418,11 @@ function notifyLayoutUpdate(node) {
                     if (!boxEquals(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true;
                     }
+                    if (relativeParent.options.layoutRoot) {
+                        node.relativeTarget = relativeLayout;
+                        node.relativeTargetOrigin = relativeSnapshot;
+                        node.relativeParent = relativeParent;
+                    }
                 }
             }
         }
@@ -9840,14 +9869,37 @@ function useResetProjection() {
     return reset;
 }
 
-function startOptimizedAppearAnimation(element, name, keyframes, options) {
+function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
     window.MotionAppearAnimations || (window.MotionAppearAnimations = new Map());
     const id = element.dataset[optimizedAppearDataId];
-    const animation = animateStyle(element, name, keyframes, options);
-    if (id && animation) {
-        window.MotionAppearAnimations.set(appearStoreId(id, name), animation);
+    if (!id)
+        return;
+    const storeId = appearStoreId(id, name);
+    /**
+     * Use a dummy animation to detect when Chrome is ready to start
+     * painting the page and hold off from triggering the real animation
+     * until then.
+     */
+    const readyAnimation = animateStyle(element, name, [keyframes[0], keyframes[0]], { duration: 1 });
+    window.MotionAppearAnimations.set(storeId, {
+        animation: readyAnimation,
+        ready: false,
+    });
+    const startAnimation = () => {
+        const animation = animateStyle(element, name, keyframes, options);
+        window.MotionAppearAnimations.set(storeId, { animation, ready: true });
+        if (onReady)
+            onReady(animation);
+    };
+    if (readyAnimation.ready) {
+        readyAnimation.ready.then(() => {
+            readyAnimation.cancel();
+            startAnimation();
+        });
+    }
+    else {
+        startAnimation();
     }
-    return animation;
 }
 
 const createObject = () => ({});

package/dist/es/animation/legacy-popmotion/spring.mjs

@@ -33,7 +33,7 @@ const velocitySampleDuration = 5;
 /**
  * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
  */
-function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
+function spring({ keyframes, restDelta, restSpeed, ...options }) {
     let origin = keyframes[0];
     let target = keyframes[keyframes.length - 1];
     /**
@@ -49,12 +49,15 @@ function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
         const initialDelta = target - origin;
         const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
         /**
-         * If we're working within what looks like a 0-1 range, change the default restDelta
-         * to 0.01
+         * If we're working on a granular scale, use smaller defaults for determining
+         * when the spring is finished.
+         *
+         * These defaults have been selected emprically based on what strikes a good
+         * ratio between feeling good and finishing as soon as changes are imperceptible.
          */
-        if (restDelta === undefined) {
-            restDelta = Math.min(Math.abs(target - origin) / 100, 0.4);
-        }
+        const isGranularScale = Math.abs(initialDelta) < 5;
+        restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
+        restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
         if (dampingRatio < 1) {
             const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
             // Underdamped spring

package/dist/es/animation/optimized-appear/handoff.mjs

@@ -5,8 +5,21 @@ import { appearStoreId } from './store-id.mjs';
 function handoffOptimizedAppearAnimation(id, name, value) {
     const { MotionAppearAnimations } = window;
     const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
-    const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
-    if (animation) {
+    const { animation, ready } = (MotionAppearAnimations && MotionAppearAnimations.get(animationId)) ||
+        {};
+    if (!animation)
+        return 0;
+    const cancelOptimisedAnimation = () => {
+        MotionAppearAnimations.delete(animationId);
+        /**
+         * Animation.cancel() throws so it needs to be wrapped in a try/catch
+         */
+        try {
+            animation.cancel();
+        }
+        catch (e) { }
+    };
+    if (ready) {
         const sampledTime = performance.now();
         /**
          * Resync handoff animation with optimised animation.
@@ -31,19 +44,12 @@ function handoffOptimizedAppearAnimation(id, name, value) {
          *   2. As all independent transforms share a single transform animation, stopping
          *      it synchronously would prevent subsequent transforms from handing off.
          */
-        sync.render(() => {
-            MotionAppearAnimations.delete(animationId);
-            /**
-             * Animation.cancel() throws so it needs to be wrapped in a try/catch
-             */
-            try {
-                animation.cancel();
-            }
-            catch (e) { }
-        });
+        sync.render(cancelOptimisedAnimation);
+        console.log(animation.currentTime);
         return animation.currentTime || 0;
     }
     else {
+        cancelOptimisedAnimation();
         return 0;
     }
 }

package/dist/es/animation/optimized-appear/start.mjs

@@ -2,14 +2,37 @@ import { appearStoreId } from './store-id.mjs';
 import { animateStyle } from '../waapi/index.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 
-function startOptimizedAppearAnimation(element, name, keyframes, options) {
+function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
     window.MotionAppearAnimations || (window.MotionAppearAnimations = new Map());
     const id = element.dataset[optimizedAppearDataId];
-    const animation = animateStyle(element, name, keyframes, options);
-    if (id && animation) {
-        window.MotionAppearAnimations.set(appearStoreId(id, name), animation);
+    if (!id)
+        return;
+    const storeId = appearStoreId(id, name);
+    /**
+     * Use a dummy animation to detect when Chrome is ready to start
+     * painting the page and hold off from triggering the real animation
+     * until then.
+     */
+    const readyAnimation = animateStyle(element, name, [keyframes[0], keyframes[0]], { duration: 1 });
+    window.MotionAppearAnimations.set(storeId, {
+        animation: readyAnimation,
+        ready: false,
+    });
+    const startAnimation = () => {
+        const animation = animateStyle(element, name, keyframes, options);
+        window.MotionAppearAnimations.set(storeId, { animation, ready: true });
+        if (onReady)
+            onReady(animation);
+    };
+    if (readyAnimation.ready) {
+        readyAnimation.ready.then(() => {
+            readyAnimation.cancel();
+            startAnimation();
+        });
+    }
+    else {
+        startAnimation();
     }
-    return animation;
 }
 
 export { startOptimizedAppearAnimation };

package/dist/es/motion/utils/valid-prop.mjs

@@ -35,6 +35,8 @@ const validMotionProps = new Set([
     "layout",
     "layoutId",
     "layoutDependency",
+    "layoutScroll",
+    "layoutRoot",
     "onLayoutAnimationStart",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
@@ -62,7 +64,6 @@ const validMotionProps = new Set([
     "dragTransition",
     "onHoverStart",
     "onHoverEnd",
-    "layoutScroll",
     ...inViewProps,
     ...tapProps,
     ...animationProps,

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

@@ -224,7 +224,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                      * relative to its parent has indeed changed. So here we check for that.
                      */
                     const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
-                    if (((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
+                    if (this.options.layoutRoot ||
+                        ((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
                         hasOnlyRelativeTargetChanged ||
                         (hasLayoutChanged &&
                             (targetChanged || !this.currentAnimation))) {
@@ -238,7 +239,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             onPlay: onLayoutAnimationStart,
                             onComplete: onLayoutAnimationComplete,
                         };
-                        if (visualElement.shouldReduceMotion) {
+                        if (visualElement.shouldReduceMotion ||
+                            this.options.layoutRoot) {
                             animationOptions.delay = 0;
                             animationOptions.type = false;
                         }
@@ -294,6 +296,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
             this.animationId++;
         }
+        getTransformTemplate() {
+            var _a;
+            return (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+        }
         willUpdate(shouldNotifyListeners = true) {
             var _a, _b, _c;
             if (this.root.isUpdateBlocked()) {
@@ -308,12 +314,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 const node = this.path[i];
                 node.shouldResetTransform = true;
                 node.updateScroll("snapshot");
+                if (node.options.layoutRoot) {
+                    node.willUpdate(false);
+                }
             }
             const { layoutId, layout } = this.options;
             if (layoutId === undefined && !layout)
                 return;
-            const transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
-            this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            this.prevTransformTemplateValue = (_c = this.getTransformTemplate()) === null || _c === void 0 ? void 0 : _c(this.latestValues, "");
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
         }
@@ -445,8 +453,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 return;
             const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
             const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
-            const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
-            const transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            const transformTemplateValue = (_a = this.getTransformTemplate()) === null || _a === void 0 ? void 0 : _a(this.latestValues, "");
             const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
             if (isResetRequested &&
                 (hasProjection ||
@@ -701,9 +708,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         getClosestProjectingParent() {
             if (!this.parent ||
                 hasScale(this.parent.latestValues) ||
-                has2DTranslate(this.parent.latestValues))
+                has2DTranslate(this.parent.latestValues)) {
                 return undefined;
-            if ((this.parent.relativeTarget || this.parent.targetDelta) &&
+            }
+            if ((this.parent.relativeTarget ||
+                this.parent.targetDelta ||
+                this.parent.options.layoutRoot) &&
                 this.parent.layout) {
                 return this.parent;
             }
@@ -798,7 +808,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
             const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
-            this.relativeTarget = this.relativeTargetOrigin = undefined;
+            if (!this.relativeParent ||
+                !this.relativeParent.options.layoutRoot) {
+                this.relativeTarget = this.relativeTargetOrigin = undefined;
+            }
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
             const relativeLayout = createBox();
             const isSharedLayoutAnimation = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.source) !== ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.source);
@@ -829,7 +842,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
                 this.animationProgress = progress;
             };
-            this.mixTargetDelta(0);
+            this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
         }
         startAnimation(options) {
             var _a, _b;
@@ -1019,7 +1032,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp = {}) {
-            var _a, _b, _c;
+            var _a, _b;
             // TODO: Return lifecycle-persistent object
             const styles = {};
             if (!this.instance || this.isSVG)
@@ -1030,7 +1043,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             else {
                 styles.visibility = "";
             }
-            const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            const transformTemplate = this.getTransformTemplate();
             if (this.needsReset) {
                 this.needsReset = false;
                 styles.opacity = "";
@@ -1075,7 +1088,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 styles.opacity =
                     lead === this
-                        ? (_c = (_b = valuesToRender.opacity) !== null && _b !== void 0 ? _b : this.latestValues.opacity) !== null && _c !== void 0 ? _c : 1
+                        ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
                         : this.preserveOpacity
                             ? this.latestValues.opacity
                             : valuesToRender.opacityExit;
@@ -1205,6 +1218,11 @@ function notifyLayoutUpdate(node) {
                     if (!boxEquals(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true;
                     }
+                    if (relativeParent.options.layoutRoot) {
+                        node.relativeTarget = relativeLayout;
+                        node.relativeTargetOrigin = relativeSnapshot;
+                        node.relativeParent = relativeParent;
+                    }
                 }
             }
         }

package/dist/es/render/VisualElement.mjs

@@ -238,7 +238,7 @@ class VisualElement {
         }
         if (!this.projection && ProjectionNodeConstructor) {
             this.projection = new ProjectionNodeConstructor(projectionId, this.latestValues, this.parent && this.parent.projection);
-            const { layoutId, layout, drag, dragConstraints, layoutScroll } = renderedProps;
+            const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
             this.projection.setOptions({
                 layoutId,
                 layout,
@@ -256,6 +256,7 @@ class VisualElement {
                 animationType: typeof layout === "string" ? layout : "both",
                 initialPromotionConfig: initialLayoutGroupConfig,
                 layoutScroll,
+                layoutRoot,
             });
         }
         return features;

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 === "8.4.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.7 may not work as expected.`);
+                warnOnce(nextValue.version === "8.5.2-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.2-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "8.4.7";
+        this.version = "8.5.2-alpha.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *