framer-motion 9.0.2 → 9.0.3

package/dist/projection.dev.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}, global.React));
-})(this, (function (exports, react) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}));
+})(this, (function (exports) { 'use strict';
 
   /*
     Detect and load appropriate clock setting for the execution environment
@@ -1110,7 +1110,6 @@
       };
   };
   function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes: keyframes$1, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
-      var _a, _b;
       const initialElapsed = elapsed;
       let driverControls;
       let repeatCount = 0;
@@ -1122,7 +1121,12 @@
       const origin = keyframes$1[0];
       const target = keyframes$1[keyframes$1.length - 1];
       let state = { done: false, value: origin };
-      if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, origin, target)) {
+      /**
+       * If this value needs interpolation (ie is non-numerical), set up an interpolator.
+       * TODO: Keyframes animation also performs this step. This could be removed so it only happens here.
+       */
+      const { needsInterpolation } = animator;
+      if (needsInterpolation && needsInterpolation(origin, target)) {
           interpolateFromNumber = interpolate([0, 100], [origin, target], {
               clamp: false,
           });
@@ -1426,16 +1430,15 @@
           return Math.abs(min - v) < Math.abs(max - v) ? min : max;
       }
       function startAnimation(options) {
-          currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
+          currentAnimation && currentAnimation.stop();
           currentAnimation = animate$1({
               keyframes: [0, 1],
               velocity: 0,
               ...options,
               driver,
               onUpdate: (v) => {
-                  var _a;
-                  onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
-                  (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
+                  onUpdate && onUpdate(v);
+                  options.onUpdate && options.onUpdate(v);
               },
               onComplete,
               onStop,
@@ -1494,7 +1497,7 @@
           });
       }
       return {
-          stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
+          stop: () => currentAnimation && currentAnimation.stop(),
       };
   }
 
@@ -1696,12 +1699,13 @@
   const getDefaultValueType = (key) => defaultValueTypes[key];
 
   function getAnimatableNone(key, value) {
-      var _a;
       let defaultValueType = getDefaultValueType(key);
       if (defaultValueType !== filter)
           defaultValueType = complex;
       // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-      return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
+      return defaultValueType.getAnimatableNone
+          ? defaultValueType.getAnimatableNone(value)
+          : undefined;
   }
 
   /**
@@ -1841,14 +1845,12 @@
           if (options.repeatDelay) {
               options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
           }
-          const visualElement = value.owner;
-          const element = visualElement && visualElement.current;
           /**
            * Animate via WAAPI if possible.
            */
-          if (visualElement &&
-              element instanceof HTMLElement &&
-              !(visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onUpdate)) {
+          if (value.owner &&
+              value.owner.current instanceof HTMLElement &&
+              !value.owner.getProps().onUpdate) {
               const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
               if (acceleratedAnimation)
                   return acceleratedAnimation;
@@ -1929,7 +1931,7 @@
            * This will be replaced by the build step with the latest version number.
            * When MotionValues are provided to motion components, warn if versions are mixed.
            */
-          this.version = "9.0.2";
+          this.version = "9.0.3";
           /**
            * Duration, in milliseconds, since last updating frame.
            *
@@ -2229,7 +2231,7 @@
       return new MotionValue(init, options);
   }
 
-  const isMotionValue = (value) => !!(value === null || value === void 0 ? void 0 : value.getVelocity);
+  const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
   /**
    * Animate a single value or a `MotionValue`.
@@ -2433,7 +2435,6 @@
    * This is the final nested loop within updateLayoutDelta for future refactoring
    */
   function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
-      var _a, _b;
       const treeLength = treePath.length;
       if (!treeLength)
           return;
@@ -2444,8 +2445,16 @@
       for (let i = 0; i < treeLength; i++) {
           node = treePath[i];
           delta = node.projectionDelta;
-          if (((_b = (_a = node.instance) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === "contents")
+          /**
+           * TODO: Prefer to remove this, but currently we have motion components with
+           * display: contents in Framer.
+           */
+          const instance = node.instance;
+          if (instance &&
+              instance.style &&
+              instance.style.display === "contents") {
               continue;
+          }
           if (isSharedTransition &&
               node.options.layoutScroll &&
               node.scroll &&
@@ -2524,8 +2533,8 @@
           delta.translate = 0;
   }
   function calcBoxDelta(delta, source, target, origin) {
-      calcAxisDelta(delta.x, source.x, target.x, origin === null || origin === void 0 ? void 0 : origin.originX);
-      calcAxisDelta(delta.y, source.y, target.y, origin === null || origin === void 0 ? void 0 : origin.originY);
+      calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
+      calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
   }
   function calcRelativeAxis(target, relative, parent) {
       target.min = parent.min + relative.min;
@@ -2589,8 +2598,8 @@
    * and acts as a bridge between motion values and removeAxisDelta
    */
   function removeBoxTransforms(box, transforms, originBox, sourceBox) {
-      removeAxisTransforms(box.x, transforms, xKeys, originBox === null || originBox === void 0 ? void 0 : originBox.x, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.x);
-      removeAxisTransforms(box.y, transforms, yKeys, originBox === null || originBox === void 0 ? void 0 : originBox.y, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.y);
+      removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);
+      removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
   }
 
   const createAxisDelta = () => ({
@@ -2669,7 +2678,6 @@
           }
       }
       promote(node, preserveFollowOpacity) {
-          var _a;
           const prevLead = this.lead;
           if (node === prevLead)
               return;
@@ -2688,7 +2696,7 @@
                   node.snapshot.latestValues =
                       prevLead.animationValues || prevLead.latestValues;
               }
-              if ((_a = node.root) === null || _a === void 0 ? void 0 : _a.isUpdating) {
+              if (node.root && node.root.isUpdating) {
                   node.isLayoutDirty = true;
               }
               const { crossfade } = node.options;
@@ -2711,9 +2719,12 @@
       }
       exitAnimationComplete() {
           this.members.forEach((node) => {
-              var _a, _b, _c, _d, _e;
-              (_b = (_a = node.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
-              (_e = (_c = node.resumingFrom) === null || _c === void 0 ? void 0 : (_d = _c.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d);
+              const { options, resumingFrom } = node;
+              options.onExitComplete && options.onExitComplete();
+              if (resumingFrom) {
+                  resumingFrom.options.onExitComplete &&
+                      resumingFrom.options.onExitComplete();
+              }
           });
       }
       scheduleRender() {
@@ -2975,7 +2986,7 @@
           }
           notifyListeners(name, ...args) {
               const subscriptionManager = this.eventHandlers.get(name);
-              subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify(...args);
+              subscriptionManager && subscriptionManager.notify(...args);
           }
           hasListeners(name) {
               return this.eventHandlers.has(name);
@@ -2987,7 +2998,6 @@
            * Lifecycles
            */
           mount(instance, isLayoutDirty = false) {
-              var _a;
               if (this.instance)
                   return;
               this.isSVG =
@@ -2998,7 +3008,7 @@
                   visualElement.mount(instance);
               }
               this.root.nodes.add(this);
-              (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
+              this.parent && this.parent.children.add(this);
               this.elementId && this.root.potentialNodes.delete(this.elementId);
               if (isLayoutDirty && (layout || layoutId)) {
                   this.isLayoutDirty = true;
@@ -3024,14 +3034,15 @@
                   visualElement &&
                   (layoutId || layout)) {
                   this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
-                      var _a, _b, _c, _d, _e;
                       if (this.isTreeAnimationBlocked()) {
                           this.target = undefined;
                           this.relativeTarget = undefined;
                           return;
                       }
                       // TODO: Check here if an animation exists
-                      const layoutTransition = (_b = (_a = this.options.transition) !== null && _a !== void 0 ? _a : visualElement.getDefaultTransition()) !== null && _b !== void 0 ? _b : defaultLayoutTransition;
+                      const layoutTransition = this.options.transition ||
+                          visualElement.getDefaultTransition() ||
+                          defaultLayoutTransition;
                       const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
                       /**
                        * The target layout of the element might stay the same,
@@ -3047,7 +3058,7 @@
                        */
                       const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
                       if (this.options.layoutRoot ||
-                          ((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
+                          (this.resumeFrom && this.resumeFrom.instance) ||
                           hasOnlyRelativeTargetChanged ||
                           (hasLayoutChanged &&
                               (targetChanged || !this.currentAnimation))) {
@@ -3078,18 +3089,20 @@
                               this.animationProgress === 0) {
                               finishAnimation(this);
                           }
-                          this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
+                          if (this.isLead() && this.options.onExitComplete) {
+                              this.options.onExitComplete();
+                          }
                       }
                       this.targetLayout = newLayout;
                   });
               }
           }
           unmount() {
-              var _a, _b;
               this.options.layoutId && this.willUpdate();
               this.root.nodes.remove(this);
-              (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.remove(this);
-              (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this);
+              const stack = this.getStack();
+              stack && stack.remove(this);
+              this.parent && this.parent.children.delete(this);
               this.instance = undefined;
               cancelSync.preRender(this.updateProjection);
           }
@@ -3104,28 +3117,25 @@
               return this.updateManuallyBlocked || this.updateBlockedByResize;
           }
           isTreeAnimationBlocked() {
-              var _a;
               return (this.isAnimationBlocked ||
-                  ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimationBlocked()) ||
+                  (this.parent && this.parent.isTreeAnimationBlocked()) ||
                   false);
           }
           // Note: currently only running on root node
           startUpdate() {
-              var _a;
               if (this.isUpdateBlocked())
                   return;
               this.isUpdating = true;
-              (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
+              this.nodes && this.nodes.forEach(resetRotation);
               this.animationId++;
           }
           getTransformTemplate() {
-              var _a;
-              return (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+              const { visualElement } = this.options;
+              return visualElement && visualElement.getProps().transformTemplate;
           }
           willUpdate(shouldNotifyListeners = true) {
-              var _a, _b, _c;
               if (this.root.isUpdateBlocked()) {
-                  (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+                  this.options.onExitComplete && this.options.onExitComplete();
                   return;
               }
               !this.root.isUpdating && this.root.startUpdate();
@@ -3143,7 +3153,10 @@
               const { layoutId, layout } = this.options;
               if (layoutId === undefined && !layout)
                   return;
-              this.prevTransformTemplateValue = (_c = this.getTransformTemplate()) === null || _c === void 0 ? void 0 : _c(this.latestValues, "");
+              const transformTemplate = this.getTransformTemplate();
+              this.prevTransformTemplateValue = transformTemplate
+                  ? transformTemplate(this.latestValues, "")
+                  : undefined;
               this.updateSnapshot();
               shouldNotifyListeners && this.notifyListeners("willUpdate");
           }
@@ -3223,7 +3236,6 @@
               this.snapshot = this.measure();
           }
           updateLayout() {
-              var _a;
               if (!this.instance)
                   return;
               // TODO: Incorporate into a forwarded scroll offset
@@ -3251,7 +3263,9 @@
               this.isLayoutDirty = false;
               this.projectionDelta = undefined;
               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);
+              const { visualElement } = this.options;
+              visualElement &&
+                  visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);
           }
           updateScroll(phase = "measure") {
               let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
@@ -3270,12 +3284,14 @@
               }
           }
           resetTransform() {
-              var _a;
               if (!resetTransform)
                   return;
               const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
               const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
-              const transformTemplateValue = (_a = this.getTransformTemplate()) === null || _a === void 0 ? void 0 : _a(this.latestValues, "");
+              const transformTemplate = this.getTransformTemplate();
+              const transformTemplateValue = transformTemplate
+                  ? transformTemplate(this.latestValues, "")
+                  : undefined;
               const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
               if (isResetRequested &&
                   (hasProjection ||
@@ -3376,7 +3392,6 @@
               return withTransforms;
           }
           removeTransform(box) {
-              var _a;
               const boxWithoutTransform = createBox();
               copyBoxInto(boxWithoutTransform, box);
               for (let i = 0; i < this.path.length; i++) {
@@ -3389,7 +3404,7 @@
                   const sourceBox = createBox();
                   const nodeBox = node.measurePageBox();
                   copyBoxInto(sourceBox, nodeBox);
-                  removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layoutBox, sourceBox);
+                  removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);
               }
               if (hasTransform(this.latestValues)) {
                   removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -3424,7 +3439,6 @@
            * Frame calculations
            */
           resolveTargetDelta() {
-              var _a;
               /**
                * Once the dirty status of nodes has been spread through the tree, we also
                * need to check if we have a shared node of a different depth that has itself
@@ -3483,7 +3497,8 @@
                */
               if (this.relativeTarget &&
                   this.relativeTargetOrigin &&
-                  ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.target)) {
+                  this.relativeParent &&
+                  this.relativeParent.target) {
                   calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
                   /**
                    * If we've only got a targetDelta, resolve it into a target
@@ -3544,7 +3559,6 @@
               }
           }
           calcProjection() {
-              var _a;
               const { isProjectionDirty, isTransformDirty } = this;
               this.isProjectionDirty = this.isTransformDirty = false;
               const lead = this.getLead();
@@ -3561,7 +3575,7 @@
                * If this section of the tree isn't animating we can
                * delete our target sources for the following frame.
                */
-              this.isTreeAnimating = Boolean(((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimating) ||
+              this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||
                   this.currentAnimation ||
                   this.pendingAnimation);
               if (!this.isTreeAnimating) {
@@ -3617,17 +3631,20 @@
               // TODO: Schedule render
           }
           scheduleRender(notifyAll = true) {
-              var _a, _b, _c;
-              (_b = (_a = this.options).scheduleRender) === null || _b === void 0 ? void 0 : _b.call(_a);
-              notifyAll && ((_c = this.getStack()) === null || _c === void 0 ? void 0 : _c.scheduleRender());
+              this.options.scheduleRender && this.options.scheduleRender();
+              if (notifyAll) {
+                  const stack = this.getStack();
+                  stack && stack.scheduleRender();
+              }
               if (this.resumingFrom && !this.resumingFrom.instance) {
                   this.resumingFrom = undefined;
               }
           }
           setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
-              var _a, _b;
               const snapshot = this.snapshot;
-              const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
+              const snapshotLatestValues = snapshot
+                  ? snapshot.latestValues
+                  : {};
               const mixedValues = { ...this.latestValues };
               const targetDelta = createDelta();
               if (!this.relativeParent ||
@@ -3636,15 +3653,17 @@
               }
               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);
-              const isOnlyMember = (((_b = this.getStack()) === null || _b === void 0 ? void 0 : _b.members.length) || 0) <= 1;
+              const snapshotSource = snapshot ? snapshot.source : undefined;
+              const layoutSource = this.layout ? this.layout.source : undefined;
+              const isSharedLayoutAnimation = snapshotSource !== layoutSource;
+              const stack = this.getStack();
+              const isOnlyMember = !stack || stack.members.length <= 1;
               const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
                   !isOnlyMember &&
                   this.options.crossfade === true &&
                   !this.path.some(hasOpacityCrossfade));
               this.animationProgress = 0;
               this.mixTargetDelta = (latest) => {
-                  var _a;
                   const progress = latest / 1000;
                   mixAxisDelta(targetDelta.x, delta.x, progress);
                   mixAxisDelta(targetDelta.y, delta.y, progress);
@@ -3652,7 +3671,8 @@
                   if (this.relativeTarget &&
                       this.relativeTargetOrigin &&
                       this.layout &&
-                      ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
+                      this.relativeParent &&
+                      this.relativeParent.layout) {
                       calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                       mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                   }
@@ -3667,11 +3687,10 @@
               this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
           }
           startAnimation(options) {
-              var _a, _b;
               this.notifyListeners("animationStart");
-              (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
-              if (this.resumingFrom) {
-                  (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();
+              this.currentAnimation && this.currentAnimation.stop();
+              if (this.resumingFrom && this.resumingFrom.currentAnimation) {
+                  this.resumingFrom.currentAnimation.stop();
               }
               if (this.pendingAnimation) {
                   cancelSync.update(this.pendingAnimation);
@@ -3687,13 +3706,11 @@
                   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);
+                          options.onUpdate && options.onUpdate(latest);
                       },
                       onComplete: () => {
-                          var _a;
-                          (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+                          options.onComplete && options.onComplete();
                           this.completeAnimation();
                       },
                   });
@@ -3704,12 +3721,12 @@
               });
           }
           completeAnimation() {
-              var _a;
               if (this.resumingFrom) {
                   this.resumingFrom.currentAnimation = undefined;
                   this.resumingFrom.preserveOpacity = undefined;
               }
-              (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.exitAnimationComplete();
+              const stack = this.getStack();
+              stack && stack.exitAnimationComplete();
               this.resumingFrom =
                   this.currentAnimation =
                       this.animationValues =
@@ -3717,9 +3734,8 @@
               this.notifyListeners("animationComplete");
           }
           finishAnimation() {
-              var _a;
               if (this.currentAnimation) {
-                  (_a = this.mixTargetDelta) === null || _a === void 0 ? void 0 : _a.call(this, animationTarget);
+                  this.mixTargetDelta && this.mixTargetDelta(animationTarget);
                   this.currentAnimation.stop();
               }
               this.completeAnimation();
@@ -3762,15 +3778,17 @@
               calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
           }
           registerSharedNode(layoutId, node) {
-              var _a, _b, _c;
               if (!this.sharedNodes.has(layoutId)) {
                   this.sharedNodes.set(layoutId, new NodeStack());
               }
               const stack = this.sharedNodes.get(layoutId);
               stack.add(node);
+              const config = node.options.initialPromotionConfig;
               node.promote({
-                  transition: (_a = node.options.initialPromotionConfig) === null || _a === void 0 ? void 0 : _a.transition,
-                  preserveFollowOpacity: (_c = (_b = node.options.initialPromotionConfig) === null || _b === void 0 ? void 0 : _b.shouldPreserveFollowOpacity) === null || _c === void 0 ? void 0 : _c.call(_b, node),
+                  transition: config ? config.transition : undefined,
+                  preserveFollowOpacity: config && config.shouldPreserveFollowOpacity
+                      ? config.shouldPreserveFollowOpacity(node)
+                      : undefined,
               });
           }
           isLead() {
@@ -3844,7 +3862,7 @@
               }
               // Force a render of this element to apply the transform with all rotations
               // set to 0.
-              visualElement === null || visualElement === void 0 ? void 0 : visualElement.render();
+              visualElement.render();
               // Put back all the values we reset
               for (const key in resetValues) {
                   visualElement.setStaticValue(key, resetValues[key]);
@@ -3983,7 +4001,7 @@
       node.updateLayout();
   }
   function notifyLayoutUpdate(node) {
-      var _a, _b, _c;
+      var _a;
       const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
       if (node.isLead() &&
           node.layout &&
@@ -4058,7 +4076,8 @@
           });
       }
       else if (node.isLead()) {
-          (_c = (_b = node.options).onExitComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
+          const { onExitComplete } = node.options;
+          onExitComplete && onExitComplete();
       }
       /**
        * Clearing transition
@@ -4086,7 +4105,7 @@
   }
   function resetTransformStyle(node) {
       const { visualElement } = node.options;
-      if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
+      if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
           visualElement.notify("BeforeLayoutMeasure");
       }
       node.resetTransform();
@@ -4207,10 +4226,12 @@
               subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
           },
           remove: (node) => {
-              var _a;
               nodes.delete(node);
-              (_a = subscriptions.get(node)) === null || _a === void 0 ? void 0 : _a();
-              subscriptions.delete(node);
+              const unsubscribe = subscriptions.get(node);
+              if (unsubscribe) {
+                  unsubscribe();
+                  subscriptions.delete(node);
+              }
               dirtyAll();
           },
           dirty: dirtyAll,
@@ -4724,14 +4745,18 @@
       return valueTransition.from;
   }
   function getOrigin(target, transition, visualElement) {
-      var _a;
       const origin = {};
       for (const key in target) {
           const transitionOrigin = getOriginFromTransition(key, transition);
-          origin[key] =
-              transitionOrigin !== undefined
-                  ? transitionOrigin
-                  : (_a = visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.get();
+          if (transitionOrigin !== undefined) {
+              origin[key] = transitionOrigin;
+          }
+          else {
+              const value = visualElement.getValue(key);
+              if (value) {
+                  origin[key] = value.get();
+              }
+          }
       }
       return origin;
   }
@@ -4968,39 +4993,6 @@
       return unitConversion(visualElement, target, origin, transitionEnd);
   };
 
-  const createDefinition = (propNames) => ({
-      isEnabled: (props) => propNames.some((name) => !!props[name]),
-  });
-  const featureDefinitions = {
-      measureLayout: createDefinition(["layout", "layoutId", "drag"]),
-      animation: createDefinition([
-          "animate",
-          "exit",
-          "variants",
-          "whileHover",
-          "whileTap",
-          "whileFocus",
-          "whileDrag",
-          "whileInView",
-      ]),
-      exit: createDefinition(["exit"]),
-      drag: createDefinition(["drag", "dragControls"]),
-      focus: createDefinition(["whileFocus"]),
-      hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
-      tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
-      pan: createDefinition([
-          "onPan",
-          "onPanStart",
-          "onPanSessionStart",
-          "onPanEnd",
-      ]),
-      inView: createDefinition([
-          "whileInView",
-          "onViewportEnter",
-          "onViewportLeave",
-      ]),
-  };
-
   function isRefObject(ref) {
       return (typeof ref === "object" &&
           Object.prototype.hasOwnProperty.call(ref, "current"));
@@ -5108,7 +5100,7 @@
                * and warn against mismatches.
                */
               {
-                  warnOnce(nextValue.version === "9.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.2 may not work as expected.`);
+                  warnOnce(nextValue.version === "9.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.3 may not work as expected.`);
               }
           }
           else if (isMotionValue(prevValue)) {
@@ -5146,6 +5138,33 @@
       return next;
   }
 
+  const featureProps = {
+      animation: [
+          "animate",
+          "exit",
+          "variants",
+          "whileHover",
+          "whileTap",
+          "whileFocus",
+          "whileDrag",
+          "whileInView",
+      ],
+      exit: ["exit"],
+      drag: ["drag", "dragControls"],
+      focus: ["whileFocus"],
+      hover: ["whileHover", "onHoverStart", "onHoverEnd"],
+      tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
+      pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
+      inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
+      layout: ["layout", "layoutId"],
+  };
+  const featureDefinitions = {};
+  for (const key in featureProps) {
+      featureDefinitions[key] = {
+          isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
+      };
+  }
+
   const featureNames = Object.keys(featureDefinitions);
   const numFeatures = featureNames.length;
   const propEventHandlers = [
@@ -5162,7 +5181,7 @@
    * HTMLElement, SVGElement, Three.Object3D etc.
    */
   class VisualElement {
-      constructor({ parent, props, reducedMotionConfig, visualState, }, options = {}) {
+      constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {
           /**
            * A reference to the current underlying Instance, e.g. a HTMLElement
            * or Three.Mesh etc.
@@ -5192,10 +5211,9 @@
            */
           this.values = new Map();
           /**
-           * Tracks whether this VisualElement's React component is currently present
-           * within the defined React tree.
+           * Cleanup functions for active features (hover/tap/exit etc)
            */
-          this.isPresent = true;
+          this.features = {};
           /**
            * A map of every subscription that binds the provided or generated
            * motion values onChange listeners to this visual element.
@@ -5232,6 +5250,7 @@
           this.renderState = renderState;
           this.parent = parent;
           this.props = props;
+          this.presenceContext = presenceContext;
           this.depth = parent ? parent.depth + 1 : 0;
           this.reducedMotionConfig = reducedMotionConfig;
           this.options = options;
@@ -5273,13 +5292,12 @@
           return {};
       }
       mount(instance) {
-          var _a;
           this.current = instance;
           if (this.projection) {
               this.projection.mount(instance);
           }
           if (this.parent && this.isVariantNode && !this.isControllingVariants) {
-              this.removeFromVariantTree = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.addVariantChild(this);
+              this.removeFromVariantTree = this.parent.addVariantChild(this);
           }
           this.values.forEach((value, key) => this.bindToMotionValue(key, value));
           if (!hasReducedMotionListener.current) {
@@ -5296,19 +5314,21 @@
           }
           if (this.parent)
               this.parent.children.add(this);
-          this.setProps(this.props);
+          this.update(this.props, this.presenceContext);
       }
       unmount() {
-          var _a, _b, _c;
-          (_a = this.projection) === null || _a === void 0 ? void 0 : _a.unmount();
+          this.projection && this.projection.unmount();
           cancelSync.update(this.notifyUpdate);
           cancelSync.render(this.render);
           this.valueSubscriptions.forEach((remove) => remove());
-          (_b = this.removeFromVariantTree) === null || _b === void 0 ? void 0 : _b.call(this);
-          (_c = this.parent) === null || _c === void 0 ? void 0 : _c.children.delete(this);
+          this.removeFromVariantTree && this.removeFromVariantTree();
+          this.parent && this.parent.children.delete(this);
           for (const key in this.events) {
               this.events[key].clear();
           }
+          for (const key in this.features) {
+              this.features[key].unmount();
+          }
           this.current = null;
       }
       bindToMotionValue(key, value) {
@@ -5333,12 +5353,14 @@
            */
           if (!this.current ||
               !this.sortInstanceNodePosition ||
-              this.type !== other.type)
+              this.type !== other.type) {
               return 0;
+          }
           return this.sortInstanceNodePosition(this.current, other.current);
       }
-      loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
-          const features = [];
+      loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig) {
+          let ProjectionNodeConstructor;
+          let MeasureLayout;
           /**
            * If we're in development mode, check to make sure we're not rendering a motion component
            * as a child of LazyMotion, as this will break the file-size benefits of using it.
@@ -5352,18 +5374,16 @@
           }
           for (let i = 0; i < numFeatures; i++) {
               const name = featureNames[i];
-              const { isEnabled, Component } = featureDefinitions[name];
-              /**
-               * It might be possible in the future to use this moment to
-               * dynamically request functionality. In initial tests this
-               * was producing a lot of duplication amongst bundles.
-               */
-              if (isEnabled(renderedProps) && Component) {
-                  features.push(react.createElement(Component, {
-                      key: name,
-                      ...renderedProps,
-                      visualElement: this,
-                  }));
+              const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
+              if (ProjectionNode)
+                  ProjectionNodeConstructor = ProjectionNode;
+              if (isEnabled(renderedProps)) {
+                  if (!this.features[name] && FeatureConstructor) {
+                      this.features[name] = new FeatureConstructor(this);
+                  }
+                  if (MeasureLayoutComponent) {
+                      MeasureLayout = MeasureLayoutComponent;
+                  }
               }
           }
           if (!this.projection && ProjectionNodeConstructor) {
@@ -5389,7 +5409,19 @@
                   layoutRoot,
               });
           }
-          return features;
+          return MeasureLayout;
+      }
+      updateFeatures() {
+          for (const key in this.features) {
+              const feature = this.features[key];
+              if (feature.isMounted) {
+                  feature.update(this.props, this.prevProps);
+              }
+              else {
+                  feature.mount();
+                  feature.isMounted = true;
+              }
+          }
       }
       triggerBuild() {
           this.build(this.renderState, this.latestValues, this.options, this.props);
@@ -5424,12 +5456,14 @@
        * Update the provided props. Ensure any newly-added motion values are
        * added to our map, old ones removed, and listeners updated.
        */
-      setProps(props) {
+      update(props, presenceContext) {
           if (props.transformTemplate || this.props.transformTemplate) {
               this.scheduleRender();
           }
-          const prevProps = this.props;
+          this.prevProps = this.props;
           this.props = props;
+          this.prevPresenceContext = this.presenceContext;
+          this.presenceContext = presenceContext;
           /**
            * Update prop event handlers ie onAnimationStart, onAnimationComplete
            */
@@ -5444,7 +5478,7 @@
                   this.propEventSubscriptions[key] = this.on(key, listener);
               }
           }
-          this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+          this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);
           if (this.handleChildMotionValue) {
               this.handleChildMotionValue();
           }
@@ -5456,8 +5490,7 @@
        * Returns the variant definition with a given name.
        */
       getVariant(name) {
-          var _a;
-          return (_a = this.props.variants) === null || _a === void 0 ? void 0 : _a[name];
+          return this.props.variants ? this.props.variants[name] : undefined;
       }
       /**
        * Returns the defined default transition on this component.
@@ -5469,15 +5502,20 @@
           return this.props.transformPagePoint;
       }
       getClosestVariantNode() {
-          var _a;
-          return this.isVariantNode ? this : (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getClosestVariantNode();
+          return this.isVariantNode
+              ? this
+              : this.parent
+                  ? this.parent.getClosestVariantNode()
+                  : undefined;
       }
       getVariantContext(startAtParent = false) {
-          var _a, _b;
-          if (startAtParent)
-              return (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getVariantContext();
+          if (startAtParent) {
+              return this.parent ? this.parent.getVariantContext() : undefined;
+          }
           if (!this.isControllingVariants) {
-              const context = ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.getVariantContext()) || {};
+              const context = this.parent
+                  ? this.parent.getVariantContext() || {}
+                  : {};
               if (this.props.initial !== undefined) {
                   context.initial = this.props.initial;
               }
@@ -5497,10 +5535,10 @@
        * Add a child visual element to our set of children.
        */
       addVariantChild(child) {
-          var _a;
           const closestVariantNode = this.getClosestVariantNode();
           if (closestVariantNode) {
-              (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
+              closestVariantNode.variantChildren &&
+                  closestVariantNode.variantChildren.add(child);
               return () => closestVariantNode.variantChildren.delete(child);
           }
       }
@@ -5520,10 +5558,12 @@
        * Remove a motion value and unbind any active subscriptions.
        */
       removeValue(key) {
-          var _a;
           this.values.delete(key);
-          (_a = this.valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a();
-          this.valueSubscriptions.delete(key);
+          const unsubscribe = this.valueSubscriptions.get(key);
+          if (unsubscribe) {
+              unsubscribe();
+              this.valueSubscriptions.delete(key);
+          }
           delete this.latestValues[key];
           this.removeValueFromRenderState(key, this.renderState);
       }
@@ -5600,8 +5640,9 @@
           return this.events[eventName].add(callback);
       }
       notify(eventName, ...args) {
-          var _a;
-          (_a = this.events[eventName]) === null || _a === void 0 ? void 0 : _a.notify(...args);
+          if (this.events[eventName]) {
+              this.events[eventName].notify(...args);
+          }
       }
   }
   const variantProps = ["initial", ...variantPriorityOrder];
@@ -5617,8 +5658,7 @@
           return a.compareDocumentPosition(b) & 2 ? 1 : -1;
       }
       getBaseTargetFromProps(props, key) {
-          var _a;
-          return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
+          return props.style ? props.style[key] : undefined;
       }
       removeValueFromRenderState(key, { vars, style }) {
           delete vars[key];