framer-motion 5.0.0-rc.3 → 5.0.1

package/README.md

@@ -1,7 +1,7 @@
 <p align="center">
-  <img src="https://misc.framerstatic.com/motion/motion-readme-4.gif" width="400" height="250" alt="Framer Motion" />
+  <img src="https://user-images.githubusercontent.com/22095598/123793419-f5528800-d8e1-11eb-8c5f-e2dad45a9c81.png" width="108" height="108" alt="Framer Motion" />
 </p>
-
+<h1 align="center">Framer Motion</h1>
 <h3 align="center">
   An open source and production-ready motion<br>library for React on the web.
 </h3>
@@ -35,21 +35,22 @@ It looks like this:
 
 It does all this:
 
--   Spring animations
--   Simple keyframes syntax
+-   Springs
+-   Keyframes
+-   Layout animations
+-   Shared layout animations
 -   Gestures (drag/tap/hover)
--   Layout and shared layout animations
 -   SVG paths
 -   Exit animations
 -   Server-side rendering
--   Variants for orchestrating animations across components
+-   Orchestrate animations across components
 -   CSS variables
 
 ...and a whole lot more.
 
 ## Get started
 
-### Quick start
+### 🐇 Quick start
 
 ```
 npm install framer-motion
@@ -63,17 +64,17 @@ export const MyComponent = ({ isVisible }) => (
 )
 ```
 
-### Docs
+### 📚 Docs
 
-Check out [our documentation](https://framer.com/api/motion) for guides and a full API reference.
+Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
 
-Or checkout [our examples](https://framer.com/motion) for inspiration.
+Or checkout [our examples](https://www.framer.com/docs/examples/) for inspiration.
 
-### Contribute
+### 🛠 Contribute
 
 Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
 
-### License
+### 👩🏻‍⚖️ License
 
 Framer Motion is MIT licensed.
 

package/dist/es/animation/utils/transitions.mjs

@@ -75,9 +75,9 @@ function convertTransitionToAnimationOptions(_a) {
  * Get the delay for a value by checking Transition with decreasing specificity.
  */
 function getDelayFromTransition(transition, key) {
-    var _a;
+    var _a, _b;
     var valueTransition = getValueTransition(transition, key) || {};
-    return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;
+    return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
 }
 function hydrateKeyframes(options) {
     if (Array.isArray(options.to) && options.to[0] === null) {

package/dist/es/components/AnimatePresence/index.mjs

@@ -1,6 +1,6 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
-import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
+import { useContext, useRef, useEffect, cloneElement, Children, isValidElement } from 'react';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
@@ -72,6 +72,10 @@ var AnimatePresence = function (_a) {
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
     var isInitialRender = useRef(true);
+    var isMounted = useRef(true);
+    useEffect(function () { return function () {
+        isMounted.current = false;
+    }; }, []);
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
     // Keep a living record of the children we're actually rendering so we
@@ -130,6 +134,9 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
+                if (isMounted.current === false) {
+                    return;
+                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }

package/dist/es/context/MotionContext/create.mjs

@@ -2,18 +2,9 @@ import { useMemo, useContext } from 'react';
 import { MotionContext } from './index.mjs';
 import { getCurrentTreeVariants } from './utils.mjs';
 
-function useCreateMotionContext(props, isStatic) {
+function useCreateMotionContext(props) {
     var _a = getCurrentTreeVariants(props, useContext(MotionContext)), initial = _a.initial, animate = _a.animate;
-    return useMemo(function () { return ({ initial: initial, animate: animate }); }, 
-    /**
-     * Only break memoisation in static mode
-     */
-    isStatic
-        ? [
-            variantLabelsAsDependency(initial),
-            variantLabelsAsDependency(animate),
-        ]
-        : []);
+    return useMemo(function () { return ({ initial: initial, animate: animate }); }, [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
 }
 function variantLabelsAsDependency(prop) {
     return Array.isArray(prop) ? prop.join(" ") : prop;

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,4 +1,5 @@
 import { __extends, __assign, __read } from 'tslib';
+import sync from 'framesync';
 import React__default, { useContext } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';
@@ -38,6 +39,7 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         globalProjectionState.hasEverUpdated = true;
     };
     MeasureLayoutWithContext.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+        var _this = this;
         var _a = this.props, layoutDependency = _a.layoutDependency, visualElement = _a.visualElement, drag = _a.drag, isPresent = _a.isPresent;
         var projection = visualElement.projection;
         if (!projection)
@@ -55,12 +57,25 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
             layoutDependency === undefined) {
             projection.willUpdate();
         }
+        else {
+            this.safeToRemove();
+        }
         if (prevProps.isPresent !== isPresent) {
             if (isPresent) {
                 projection.promote();
             }
-            else {
-                projection.relegate();
+            else if (!projection.relegate()) {
+                /**
+                 * If there's another stack member taking over from this one,
+                 * it's in charge of the exit animation and therefore should
+                 * be in charge of the safe to remove. Otherwise we call it here.
+                 */
+                sync.postRender(function () {
+                    var _a;
+                    if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
+                        _this.safeToRemove();
+                    }
+                });
             }
         }
         return null;

package/dist/es/motion/index.mjs

@@ -39,11 +39,7 @@ function createMotionComponent(_a) {
          */
         var config = useContext(MotionConfigContext);
         var features = null;
-        /**
-         * Create the tree context. This is memoized and will only trigger renders
-         * when the current tree variant changes in static mode.
-         */
-        var context = useCreateMotionContext(props, config.isStatic);
+        var context = useCreateMotionContext(props);
         /**
          * Create a unique projection ID for this component. If a new component is added
          * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing

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

@@ -29,10 +29,6 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     });
     useEffect(function () {
         var _a;
-        /**
-         * In a future refactor we can replace the features-as-components and
-         * have this loop through them all firing "effect" listeners
-         */
         (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();
     });
     useIsomorphicLayoutEffect(function () { return function () { return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(); }; }, []);

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

@@ -287,8 +287,12 @@ function createProjectionNode(_a) {
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
         };
         ProjectionNode.prototype.willUpdate = function (shouldNotifyListeners) {
-            var _a;
+            var _a, _b, _c;
             if (shouldNotifyListeners === void 0) { shouldNotifyListeners = true; }
+            if (this.root.isUpdateBlocked()) {
+                (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
                 return;
@@ -302,10 +306,10 @@ function createProjectionNode(_a) {
                  */
                 node.updateScroll();
             }
-            var _b = this.options, layoutId = _b.layoutId, layout = _b.layout;
+            var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
             if (!layoutId && !layout)
                 return;
-            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            var 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.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
@@ -1030,13 +1034,13 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
-        var _c = node.layout, layout_1 = _c.actual, measuredLayout = _c.measured;
+        var _e = node.layout, layout_1 = _e.actual, measuredLayout = _e.measured;
         // 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") {
@@ -1076,7 +1080,7 @@ function notifyLayoutUpdate(node) {
              * the relative snapshot is not relavent
              */
             if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                var _d = node.relativeParent, parentSnapshot = _d.snapshot, parentLayout = _d.layout;
+                var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout;
                 if (parentSnapshot && parentLayout) {
                     var relativeSnapshot = createBox();
                     calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
@@ -1097,6 +1101,9 @@ function notifyLayoutUpdate(node) {
             hasRelativeTargetChanged: hasRelativeTargetChanged,
         });
     }
+    else if (node.isLead()) {
+        (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
     /**
      * Clearing transition
      * TODO: Investigate why this transition is being passed in as {type: false } from Framer

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -40,24 +40,26 @@ var BoundingBoxDimension;
 var getPosFromMatrix = function (matrix, pos) {
     return parseFloat(matrix.split(", ")[pos]);
 };
-var getTranslateFromMatrix = function (pos2, pos3) { return function (_bbox, _a) {
-    var transform = _a.transform;
-    if (transform === "none" || !transform)
-        return 0;
-    var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-    if (matrix3d) {
-        return getPosFromMatrix(matrix3d[1], pos3);
-    }
-    else {
-        var matrix = transform.match(/^matrix\((.+)\)$/);
-        if (matrix) {
-            return getPosFromMatrix(matrix[1], pos2);
+var getTranslateFromMatrix = function (pos2, pos3) {
+    return function (_bbox, _a) {
+        var transform = _a.transform;
+        if (transform === "none" || !transform)
+            return 0;
+        var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
         }
         else {
-            return 0;
+            var matrix = transform.match(/^matrix\((.+)\)$/);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
+            }
+            else {
+                return 0;
+            }
         }
-    }
-}; };
+    };
+};
 var transformKeys = new Set(["x", "y", "z"]);
 var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); });
 function removeNonTranslationalTransform(visualElement) {
@@ -145,8 +147,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         if (!visualElement.hasValue(key))
             return;
         var from = origin[key];
-        var to = target[key];
         var fromType = findDimensionValueType(from);
+        var to = target[key];
         var toType;
         // TODO: The current implementation of this basically throws an error
         // if you try and do value conversion via keyframes. There's probably
@@ -154,7 +156,10 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         // as it'd be doing multiple resize-remeasure operations.
         if (isKeyframesTarget(to)) {
             var numKeyframes = to.length;
-            for (var i = to[0] === null ? 1 : 0; i < numKeyframes; i++) {
+            var fromIndex = to[0] === null ? 1 : 0;
+            from = to[fromIndex];
+            fromType = findDimensionValueType(from);
+            for (var i = fromIndex; i < numKeyframes; i++) {
                 if (!toType) {
                     toType = findDimensionValueType(to[i]);
                     invariant(toType === fromType ||
@@ -199,7 +204,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
                 // If we're going to do value conversion via DOM measurements, we first
                 // need to remove non-positional transform values that could affect the bbox measurements.
                 if (!hasAttemptedToRemoveTransformValues) {
-                    removedTransformValues = removeNonTranslationalTransform(visualElement);
+                    removedTransformValues =
+                        removeNonTranslationalTransform(visualElement);
                     hasAttemptedToRemoveTransformValues = true;
                 }
                 changedValueTypeKeys.push(key);

package/dist/es/render/utils/animation.mjs

@@ -8,7 +8,7 @@ import { resolveVariant } from './variants.mjs';
  */
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
-    visualElement.notifyAnimationStart();
+    visualElement.notifyAnimationStart(definition);
     var animation;
     if (Array.isArray(definition)) {
         var animations = definition.map(function (variant) {

package/dist/framer-motion.cjs.js

@@ -157,10 +157,6 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     });
     React.useEffect(function () {
         var _a;
-        /**
-         * In a future refactor we can replace the features-as-components and
-         * have this loop through them all firing "effect" listeners
-         */
         (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();
     });
     useIsomorphicLayoutEffect(function () { return function () { return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(); }; }, []);
@@ -273,18 +269,9 @@ function getCurrentTreeVariants(props, context) {
     return props.inherit !== false ? context : {};
 }
 
-function useCreateMotionContext(props, isStatic) {
+function useCreateMotionContext(props) {
     var _a = getCurrentTreeVariants(props, React.useContext(MotionContext)), initial = _a.initial, animate = _a.animate;
-    return React.useMemo(function () { return ({ initial: initial, animate: animate }); }, 
-    /**
-     * Only break memoisation in static mode
-     */
-    isStatic
-        ? [
-            variantLabelsAsDependency(initial),
-            variantLabelsAsDependency(animate),
-        ]
-        : []);
+    return React.useMemo(function () { return ({ initial: initial, animate: animate }); }, [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
 }
 function variantLabelsAsDependency(prop) {
     return Array.isArray(prop) ? prop.join(" ") : prop;
@@ -955,9 +942,9 @@ function convertTransitionToAnimationOptions(_a) {
  * Get the delay for a value by checking Transition with decreasing specificity.
  */
 function getDelayFromTransition(transition, key) {
-    var _a;
+    var _a, _b;
     var valueTransition = getValueTransition(transition, key) || {};
-    return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;
+    return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
 }
 function hydrateKeyframes(options) {
     if (Array.isArray(options.to) && options.to[0] === null) {
@@ -1965,8 +1952,12 @@ function createProjectionNode(_a) {
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
         };
         ProjectionNode.prototype.willUpdate = function (shouldNotifyListeners) {
-            var _a;
+            var _a, _b, _c;
             if (shouldNotifyListeners === void 0) { shouldNotifyListeners = true; }
+            if (this.root.isUpdateBlocked()) {
+                (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
                 return;
@@ -1980,10 +1971,10 @@ function createProjectionNode(_a) {
                  */
                 node.updateScroll();
             }
-            var _b = this.options, layoutId = _b.layoutId, layout = _b.layout;
+            var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
             if (!layoutId && !layout)
                 return;
-            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            var 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.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
@@ -2708,13 +2699,13 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
-        var _c = node.layout, layout_1 = _c.actual, measuredLayout = _c.measured;
+        var _e = node.layout, layout_1 = _e.actual, measuredLayout = _e.measured;
         // 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") {
@@ -2754,7 +2745,7 @@ function notifyLayoutUpdate(node) {
              * the relative snapshot is not relavent
              */
             if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                var _d = node.relativeParent, parentSnapshot = _d.snapshot, parentLayout = _d.layout;
+                var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout;
                 if (parentSnapshot && parentLayout) {
                     var relativeSnapshot = createBox();
                     calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
@@ -2775,6 +2766,9 @@ function notifyLayoutUpdate(node) {
             hasRelativeTargetChanged: hasRelativeTargetChanged,
         });
     }
+    else if (node.isLead()) {
+        (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
     /**
      * Clearing transition
      * TODO: Investigate why this transition is being passed in as {type: false } from Framer
@@ -2951,11 +2945,7 @@ function createMotionComponent(_a) {
          */
         var config = React.useContext(MotionConfigContext);
         var features = null;
-        /**
-         * Create the tree context. This is memoized and will only trigger renders
-         * when the current tree variant changes in static mode.
-         */
-        var context = useCreateMotionContext(props, config.isStatic);
+        var context = useCreateMotionContext(props);
         /**
          * Create a unique projection ID for this component. If a new component is added
          * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing
@@ -4275,7 +4265,7 @@ function getOrigin(target, transition, visualElement) {
  */
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
-    visualElement.notifyAnimationStart();
+    visualElement.notifyAnimationStart(definition);
     var animation;
     if (Array.isArray(definition)) {
         var animations = definition.map(function (variant) {
@@ -6145,24 +6135,26 @@ var BoundingBoxDimension;
 var getPosFromMatrix = function (matrix, pos) {
     return parseFloat(matrix.split(", ")[pos]);
 };
-var getTranslateFromMatrix = function (pos2, pos3) { return function (_bbox, _a) {
-    var transform = _a.transform;
-    if (transform === "none" || !transform)
-        return 0;
-    var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-    if (matrix3d) {
-        return getPosFromMatrix(matrix3d[1], pos3);
-    }
-    else {
-        var matrix = transform.match(/^matrix\((.+)\)$/);
-        if (matrix) {
-            return getPosFromMatrix(matrix[1], pos2);
+var getTranslateFromMatrix = function (pos2, pos3) {
+    return function (_bbox, _a) {
+        var transform = _a.transform;
+        if (transform === "none" || !transform)
+            return 0;
+        var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
         }
         else {
-            return 0;
+            var matrix = transform.match(/^matrix\((.+)\)$/);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
+            }
+            else {
+                return 0;
+            }
         }
-    }
-}; };
+    };
+};
 var transformKeys = new Set(["x", "y", "z"]);
 var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); });
 function removeNonTranslationalTransform(visualElement) {
@@ -6250,8 +6242,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         if (!visualElement.hasValue(key))
             return;
         var from = origin[key];
-        var to = target[key];
         var fromType = findDimensionValueType(from);
+        var to = target[key];
         var toType;
         // TODO: The current implementation of this basically throws an error
         // if you try and do value conversion via keyframes. There's probably
@@ -6259,7 +6251,10 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         // as it'd be doing multiple resize-remeasure operations.
         if (isKeyframesTarget(to)) {
             var numKeyframes = to.length;
-            for (var i = to[0] === null ? 1 : 0; i < numKeyframes; i++) {
+            var fromIndex = to[0] === null ? 1 : 0;
+            from = to[fromIndex];
+            fromType = findDimensionValueType(from);
+            for (var i = fromIndex; i < numKeyframes; i++) {
                 if (!toType) {
                     toType = findDimensionValueType(to[i]);
                     heyListen.invariant(toType === fromType ||
@@ -6304,7 +6299,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
                 // If we're going to do value conversion via DOM measurements, we first
                 // need to remove non-positional transform values that could affect the bbox measurements.
                 if (!hasAttemptedToRemoveTransformValues) {
-                    removedTransformValues = removeNonTranslationalTransform(visualElement);
+                    removedTransformValues =
+                        removeNonTranslationalTransform(visualElement);
                     hasAttemptedToRemoveTransformValues = true;
                 }
                 changedValueTypeKeys.push(key);
@@ -6594,6 +6590,7 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         globalProjectionState.hasEverUpdated = true;
     };
     MeasureLayoutWithContext.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+        var _this = this;
         var _a = this.props, layoutDependency = _a.layoutDependency, visualElement = _a.visualElement, drag = _a.drag, isPresent = _a.isPresent;
         var projection = visualElement.projection;
         if (!projection)
@@ -6611,12 +6608,25 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
             layoutDependency === undefined) {
             projection.willUpdate();
         }
+        else {
+            this.safeToRemove();
+        }
         if (prevProps.isPresent !== isPresent) {
             if (isPresent) {
                 projection.promote();
             }
-            else {
-                projection.relegate();
+            else if (!projection.relegate()) {
+                /**
+                 * If there's another stack member taking over from this one,
+                 * it's in charge of the exit animation and therefore should
+                 * be in charge of the safe to remove. Otherwise we call it here.
+                 */
+                sync__default['default'].postRender(function () {
+                    var _a;
+                    if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
+                        _this.safeToRemove();
+                    }
+                });
             }
         }
         return null;
@@ -6880,6 +6890,10 @@ var AnimatePresence = function (_a) {
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
     var isInitialRender = React.useRef(true);
+    var isMounted = React.useRef(true);
+    React.useEffect(function () { return function () {
+        isMounted.current = false;
+    }; }, []);
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
     // Keep a living record of the children we're actually rendering so we
@@ -6938,6 +6952,9 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
+                if (isMounted.current === false) {
+                    return;
+                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }