framer-motion 2.1.4 → 2.2.0

package/dist/framer-motion.cjs.js

@@ -3653,251 +3653,55 @@ function useVisualElementAnimation(visualElement, props, config) {
 }
 
 /**
- * @internal
+ * @public
  */
-var MotionPluginContext = React.createContext({
+var MotionConfigContext = React.createContext({
     transformPagePoint: function (p) { return p; },
     features: [],
 });
 /**
- * @remarks For now I think this should remain a private API for our own use
- * until we can figure out a nicer way of allowing people to add these
- *
- * @internal
- */
-function MotionPlugins(_a) {
-    var children = _a.children, props = tslib.__rest(_a, ["children"]);
-    var pluginContext = React.useContext(MotionPluginContext);
-    var value = React.useRef(tslib.__assign({}, pluginContext)).current;
-    // Mutative to prevent triggering rerenders in all listening
-    // components every time this component renders
-    for (var key in props) {
-        value[key] = props[key];
-    }
-    return (React.createElement(MotionPluginContext.Provider, { value: value }, children));
-}
-
-var AnimatePropType;
-(function (AnimatePropType) {
-    AnimatePropType["Target"] = "Target";
-    AnimatePropType["VariantLabel"] = "VariantLabel";
-    AnimatePropType["AnimationSubscription"] = "AnimationSubscription";
-})(AnimatePropType || (AnimatePropType = {}));
-
-var makeRenderlessComponent = function (hook) { return function (props) {
-    hook(props);
-    return null;
-}; };
-
-function shallowCompare(next, prev) {
-    if (prev === null)
-        return false;
-    var prevLength = prev.length;
-    if (prevLength !== next.length)
-        return false;
-    for (var i = 0; i < prevLength; i++) {
-        if (prev[i] !== next[i])
-            return false;
-    }
-    return true;
-}
-
-var hasUpdated = function (prev, next) {
-    return (next !== undefined &&
-        (Array.isArray(prev) && Array.isArray(next)
-            ? !shallowCompare(next, prev)
-            : prev !== next));
-};
-function targetWithoutTransition(_a, mergeTransitionEnd) {
-    if (mergeTransitionEnd === void 0) { mergeTransitionEnd = false; }
-    var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
-    return mergeTransitionEnd
-        ? tslib.__assign(tslib.__assign({}, target), transitionEnd)
-        : target;
-}
-/**
- * Handle the `animate` prop when its an object of values, ie:
+ * MotionConfig can be used in combination with the `m` component to cut bundle size
+ * and dynamically load only the features you use.
  *
  * ```jsx
- * <motion.div animate={{ opacity: 1 }} />
- * ```
- *
- * @internalremarks
- * It might be worth consolidating this with `use-variants`
+ * import {
+ *   m as motion,
+ *   AnimationFeature,
+ *   MotionConfig
+ * } from "framer-motion"
  *
- * ```jsx
- * <motion.div animate="visible" />
+ * export function App() {
+ *   return (
+ *     <MotionConfig features={[AnimationFeature]}>
+ *       <motion.div animate={{ x: 100 }} />
+ *     </MotionConfig>
+ *   )
+ * }
  * ```
  *
- * @param target
- * @param controls
- * @param values
- * @param transition
- *
- * @internal
- */
-function useAnimateProp(targetAndTransition, controls, visualElement, defaultTransition) {
-    var isInitialRender = React.useRef(true);
-    var prevValues = React.useRef(null);
-    if (!prevValues.current) {
-        prevValues.current = targetWithoutTransition(targetAndTransition, true);
-    }
-    React.useEffect(function () {
-        var targetToAnimate = {};
-        // These are the values we're actually animating
-        var animatingTarget = targetWithoutTransition(targetAndTransition);
-        // This is the target as it'll be once transitionEnd values are applied
-        var finalTarget = targetWithoutTransition(targetAndTransition, true);
-        // Detect which values have changed between renders
-        for (var key in animatingTarget) {
-            // This value should animate on mount if this value doesn't already exist (wasn't
-            // defined in `style` or `initial`) or if it does exist and it's already changed.
-            var shouldAnimateOnMount = isInitialRender.current &&
-                (!visualElement.hasValue(key) ||
-                    visualElement.getValue(key).get() !== finalTarget[key]);
-            // If this value has updated between renders or it's we're animating this value on mount,
-            // add it to the animate target.
-            var isValidValue = finalTarget[key] !== null;
-            var valueHasUpdated = hasUpdated(prevValues.current[key], finalTarget[key]);
-            if (isValidValue && (valueHasUpdated || shouldAnimateOnMount)) {
-                targetToAnimate[key] = animatingTarget[key];
-            }
-        }
-        isInitialRender.current = false;
-        prevValues.current = tslib.__assign(tslib.__assign({}, prevValues.current), finalTarget);
-        if (Object.keys(targetToAnimate).length) {
-            controls.start(tslib.__assign(tslib.__assign({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
-        }
-    }, [targetAndTransition]);
-}
-
-var labelsToArray = function (label) {
-    if (!label) {
-        return [];
-    }
-    if (Array.isArray(label)) {
-        return label;
-    }
-    return [label];
-};
-var resolveVariantLabels = function (variant) {
-    var unresolvedVariant = variant instanceof MotionValue ? variant.get() : variant;
-    return Array.from(new Set(labelsToArray(unresolvedVariant)));
-};
-/**
- * Hooks in React sometimes accept a dependency array as their final argument. (ie useEffect/useMemo)
- * When values in this array change, React re-runs the dependency. However if the array
- * contains a variable number of items, React throws an error.
- */
-var asDependencyList = function (list) { return [
-    list.join(","),
-]; };
-
-var hasVariantChanged = function (oldVariant, newVariant) {
-    return oldVariant.join(",") !== newVariant.join(",");
-};
-/**
- * Handle variants and the `animate` prop when its set as variant labels.
- *
- * @param initial - Initial variant(s)
- * @param animate - Variant(s) to animate to
- * @param inherit - `true` is inheriting animations from parent
- * @param controls - Animation controls
- *
- * @internal
- */
-function useVariants(initial, animate, inherit, controls) {
-    var targetVariants = resolveVariantLabels(animate);
-    var context = React.useContext(MotionContext);
-    var parentAlreadyMounted = context.hasMounted && context.hasMounted.current;
-    var hasMounted = React.useRef(false);
-    React.useEffect(function () {
-        var shouldAnimate = false;
-        if (inherit) {
-            // If we're inheriting variant changes and the parent has already
-            // mounted when this component loads, we need to manually trigger
-            // this animation.
-            shouldAnimate = !!parentAlreadyMounted;
-            targetVariants = resolveVariantLabels(context.animate);
-        }
-        else {
-            shouldAnimate =
-                hasMounted.current ||
-                    hasVariantChanged(resolveVariantLabels(initial), targetVariants);
-        }
-        shouldAnimate && controls.start(targetVariants);
-        hasMounted.current = true;
-    }, asDependencyList(targetVariants));
-}
-
-/**
- * `useAnimationGroupSubscription` allows a component to subscribe to an
- * externally-created `AnimationControls`, created by the `useAnimation` hook.
- *
- * @param animation
- * @param controls
- *
- * @internal
+ * @public
  */
-function useAnimationGroupSubscription(animation, controls) {
-    var unsubscribe = React.useMemo(function () { return animation.subscribe(controls); }, [
-        animation,
+function MotionConfig(_a) {
+    var children = _a.children, _b = _a.features, features = _b === void 0 ? [] : _b, props = tslib.__rest(_a, ["children", "features"]);
+    var pluginContext = React.useContext(MotionConfigContext);
+    var loadedFeatures = tslib.__spreadArrays(pluginContext.features, features);
+    // We do want to rerender children when the number of loaded features changes
+    var value = React.useMemo(function () { return ({ features: loadedFeatures }); }, [
+        loadedFeatures.length,
     ]);
-    React.useEffect(function () { return function () {
-        unsubscribe && unsubscribe();
-    }; }, [unsubscribe]);
-}
-
-var _a, _b;
-var AnimatePropComponents = (_a = {},
-    _a[AnimatePropType.Target] = makeRenderlessComponent(function (_a) {
-        var animate = _a.animate, controls = _a.controls, visualElement = _a.visualElement, transition = _a.transition;
-        return useAnimateProp(animate, controls, visualElement, transition);
-    }),
-    _a[AnimatePropType.VariantLabel] = makeRenderlessComponent(function (_a) {
-        var animate = _a.animate, _b = _a.inherit, inherit = _b === void 0 ? true : _b, controls = _a.controls, initial = _a.initial;
-        return useVariants(initial, animate, inherit, controls);
-    }),
-    _a[AnimatePropType.AnimationSubscription] = makeRenderlessComponent(function (_a) {
-        var animate = _a.animate, controls = _a.controls;
-        return useAnimationGroupSubscription(animate, controls);
-    }),
-    _a);
-var isVariantLabel$1 = function (prop) {
-    return Array.isArray(prop) || typeof prop === "string";
-};
-var isAnimationSubscription = function (_a) {
-    var animate = _a.animate;
-    return animate instanceof AnimationControls;
-};
-var animationProps = ["initial", "animate", "whileTap", "whileHover"];
-var animatePropTypeTests = (_b = {},
-    _b[AnimatePropType.Target] = function (props) {
-        return (props.animate !== undefined &&
-            !isVariantLabel$1(props.animate) &&
-            !isAnimationSubscription(props));
-    },
-    _b[AnimatePropType.VariantLabel] = function (props) {
-        return (props.variants !== undefined ||
-            animationProps.some(function (key) { return typeof props[key] === "string"; }));
-    },
-    _b[AnimatePropType.AnimationSubscription] = isAnimationSubscription,
-    _b);
-var getAnimationComponent = function (props) {
-    var animatePropType = undefined;
-    for (var key in AnimatePropType) {
-        if (animatePropTypeTests[key](props)) {
-            animatePropType = key;
-        }
+    // Mutative to prevent triggering rerenders in all listening
+    // components every time this component renders
+    for (var key in props) {
+        value[key] = props[key];
     }
-    return animatePropType ? AnimatePropComponents[animatePropType] : undefined;
-};
+    return (React.createElement(MotionConfigContext.Provider, { value: value }, children));
+}
 
 /**
  * Load features via renderless components based on the provided MotionProps
  */
 function useFeatures(defaultFeatures, isStatic, visualElement, controls, props, context, parentContext, shouldInheritVariant) {
-    var plugins = React.useContext(MotionPluginContext);
+    var plugins = React.useContext(MotionConfigContext);
     // If this is a static component, or we're rendering on the server, we don't load
     // any feature components
     if (isStatic || typeof window === "undefined")
@@ -3905,16 +3709,13 @@ function useFeatures(defaultFeatures, isStatic, visualElement, controls, props,
     var allFeatures = tslib.__spreadArrays(defaultFeatures, plugins.features);
     var numFeatures = allFeatures.length;
     var features = [];
-    // TODO: Consolidate Animation feature loading strategy with other functionality components
-    var Animation = getAnimationComponent(props);
-    if (Animation) {
-        features.push(React.createElement(Animation, { key: "animation", initial: props.initial, animate: props.animate, variants: props.variants, transition: props.transition, controls: controls, inherit: shouldInheritVariant, visualElement: visualElement }));
-    }
     // Decide which features we should render and add them to the returned array
     for (var i = 0; i < numFeatures; i++) {
-        var _a = allFeatures[i], shouldRender = _a.shouldRender, key = _a.key, Component = _a.Component;
+        var _a = allFeatures[i], shouldRender = _a.shouldRender, key = _a.key, getComponent = _a.getComponent;
         if (shouldRender(props, parentContext)) {
-            features.push(React.createElement(Component, tslib.__assign({ key: key }, props, { localContext: context, parentContext: parentContext, visualElement: visualElement, controls: controls })));
+            var Component = getComponent(props);
+            Component &&
+                features.push(React.createElement(Component, tslib.__assign({ key: key }, props, { localContext: context, parentContext: parentContext, visualElement: visualElement, controls: controls, inherit: shouldInheritVariant })));
         }
     }
     return features;
@@ -4941,7 +4742,7 @@ function getCurrentDirection(offset, lockThreshold) {
  */
 function useDrag(props, visualElement) {
     var groupDragControls = props.dragControls;
-    var transformPagePoint = React.useContext(MotionPluginContext).transformPagePoint;
+    var transformPagePoint = React.useContext(MotionConfigContext).transformPagePoint;
     var dragControls = useConstant(function () {
         return new VisualElementDragControls({
             visualElement: visualElement,
@@ -4955,13 +4756,22 @@ function useDrag(props, visualElement) {
     React.useEffect(function () { return dragControls.mount(visualElement); }, []);
 }
 
+var makeRenderlessComponent = function (hook) { return function (props) {
+    hook(props);
+    return null;
+}; };
+
+var Component = makeRenderlessComponent(function (_a) {
+    var visualElement = _a.visualElement, props = tslib.__rest(_a, ["visualElement"]);
+    return useDrag(props, visualElement);
+});
+/**
+ * @public
+ */
 var Drag = {
     key: "drag",
     shouldRender: function (props) { return !!props.drag; },
-    Component: makeRenderlessComponent(function (_a) {
-        var visualElement = _a.visualElement, props = tslib.__rest(_a, ["visualElement"]);
-        return useDrag(props, visualElement);
-    }),
+    getComponent: function () { return Component; },
 };
 
 /**
@@ -4980,7 +4790,7 @@ function usePanGesture(_a, ref) {
     var onPan = _a.onPan, onPanStart = _a.onPanStart, onPanEnd = _a.onPanEnd, onPanSessionStart = _a.onPanSessionStart;
     var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
     var panSession = React.useRef(null);
-    var transformPagePoint = React.useContext(MotionPluginContext).transformPagePoint;
+    var transformPagePoint = React.useContext(MotionConfigContext).transformPagePoint;
     var handlers = {
         onSessionStart: onPanSessionStart,
         onStart: onPanStart,
@@ -5145,47 +4955,274 @@ var gestureProps = [
     "onHoverStart",
     "onHoverEnd",
 ];
+var GestureComponent = makeRenderlessComponent(function (_a) {
+    var visualElement = _a.visualElement, props = tslib.__rest(_a, ["visualElement"]);
+    useGestures(props, visualElement);
+});
+/**
+ * @public
+ */
 var Gestures = {
     key: "gestures",
     shouldRender: function (props) {
         return gestureProps.some(function (key) { return props.hasOwnProperty(key); });
     },
-    Component: makeRenderlessComponent(function (_a) {
-        var visualElement = _a.visualElement, props = tslib.__rest(_a, ["visualElement"]);
-        useGestures(props, visualElement);
-    }),
+    getComponent: function () { return GestureComponent; },
 };
 
+var ExitComponent = makeRenderlessComponent(function (props) {
+    var animate = props.animate, controls = props.controls, exit = props.exit;
+    var _a = usePresence(), isPresent = _a[0], onExitComplete = _a[1];
+    var presenceContext = React.useContext(PresenceContext);
+    var isPlayingExitAnimation = React.useRef(false);
+    var custom = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== undefined
+        ? presenceContext.custom
+        : props.custom;
+    React.useEffect(function () {
+        if (!isPresent) {
+            if (!isPlayingExitAnimation.current && exit) {
+                controls.setProps(tslib.__assign(tslib.__assign({}, props), { custom: custom }));
+                controls.start(exit).then(onExitComplete);
+            }
+            isPlayingExitAnimation.current = true;
+        }
+        else if (isPlayingExitAnimation.current &&
+            animate &&
+            typeof animate !== "boolean" &&
+            !(animate instanceof AnimationControls)) {
+            controls.start(animate);
+        }
+        if (isPresent) {
+            isPlayingExitAnimation.current = false;
+        }
+    }, [animate, controls, custom, exit, isPresent, onExitComplete, props]);
+});
+/**
+ * @public
+ */
 var Exit = {
     key: "exit",
     shouldRender: function (props) { return !!props.exit && !checkShouldInheritVariant(props); },
-    Component: makeRenderlessComponent(function (props) {
-        var animate = props.animate, controls = props.controls, exit = props.exit;
-        var _a = usePresence(), isPresent = _a[0], onExitComplete = _a[1];
-        var presenceContext = React.useContext(PresenceContext);
-        var isPlayingExitAnimation = React.useRef(false);
-        var custom = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== undefined
-            ? presenceContext.custom
-            : props.custom;
-        React.useEffect(function () {
-            if (!isPresent) {
-                if (!isPlayingExitAnimation.current && exit) {
-                    controls.setProps(tslib.__assign(tslib.__assign({}, props), { custom: custom }));
-                    controls.start(exit).then(onExitComplete);
-                }
-                isPlayingExitAnimation.current = true;
-            }
-            else if (isPlayingExitAnimation.current &&
-                animate &&
-                typeof animate !== "boolean" &&
-                !(animate instanceof AnimationControls)) {
-                controls.start(animate);
-            }
-            if (isPresent) {
-                isPlayingExitAnimation.current = false;
+    getComponent: function () { return ExitComponent; },
+};
+
+var AnimatePropType;
+(function (AnimatePropType) {
+    AnimatePropType["Target"] = "Target";
+    AnimatePropType["VariantLabel"] = "VariantLabel";
+    AnimatePropType["AnimationSubscription"] = "AnimationSubscription";
+})(AnimatePropType || (AnimatePropType = {}));
+
+function shallowCompare(next, prev) {
+    if (prev === null)
+        return false;
+    var prevLength = prev.length;
+    if (prevLength !== next.length)
+        return false;
+    for (var i = 0; i < prevLength; i++) {
+        if (prev[i] !== next[i])
+            return false;
+    }
+    return true;
+}
+
+var hasUpdated = function (prev, next) {
+    return (next !== undefined &&
+        (Array.isArray(prev) && Array.isArray(next)
+            ? !shallowCompare(next, prev)
+            : prev !== next));
+};
+function targetWithoutTransition(_a, mergeTransitionEnd) {
+    if (mergeTransitionEnd === void 0) { mergeTransitionEnd = false; }
+    var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
+    return mergeTransitionEnd
+        ? tslib.__assign(tslib.__assign({}, target), transitionEnd)
+        : target;
+}
+/**
+ * Handle the `animate` prop when its an object of values, ie:
+ *
+ * ```jsx
+ * <motion.div animate={{ opacity: 1 }} />
+ * ```
+ *
+ * @internalremarks
+ * It might be worth consolidating this with `use-variants`
+ *
+ * ```jsx
+ * <motion.div animate="visible" />
+ * ```
+ *
+ * @param target
+ * @param controls
+ * @param values
+ * @param transition
+ *
+ * @internal
+ */
+function useAnimateProp(targetAndTransition, controls, visualElement, defaultTransition) {
+    var isInitialRender = React.useRef(true);
+    var prevValues = React.useRef(null);
+    if (!prevValues.current) {
+        prevValues.current = targetWithoutTransition(targetAndTransition, true);
+    }
+    React.useEffect(function () {
+        var targetToAnimate = {};
+        // These are the values we're actually animating
+        var animatingTarget = targetWithoutTransition(targetAndTransition);
+        // This is the target as it'll be once transitionEnd values are applied
+        var finalTarget = targetWithoutTransition(targetAndTransition, true);
+        // Detect which values have changed between renders
+        for (var key in animatingTarget) {
+            // This value should animate on mount if this value doesn't already exist (wasn't
+            // defined in `style` or `initial`) or if it does exist and it's already changed.
+            var shouldAnimateOnMount = isInitialRender.current &&
+                (!visualElement.hasValue(key) ||
+                    visualElement.getValue(key).get() !== finalTarget[key]);
+            // If this value has updated between renders or it's we're animating this value on mount,
+            // add it to the animate target.
+            var isValidValue = finalTarget[key] !== null;
+            var valueHasUpdated = hasUpdated(prevValues.current[key], finalTarget[key]);
+            if (isValidValue && (valueHasUpdated || shouldAnimateOnMount)) {
+                targetToAnimate[key] = animatingTarget[key];
             }
-        }, [animate, controls, custom, exit, isPresent, onExitComplete, props]);
+        }
+        isInitialRender.current = false;
+        prevValues.current = tslib.__assign(tslib.__assign({}, prevValues.current), finalTarget);
+        if (Object.keys(targetToAnimate).length) {
+            controls.start(tslib.__assign(tslib.__assign({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
+        }
+    }, [targetAndTransition]);
+}
+
+var labelsToArray = function (label) {
+    if (!label) {
+        return [];
+    }
+    if (Array.isArray(label)) {
+        return label;
+    }
+    return [label];
+};
+var resolveVariantLabels = function (variant) {
+    var unresolvedVariant = variant instanceof MotionValue ? variant.get() : variant;
+    return Array.from(new Set(labelsToArray(unresolvedVariant)));
+};
+/**
+ * Hooks in React sometimes accept a dependency array as their final argument. (ie useEffect/useMemo)
+ * When values in this array change, React re-runs the dependency. However if the array
+ * contains a variable number of items, React throws an error.
+ */
+var asDependencyList = function (list) { return [
+    list.join(","),
+]; };
+
+var hasVariantChanged = function (oldVariant, newVariant) {
+    return oldVariant.join(",") !== newVariant.join(",");
+};
+/**
+ * Handle variants and the `animate` prop when its set as variant labels.
+ *
+ * @param initial - Initial variant(s)
+ * @param animate - Variant(s) to animate to
+ * @param inherit - `true` is inheriting animations from parent
+ * @param controls - Animation controls
+ *
+ * @internal
+ */
+function useVariants(initial, animate, inherit, controls) {
+    var targetVariants = resolveVariantLabels(animate);
+    var context = React.useContext(MotionContext);
+    var parentAlreadyMounted = context.hasMounted && context.hasMounted.current;
+    var hasMounted = React.useRef(false);
+    React.useEffect(function () {
+        var shouldAnimate = false;
+        if (inherit) {
+            // If we're inheriting variant changes and the parent has already
+            // mounted when this component loads, we need to manually trigger
+            // this animation.
+            shouldAnimate = !!parentAlreadyMounted;
+            targetVariants = resolveVariantLabels(context.animate);
+        }
+        else {
+            shouldAnimate =
+                hasMounted.current ||
+                    hasVariantChanged(resolveVariantLabels(initial), targetVariants);
+        }
+        shouldAnimate && controls.start(targetVariants);
+        hasMounted.current = true;
+    }, asDependencyList(targetVariants));
+}
+
+/**
+ * `useAnimationGroupSubscription` allows a component to subscribe to an
+ * externally-created `AnimationControls`, created by the `useAnimation` hook.
+ *
+ * @param animation
+ * @param controls
+ *
+ * @internal
+ */
+function useAnimationGroupSubscription(animation, controls) {
+    var unsubscribe = React.useMemo(function () { return animation.subscribe(controls); }, [
+        animation,
+    ]);
+    React.useEffect(function () { return function () {
+        unsubscribe && unsubscribe();
+    }; }, [unsubscribe]);
+}
+
+var _a, _b;
+var AnimatePropComponents = (_a = {},
+    _a[AnimatePropType.Target] = makeRenderlessComponent(function (_a) {
+        var animate = _a.animate, controls = _a.controls, visualElement = _a.visualElement, transition = _a.transition;
+        return useAnimateProp(animate, controls, visualElement, transition);
+    }),
+    _a[AnimatePropType.VariantLabel] = makeRenderlessComponent(function (_a) {
+        var animate = _a.animate, _b = _a.inherit, inherit = _b === void 0 ? true : _b, controls = _a.controls, initial = _a.initial;
+        return useVariants(initial, animate, inherit, controls);
     }),
+    _a[AnimatePropType.AnimationSubscription] = makeRenderlessComponent(function (_a) {
+        var animate = _a.animate, controls = _a.controls;
+        return useAnimationGroupSubscription(animate, controls);
+    }),
+    _a);
+var isVariantLabel$1 = function (prop) {
+    return Array.isArray(prop) || typeof prop === "string";
+};
+var isAnimationSubscription = function (_a) {
+    var animate = _a.animate;
+    return animate instanceof AnimationControls;
+};
+var animationProps = ["initial", "animate", "whileTap", "whileHover"];
+var animatePropTypeTests = (_b = {},
+    _b[AnimatePropType.Target] = function (props) {
+        return (props.animate !== undefined &&
+            !isVariantLabel$1(props.animate) &&
+            !isAnimationSubscription(props));
+    },
+    _b[AnimatePropType.VariantLabel] = function (props) {
+        return (props.variants !== undefined ||
+            animationProps.some(function (key) { return typeof props[key] === "string"; }));
+    },
+    _b[AnimatePropType.AnimationSubscription] = isAnimationSubscription,
+    _b);
+var getAnimationComponent = function (props) {
+    var animatePropType = undefined;
+    for (var key in AnimatePropType) {
+        if (animatePropTypeTests[key](props)) {
+            animatePropType = key;
+        }
+    }
+    return animatePropType ? AnimatePropComponents[animatePropType] : undefined;
+};
+/**
+ * @public
+ */
+var Animation = {
+    key: "animation",
+    shouldRender: function () { return true; },
+    getComponent: getAnimationComponent,
 };
 
 function tweenAxis(target, prev, next, p) {
@@ -5342,14 +5379,10 @@ var Animate = /** @class */ (function (_super) {
     };
     return Animate;
 }(React.Component));
-var AnimateLayout = {
-    key: "animate-layout",
-    shouldRender: function (props) { return !!props.layout || !!props.layoutId; },
-    Component: function (props) {
-        var _a = usePresence(), safeToRemove = _a[1];
-        return React.createElement(Animate, tslib.__assign({}, props, { safeToRemove: safeToRemove }));
-    },
-};
+function AnimateLayoutContextProvider(props) {
+    var _a = usePresence(), safeToRemove = _a[1];
+    return React.createElement(Animate, tslib.__assign({}, props, { safeToRemove: safeToRemove }));
+}
 function hasMoved(a, b) {
     return hasAxisMoved(a.x, b.x) || hasAxisMoved(a.y, b.y);
 }
@@ -5372,6 +5405,14 @@ function compress(min, max, easing) {
 }
 var easeCrossfadeIn = compress(0, 0.5, popcorn.circOut);
 var easeCrossfadeOut = compress(0.5, 0.95, popcorn.linear);
+/**
+ * @public
+ */
+var AnimateLayout = {
+    key: "animate-layout",
+    shouldRender: function (props) { return !!props.layout || !!props.layoutId; },
+    getComponent: function () { return AnimateLayoutContextProvider; },
+};
 
 /**
  * This component is responsible for scheduling the measuring of the motion component
@@ -5420,15 +5461,16 @@ var Measure = /** @class */ (function (_super) {
     };
     return Measure;
 }(React__default.Component));
+function MeasureContextProvider(props) {
+    var syncLayout = React.useContext(SharedLayoutContext);
+    return React__default.createElement(Measure, tslib.__assign({}, props, { syncLayout: syncLayout }));
+}
 var MeasureLayout = {
     key: "measure-layout",
     shouldRender: function (props) {
         return !!props.drag || !!props.layout || !!props.layoutId;
     },
-    Component: function (props) {
-        var syncLayout = React.useContext(SharedLayoutContext);
-        return React__default.createElement(Measure, tslib.__assign({}, props, { syncLayout: syncLayout }));
-    },
+    getComponent: function () { return MeasureContextProvider; },
 };
 
 /**
@@ -5476,6 +5518,7 @@ function createMotionProxy(defaultFeatures) {
  */
 var motion = /*@__PURE__*/ createMotionProxy([
     MeasureLayout,
+    Animation,
     Drag,
     Gestures,
     Exit,
@@ -5484,7 +5527,7 @@ var motion = /*@__PURE__*/ createMotionProxy([
 /**
  * @public
  */
-var m = /*@__PURE__*/ createMotionProxy([]);
+var m = /*@__PURE__*/ createMotionProxy([MeasureLayout]);
 
 function useForceUpdate() {
     var _a = React.useState(0), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
@@ -6884,13 +6927,18 @@ function useAnimatedState(initialState) {
     return [animationState, startAnimation];
 }
 
+exports.AnimateLayoutFeature = AnimateLayout;
 exports.AnimatePresence = AnimatePresence;
 exports.AnimateSharedLayout = AnimateSharedLayout;
 exports.AnimationControls = AnimationControls;
+exports.AnimationFeature = Animation;
 exports.DragControls = DragControls;
+exports.DragFeature = Drag;
+exports.ExitFeature = Exit;
+exports.GesturesFeature = Gestures;
+exports.MotionConfig = MotionConfig;
+exports.MotionConfigContext = MotionConfigContext;
 exports.MotionContext = MotionContext;
-exports.MotionPluginContext = MotionPluginContext;
-exports.MotionPlugins = MotionPlugins;
 exports.MotionValue = MotionValue;
 exports.PresenceContext = PresenceContext;
 exports.ReducedMotion = ReducedMotion;