framer-motion 7.2.0 → 7.3.1

package/dist/es/motion/features/viewport/observers.mjs

@@ -1,5 +1,3 @@
-import { __rest } from 'tslib';
-
 /**
  * Map an IntersectionHandler callback to an element. We only ever make one handler for one
  * element, so even though these handlers might all be triggered by different
@@ -13,14 +11,13 @@ const observerCallbacks = new WeakMap();
  */
 const observers = new WeakMap();
 const fireObserverCallback = (entry) => {
-    var _a;
-    (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);
+    const callback = observerCallbacks.get(entry.target);
+    callback && callback(entry);
 };
 const fireAllObserverCallbacks = (entries) => {
     entries.forEach(fireObserverCallback);
 };
-function initIntersectionObserver(_a) {
-    var { root } = _a, options = __rest(_a, ["root"]);
+function initIntersectionObserver({ root, ...options }) {
     const lookupRoot = root || document;
     /**
      * If we don't have an observer lookup map for this root, create one.
@@ -35,7 +32,7 @@ function initIntersectionObserver(_a) {
      * create one.
      */
     if (!rootObservers[key]) {
-        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, Object.assign({ root }, options));
+        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
     }
     return rootObservers[key];
 }

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

@@ -31,7 +31,6 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
             threshold: typeof amount === "number" ? amount : thresholdNames[amount],
         };
         const intersectionCallback = (entry) => {
-            var _a;
             const { isIntersecting } = entry;
             /**
              * If there's been no change in the viewport state, early return.
@@ -49,7 +48,9 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
             else if (isIntersecting) {
                 state.hasEnteredView = true;
             }
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, isIntersecting);
+            if (visualElement.animationState) {
+                visualElement.animationState.setActive(AnimationType.InView, isIntersecting);
+            }
             /**
              * Use the latest committed props rather than the ones in scope
              * when this observer is created
@@ -58,7 +59,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
             const callback = isIntersecting
                 ? props.onViewportEnter
                 : props.onViewportLeave;
-            callback === null || callback === void 0 ? void 0 : callback(entry);
+            callback && callback(entry);
         };
         return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
     }, [shouldObserve, root, rootMargin, amount]);
@@ -84,11 +85,12 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, { f
          * is preferred to changing the behaviour of the animation state.
          */
         requestAnimationFrame(() => {
-            var _a;
             state.hasEnteredView = true;
             const { onViewportEnter } = visualElement.getProps();
-            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
+            onViewportEnter && onViewportEnter(null);
+            if (visualElement.animationState) {
+                visualElement.animationState.setActive(AnimationType.InView, true);
+            }
         });
     }, [shouldObserve]);
 }

package/dist/es/motion/index.mjs

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { forwardRef, useContext } from 'react';
-import { useFeatures } from './features/use-features.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { MotionContext } from '../context/MotionContext/index.mjs';
 import { useVisualElement } from './utils/use-visual-element.mjs';
 import { useMotionRef } from './utils/use-motion-ref.mjs';
 import { useCreateMotionContext } from '../context/MotionContext/create.mjs';
-import { loadFeatures, featureDefinitions } from './features/definitions.mjs';
+import { featureDefinitions } from './features/definitions.mjs';
+import { loadFeatures } from './features/load-features.mjs';
 import { isBrowser } from '../utils/is-browser.mjs';
 import { useProjectionId } from '../projection/node/id.mjs';
 import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
-import { useProjection } from './features/use-projection.mjs';
 import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
+import { LazyContext } from '../context/LazyContext.mjs';
+import { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';
 
 /**
  * Create a `motion` component.
@@ -25,15 +26,12 @@ import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
 function createMotionComponent({ preloadedFeatures, createVisualElement, projectionNodeConstructor, useRender, useVisualState, Component, }) {
     preloadedFeatures && loadFeatures(preloadedFeatures);
     function MotionComponent(props, externalRef) {
-        const layoutId = useLayoutId(props);
-        props = Object.assign(Object.assign({}, props), { layoutId });
-        /**
-         * If we're rendering in a static environment, we only visually update the component
-         * as a result of a React-rerender rather than interactions or animations. This
-         * means we don't need to load additional memory structures like VisualElement,
-         * or any gesture/animation features.
-         */
-        const config = useContext(MotionConfigContext);
+        const configAndProps = {
+            ...useContext(MotionConfigContext),
+            ...props,
+            layoutId: useLayoutId(props),
+        };
+        const { isStatic } = configAndProps;
         let features = null;
         const context = useCreateMotionContext(props);
         /**
@@ -47,40 +45,42 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
          * shared element transitions however. Perhaps for those we could revert to a root node
          * that gets forceRendered and layout animations are triggered on its layout effect.
          */
-        const projectionId = config.isStatic ? undefined : useProjectionId();
+        const projectionId = isStatic ? undefined : useProjectionId();
         /**
          *
          */
-        const visualState = useVisualState(props, config.isStatic);
-        if (!config.isStatic && isBrowser) {
+        const visualState = useVisualState(props, isStatic);
+        if (!isStatic && isBrowser) {
             /**
              * Create a VisualElement for this component. A VisualElement provides a common
              * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
              * providing a way of rendering to these APIs outside of the React render loop
              * for more performant animations and interactions
              */
-            context.visualElement = useVisualElement(Component, visualState, Object.assign(Object.assign({}, config), props), createVisualElement);
-            useProjection(projectionId, props, context.visualElement, projectionNodeConstructor ||
-                featureDefinitions.projectionNodeConstructor);
+            context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
             /**
              * Load Motion gesture and animation features. These are rendered as renderless
              * components so each feature can optionally make use of React lifecycle methods.
              */
-            features = useFeatures(props, context.visualElement, preloadedFeatures);
+            const lazyStrictMode = useContext(LazyContext).strict;
+            const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
+            if (context.visualElement) {
+                features = context.visualElement.loadFeatures(props, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                    featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
+            }
         }
         /**
          * The mount order and hierarchy is specific to ensure our element ref
          * is hydrated by the time features fire their effects.
          */
-        return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: Object.assign(Object.assign({}, config), props) },
+        return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: configAndProps },
             features,
-            React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
+            React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
     }
     return forwardRef(MotionComponent);
 }
 function useLayoutId({ layoutId }) {
-    var _a;
-    const layoutGroupId = (_a = useContext(LayoutGroupContext)) === null || _a === void 0 ? void 0 : _a.id;
+    const layoutGroupId = useContext(LayoutGroupContext).id;
     return layoutGroupId && layoutId !== undefined
         ? layoutGroupId + "-" + layoutId
         : layoutId;

package/dist/es/motion/utils/VisualElementHandler.mjs

@@ -5,15 +5,12 @@ class VisualElementHandler extends React__default.Component {
      * Update visual element props as soon as we know this update is going to be commited.
      */
     getSnapshotBeforeUpdate() {
-        this.updateProps();
-        return null;
-    }
-    componentDidUpdate() { }
-    updateProps() {
         const { visualElement, props } = this.props;
         if (visualElement)
             visualElement.setProps(props);
+        return null;
     }
+    componentDidUpdate() { }
     render() {
         return this.props.children;
     }

package/dist/es/motion/utils/is-forced-motion-value.mjs

@@ -1,9 +1,9 @@
 import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';
-import { isTransformProp, isTransformOriginProp } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/transform.mjs';
 
 function isForcedMotionValue(key, { layout, layoutId }) {
-    return (isTransformProp(key) ||
-        isTransformOriginProp(key) ||
+    return (transformProps.has(key) ||
+        key.startsWith("origin") ||
         ((layout || layoutId !== undefined) &&
             (!!scaleCorrectors[key] || key === "opacity")));
 }

package/dist/es/motion/utils/use-motion-ref.mjs

@@ -7,8 +7,7 @@ import { isRefObject } from '../../utils/is-ref-object.mjs';
  */
 function useMotionRef(visualState, visualElement, externalRef) {
     return useCallback((instance) => {
-        var _a;
-        instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
+        instance && visualState.mount && visualState.mount(instance);
         if (visualElement) {
             instance
                 ? visualElement.mount(instance)

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

@@ -3,38 +3,40 @@ import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';
-import { useReducedMotionConfig } from '../../utils/use-reduced-motion.mjs';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement) {
-    const lazyContext = useContext(LazyContext);
     const parent = useVisualElementContext();
+    const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
-    const shouldReduceMotion = useReducedMotionConfig();
+    const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;
     const visualElementRef = useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */
-    if (!createVisualElement)
-        createVisualElement = lazyContext.renderer;
+    createVisualElement = createVisualElement || lazyContext.renderer;
     if (!visualElementRef.current && createVisualElement) {
         visualElementRef.current = createVisualElement(Component, {
             visualState,
             parent,
             props,
-            presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
-            blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
-            shouldReduceMotion,
+            presenceId: presenceContext ? presenceContext.id : undefined,
+            blockInitialAnimation: presenceContext
+                ? presenceContext.initial === false
+                : false,
+            reducedMotionConfig,
         });
     }
     const visualElement = visualElementRef.current;
     useIsomorphicLayoutEffect(() => {
-        visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
+        visualElement && visualElement.syncRender();
     });
     useEffect(() => {
-        var _a;
-        (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();
+        if (visualElement && visualElement.animationState) {
+            visualElement.animationState.animateChanges();
+        }
     });
-    useIsomorphicLayoutEffect(() => () => visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(), []);
+    useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notifyUnmount(), []);
     return visualElement;
 }
 

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

@@ -1,11 +1,11 @@
-import { __rest } from 'tslib';
 import { useContext } from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { checkIfControllingVariants, checkIfVariantNode, resolveVariantFromProps } from '../../render/utils/variants.mjs';
+import { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { MotionContext } from '../../context/MotionContext/index.mjs';
+import { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';
 
 function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
     const state = {
@@ -20,29 +20,32 @@ function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, },
 const makeUseVisualState = (config) => (props, isStatic) => {
     const context = useContext(MotionContext);
     const presenceContext = useContext(PresenceContext);
-    return isStatic
-        ? makeState(config, props, context, presenceContext)
-        : useConstant(() => makeState(config, props, context, presenceContext));
+    const make = () => makeState(config, props, context, presenceContext);
+    return isStatic ? make() : useConstant(make);
 };
 function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     const values = {};
-    const blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;
     const motionValues = scrapeMotionValues(props);
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
     }
     let { initial, animate } = props;
-    const isControllingVariants = checkIfControllingVariants(props);
-    const isVariantNode = checkIfVariantNode(props);
+    const isControllingVariants$1 = isControllingVariants(props);
+    const isVariantNode$1 = isVariantNode(props);
     if (context &&
-        isVariantNode &&
-        !isControllingVariants &&
+        isVariantNode$1 &&
+        !isControllingVariants$1 &&
         props.inherit !== false) {
-        initial !== null && initial !== void 0 ? initial : (initial = context.initial);
-        animate !== null && animate !== void 0 ? animate : (animate = context.animate);
+        if (initial === undefined)
+            initial = context.initial;
+        if (animate === undefined)
+            animate = context.animate;
     }
-    const initialAnimationIsBlocked = blockInitialAnimation || initial === false;
-    const variantToSet = initialAnimationIsBlocked ? animate : initial;
+    let isInitialAnimationBlocked = presenceContext
+        ? presenceContext.initial === false
+        : false;
+    isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
+    const variantToSet = isInitialAnimationBlocked ? animate : initial;
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
         !isAnimationControls(variantToSet)) {
@@ -51,7 +54,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             const resolved = resolveVariantFromProps(props, definition);
             if (!resolved)
                 return;
-            const { transitionEnd, transition } = resolved, target = __rest(resolved, ["transitionEnd", "transition"]);
+            const { transitionEnd, transition, ...target } = resolved;
             for (const key in target) {
                 let valueTarget = target[key];
                 if (Array.isArray(valueTarget)) {
@@ -59,7 +62,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
                      * Take final keyframe if the initial animation is blocked because
                      * we want to initialise at the end of that blocked animation.
                      */
-                    const index = initialAnimationIsBlocked
+                    const index = isInitialAnimationBlocked
                         ? valueTarget.length - 1
                         : 0;
                     valueTarget = valueTarget[index];

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

@@ -1,3 +1,21 @@
+const animationProps = [
+    "animate",
+    "exit",
+    "variants",
+    "whileHover",
+    "whileTap",
+    "whileFocus",
+    "whileDrag",
+    "whileInView",
+];
+const tapProps = ["whileTap", "onTap", "onTapStart", "onTapCancel"];
+const panProps = ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"];
+const inViewProps = [
+    "whileInView",
+    "onViewportEnter",
+    "onViewportLeave",
+    "viewport",
+];
 /**
  * A list of all valid MotionProps.
  *
@@ -6,8 +24,6 @@
  */
 const validMotionProps = new Set([
     "initial",
-    "animate",
-    "exit",
     "style",
     "variants",
     "transition",
@@ -43,24 +59,13 @@ const validMotionProps = new Set([
     "dragMomentum",
     "dragPropagation",
     "dragTransition",
-    "whileDrag",
-    "onPan",
-    "onPanStart",
-    "onPanEnd",
-    "onPanSessionStart",
-    "onTap",
-    "onTapStart",
-    "onTapCancel",
     "onHoverStart",
     "onHoverEnd",
-    "whileFocus",
-    "whileTap",
-    "whileHover",
-    "whileInView",
-    "onViewportEnter",
-    "onViewportLeave",
-    "viewport",
     "layoutScroll",
+    ...inViewProps,
+    ...tapProps,
+    ...animationProps,
+    ...panProps,
 ]);
 /**
  * Check whether a prop name is a valid `MotionProp` key.

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

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

package/dist/es/projection/node/HTMLProjectionNode.mjs

@@ -19,7 +19,7 @@ const HTMLProjectionNode = createProjectionNode({
         return rootProjectionNode.current;
     },
     resetTransform: (instance, value) => {
-        instance.style.transform = value !== null && value !== void 0 ? value : "none";
+        instance.style.transform = value !== undefined ? value : "none";
     },
     checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
 });

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

@@ -9,17 +9,17 @@ import { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength } from
 import { removeBoxTransforms } from '../geometry/delta-remove.mjs';
 import { createBox, createDelta } from '../geometry/models.mjs';
 import { getValueTransition } from '../../animation/utils/transitions.mjs';
-import { boxEquals, isDeltaZero } from '../geometry/utils.mjs';
+import { boxEquals, isDeltaZero, isCloseTo, aspectRatio } from '../geometry/utils.mjs';
 import { NodeStack } from '../shared/stack.mjs';
 import { scaleCorrectors } from '../styles/scale-correction.mjs';
 import { buildProjectionTransform } from '../styles/transform.mjs';
 import { eachAxis } from '../utils/each-axis.mjs';
 import { hasTransform, hasScale } from '../utils/has-transform.mjs';
-import { transformAxes } from '../../render/html/utils/transform.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { globalProjectionState } from './state.mjs';
 
+const transformAxes = ["", "X", "Y", "Z"];
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
  * which has a noticeable difference in spring animations
@@ -211,7 +211,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             this.resumingFrom.resumingFrom = undefined;
                         }
                         this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        const animationOptions = Object.assign(Object.assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+                        const animationOptions = {
+                            ...getValueTransition(layoutTransition, "layout"),
+                            onPlay: onLayoutAnimationStart,
+                            onComplete: onLayoutAnimationComplete,
+                        };
                         if (visualElement.shouldReduceMotion) {
                             animationOptions.delay = 0;
                             animationOptions.type = false;
@@ -534,8 +538,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.root.scheduleUpdateProjection();
         }
         setOptions(options) {
-            var _a;
-            this.options = Object.assign(Object.assign(Object.assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
+            this.options = {
+                ...this.options,
+                ...options,
+                crossfade: options.crossfade !== undefined ? options.crossfade : true,
+            };
         }
         clearMeasurements() {
             this.scroll = undefined;
@@ -717,7 +724,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             var _a;
             const snapshot = this.snapshot;
             const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-            const mixedValues = Object.assign({}, this.latestValues);
+            const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
             this.relativeTarget = this.relativeTargetOrigin = undefined;
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
@@ -770,15 +777,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             this.pendingAnimation = sync.update(() => {
                 globalProjectionState.hasAnimatedSinceResize = true;
-                this.currentAnimation = animate(0, animationTarget, Object.assign(Object.assign({}, options), { onUpdate: (latest) => {
+                this.currentAnimation = animate(0, animationTarget, {
+                    ...options,
+                    onUpdate: (latest) => {
                         var _a;
                         this.mixTargetDelta(latest);
                         (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest);
-                    }, onComplete: () => {
+                    },
+                    onComplete: () => {
                         var _a;
                         (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
                         this.completeAnimation();
-                    } }));
+                    },
+                });
                 if (this.resumingFrom) {
                     this.resumingFrom.currentAnimation = this.currentAnimation;
                 }
@@ -807,9 +818,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.completeAnimation();
         }
         applyTransformsToTarget() {
-            const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+            const lead = this.getLead();
+            let { targetWithTransforms, target, layout, latestValues } = lead;
             if (!targetWithTransforms || !target || !layout)
                 return;
+            /**
+             * If we're only animating position, and this element isn't the lead element,
+             * then instead of projecting into the lead box we instead want to calculate
+             * a new target that aligns the two boxes but maintains the layout shape.
+             */
+            if (this !== lead &&
+                this.layout &&
+                layout &&
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                target = this.target || createBox();
+                const xLength = calcLength(this.layout.actual.x);
+                target.x.min = lead.target.x.min;
+                target.x.max = target.x.min + xLength;
+                const yLength = calcLength(this.layout.actual.y);
+                target.y.min = lead.target.y.min;
+                target.y.max = target.y.min + yLength;
+            }
             copyBoxInto(targetWithTransforms, target);
             /**
              * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -913,7 +942,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp = {}) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             // TODO: Return lifecycle-persistent object
             const styles = {};
             if (!this.instance || this.isSVG)
@@ -939,7 +968,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.projectionDelta || !this.layout || !lead.target) {
                 const emptyStyles = {};
                 if (this.options.layoutId) {
-                    emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1;
+                    emptyStyles.opacity =
+                        this.latestValues.opacity !== undefined
+                            ? this.latestValues.opacity
+                            : 1;
                     emptyStyles.pointerEvents =
                         resolveMotionValue(styleProp.pointerEvents) || "";
                 }
@@ -966,7 +998,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 styles.opacity =
                     lead === this
-                        ? (_d = (_c = valuesToRender.opacity) !== null && _c !== void 0 ? _c : this.latestValues.opacity) !== null && _d !== void 0 ? _d : 1
+                        ? (_c = (_b = valuesToRender.opacity) !== null && _b !== void 0 ? _b : this.latestValues.opacity) !== null && _c !== void 0 ? _c : 1
                         : this.preserveOpacity
                             ? this.latestValues.opacity
                             : valuesToRender.opacityExit;
@@ -978,8 +1010,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 styles.opacity =
                     lead === this
-                        ? (_e = valuesToRender.opacity) !== null && _e !== void 0 ? _e : ""
-                        : (_f = valuesToRender.opacityExit) !== null && _f !== void 0 ? _f : 0;
+                        ? valuesToRender.opacity !== undefined
+                            ? valuesToRender.opacity
+                            : ""
+                        : valuesToRender.opacityExit !== undefined
+                            ? valuesToRender.opacityExit
+                            : 0;
             }
             /**
              * Apply scale correction
@@ -1027,16 +1063,17 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a, _b, _c, _d;
-    const snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
+    var _a, _b, _c;
+    const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
         const { actual: layout, measured: measuredLayout } = node.layout;
+        const { animationType } = node.options;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
-        if (node.options.animationType === "size") {
+        if (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -1046,7 +1083,7 @@ function notifyLayoutUpdate(node) {
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (node.options.animationType === "position") {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -1095,7 +1132,7 @@ function notifyLayoutUpdate(node) {
         });
     }
     else if (node.isLead()) {
-        (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+        (_c = (_b = node.options).onExitComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
     /**
      * Clearing transition
@@ -1179,5 +1216,10 @@ function roundBox(box) {
     roundAxis(box.x);
     roundAxis(box.y);
 }
+function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+    return (animationType === "position" ||
+        (animationType === "preserve-aspect" &&
+            !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+}
 
 export { createProjectionNode, mixAxis, mixAxisDelta, mixBox };