motion 13.5.0 → 14.0.0

package/dist/motion.dev.js

@@ -4381,36 +4381,29 @@
         return state;
     }
     function resolveVariantFromProps(props, definition, custom, visualElement) {
+        const resolveFunction = (def) => typeof def === "function"
+            ? def(custom !== undefined ? custom : props.custom, ...getValueState(visualElement))
+            : def;
         /**
-         * If the variant definition is a function, resolve.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        /**
-         * If the variant definition is a variant label, or
-         * the function returned a variant label, resolve.
+         * Resolve a function, then a variant label (which the function may have
+         * returned), then a function again as the label may point to one. The
+         * final function can only return a target object.
          */
+        definition = resolveFunction(definition);
         if (typeof definition === "string") {
             definition = props.variants && props.variants[definition];
         }
-        /**
-         * At this point we've resolved both functions and variant labels,
-         * but the resolved variant label might itself have been a function.
-         * If so, resolve. This can only have returned a valid target object.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        return definition;
+        return resolveFunction(definition);
     }
 
     function resolveVariant(visualElement, definition, custom) {
-        const props = visualElement.getProps();
-        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
+        return resolveVariantFromProps(visualElement.getProps(), definition, custom, visualElement);
     }
+    /**
+     * Exit variants resolve with AnimatePresence's custom, every other type
+     * with the element's own.
+     */
+    const getTypeCustom = (visualElement, type) => type === "exit" ? visualElement.presenceContext?.custom : undefined;
 
     const positionalKeys = new Set([
         "width",
@@ -4493,7 +4486,7 @@
      * had been set to true in the meantime.
      */
     function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
-        const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
+        const shouldBlock = key in protectedKeys && !needsAnimating[key];
         needsAnimating[key] = false;
         return shouldBlock;
     }
@@ -4508,9 +4501,7 @@
         if (transitionOverride)
             transition = transitionOverride;
         const animations = [];
-        const animationTypeState = type &&
-            visualElement.animationState &&
-            visualElement.animationState.getState()[type];
+        const animationTypeState = type && visualElement.animationState?.getState()[type];
         const path = transition?.path;
         if (path) {
             // path mutates `target` to claim x/y; loop below skips them.
@@ -4584,75 +4575,46 @@
     }
 
     function animateVariant(visualElement, variant, options = {}) {
-        const resolved = resolveVariant(visualElement, variant, options.type === "exit"
-            ? visualElement.presenceContext?.custom
-            : undefined);
-        let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
-        if (options.transitionOverride) {
-            transition = options.transitionOverride;
-        }
-        /**
-         * If we have a variant, create a callback that runs it as an animation.
-         * Otherwise, we resolve a Promise immediately for a composable no-op.
-         */
-        const getAnimation = resolved
-            ? () => Promise.all(animateTarget(visualElement, resolved, options))
-            : () => Promise.resolve();
-        /**
-         * If we have children, create a callback that runs all their animations.
-         * Otherwise, we resolve a Promise immediately for a composable no-op.
-         */
-        const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
-            ? (forwardDelay = 0) => {
-                const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
-                return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
-            }
-            : () => Promise.resolve();
+        const resolved = resolveVariant(visualElement, variant, getTypeCustom(visualElement, options.type));
+        const transition = options.transitionOverride ||
+            (resolved?.transition ?? (visualElement.getDefaultTransition() || {}));
+        const getAnimation = () => Promise.all(resolved ? animateTarget(visualElement, resolved, options) : []);
+        const getChildAnimations = (delay = 0) => {
+            const { variantChildren } = visualElement;
+            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
+            const animations = [];
+            variantChildren?.forEach((child) => {
+                child.notify("AnimationStart", variant);
+                animations.push(animateVariant(child, variant, {
+                    ...options,
+                    delay: delay +
+                        (typeof delayChildren === "function"
+                            ? 0
+                            : delayChildren) +
+                        calcChildStagger(variantChildren, child, delayChildren, staggerChildren, staggerDirection),
+                }).then(() => child.notify("AnimationComplete", variant)));
+            });
+            return Promise.all(animations);
+        };
         /**
-         * If the transition explicitly defines a "when" option, we need to resolve either
-         * this animation or all children animations before playing the other.
+         * when: "beforeChildren" | "afterChildren" runs this element's animation
+         * and its children's in sequence.
          */
         const { when } = transition;
-        if (when) {
-            const [first, last] = when === "beforeChildren"
-                ? [getAnimation, getChildAnimations]
-                : [getChildAnimations, getAnimation];
-            return first().then(() => last());
-        }
-        else {
-            return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
-        }
-    }
-    function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
-        const animations = [];
-        for (const child of visualElement.variantChildren) {
-            child.notify("AnimationStart", variant);
-            animations.push(animateVariant(child, variant, {
-                ...options,
-                delay: delay +
-                    (typeof delayChildren === "function" ? 0 : delayChildren) +
-                    calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
-            }).then(() => child.notify("AnimationComplete", variant)));
-        }
-        return Promise.all(animations);
+        return when
+            ? when === "beforeChildren"
+                ? getAnimation().then(() => getChildAnimations())
+                : getChildAnimations().then(getAnimation)
+            : Promise.all([getAnimation(), getChildAnimations(options.delay)]);
     }
 
     function animateVisualElement(visualElement, definition, options = {}) {
         visualElement.notify("AnimationStart", definition);
-        let animation;
-        if (Array.isArray(definition)) {
-            const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
-            animation = Promise.all(animations);
-        }
-        else if (typeof definition === "string") {
-            animation = animateVariant(visualElement, definition, options);
-        }
-        else {
-            const resolvedDefinition = typeof definition === "function"
-                ? resolveVariant(visualElement, definition, options.custom)
-                : definition;
-            animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
-        }
+        const animation = Array.isArray(definition)
+            ? Promise.all(definition.map((variant) => animateVariant(visualElement, variant, options)))
+            : typeof definition === "string"
+                ? animateVariant(visualElement, definition, options)
+                : Promise.all(animateTarget(visualElement, resolveVariant(visualElement, definition, options.custom), options));
         return animation.then(() => {
             visualElement.notify("AnimationComplete", definition);
         });
@@ -5178,7 +5140,12 @@
             const onRemove = () => {
                 cancelOnChange();
                 render && !computed && this.cancel(render);
-                this.values.delete(name);
+                /**
+                 * A later set() of the same name has already removed this
+                 * entry, so leave the one that replaced it.
+                 */
+                this.values.get(name)?.onRemove === onRemove &&
+                    this.values.delete(name);
             };
             this.values.set(name, {
                 value,
@@ -5657,24 +5624,35 @@
         else if (key.startsWith("attr")) {
             return addAttrValue(element, state, key, value, convertAttrKey(key));
         }
-        const handler = isCSSVar(key) || key in element.style ? addStyleValue : addAttrValue;
+        /**
+         * Transforms and origins aren't CSS properties (bar `x`/`y` in some
+         * browsers), so check them by name rather than `key in element.style`.
+         */
+        const handler = transformProps.has(key) ||
+            originProps.has(key) ||
+            isCSSVar(key) ||
+            key in element.style
+            ? addStyleValue
+            : addAttrValue;
         return handler(element, state, key, value);
     };
     /**
      * Reads the current value of `key` from an SVG element as the origin of
      * an animation, as the SVG VisualElement does: transforms start from
      * their defaults, CSS variables and the few CSS-only properties come from
-     * computed style
-     * and everything else is read from the attribute, dash-cased
-     * (`strokeWidth` -> `stroke-width`) or, failing that, as written
-     * (`baseFrequency`).
+     * computed style, falling back to the attribute when that's empty (e.g.
+     * the element isn't rendered), and everything else is read from the
+     * attribute, dash-cased (`strokeWidth` -> `stroke-width`) or, failing
+     * that, as written (`baseFrequency`).
      */
     const readSVGValue = (element, key) => {
         if (transformProps.has(key)) {
             return numberValueTypes[key]?.default || 0;
         }
         if (isCSSVar(key) || cssStyleProperties.includes(key)) {
-            return readStyleValue(element, key);
+            return (readStyleValue(element, key) ||
+                element.getAttribute(camelToDash(key)) ||
+                0);
         }
         key = convertAttrKey(key);
         return (element.getAttribute(camelToDash(key)) ??
@@ -8259,8 +8237,20 @@
             if (this.projection && !this.projection.instance) {
                 this.projection.mount(instance);
             }
-            if (this.parent && this.isVariantNode && !this.isControllingVariants) {
-                this.removeFromVariantTree = this.parent.addVariantChild(this);
+            /**
+             * Join the closest variant node above, so its variant changes
+             * propagate here, unless inherit={false} cuts the chain.
+             */
+            if (this.isVariantNode && !this.isControllingVariants) {
+                let node = this;
+                do
+                    node = node.props.inherit !== false && node.parent;
+                while (node && !node.isVariantNode);
+                if (node) {
+                    const { variantChildren } = node;
+                    variantChildren.add(this);
+                    this.removeFromVariantTree = () => variantChildren.delete(this);
+                }
             }
             this.values.forEach((value, key) => this.bindToMotionValue(key, value));
             /**
@@ -8370,9 +8360,11 @@
         }
         sortNodePosition(other) {
             /**
-             * If these nodes aren't even of the same type we can't compare their depth.
+             * If either node isn't mounted, or they aren't even of the same type,
+             * we can't compare their document order.
              */
             if (!this.current ||
+                !other.current ||
                 !this.sortInstanceNodePosition ||
                 this.type !== other.type) {
                 return 0;
@@ -8478,24 +8470,6 @@
         getTransformPagePoint() {
             return this.props.transformPagePoint;
         }
-        getClosestVariantNode() {
-            return this.isVariantNode
-                ? this
-                : this.parent
-                    ? this.parent.getClosestVariantNode()
-                    : undefined;
-        }
-        /**
-         * Add a child visual element to our set of children.
-         */
-        addVariantChild(child) {
-            const closestVariantNode = this.getClosestVariantNode();
-            if (closestVariantNode) {
-                closestVariantNode.variantChildren &&
-                    closestVariantNode.variantChildren.add(child);
-                return () => closestVariantNode.variantChildren.delete(child);
-            }
-        }
         /**
          * Add a motion value and bind it to this visual element.
          */
@@ -8590,41 +8564,6 @@
         setBaseTarget(key, value) {
             this.baseTarget[key] = value;
         }
-        /**
-         * Find the base target for a value thats been removed from all animation
-         * props.
-         */
-        getBaseTarget(key) {
-            const { initial } = this.props;
-            let valueFromInitial;
-            if (typeof initial === "string" || typeof initial === "object") {
-                const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
-                if (variant) {
-                    valueFromInitial = variant[key];
-                }
-            }
-            /**
-             * If this value still exists in the current initial variant, read that.
-             */
-            if (initial && valueFromInitial !== undefined) {
-                return valueFromInitial;
-            }
-            /**
-             * Alternatively, if this VisualElement config has defined a getBaseTarget
-             * so we can read the value from an alternative source, try that.
-             */
-            const target = this.getBaseTargetFromProps(this.props, key);
-            if (target !== undefined && !isMotionValue(target))
-                return target;
-            /**
-             * If the value was initially defined on initial, but it doesn't any more,
-             * return undefined. Otherwise return the value as initially read from the DOM.
-             */
-            return this.initialValues[key] !== undefined &&
-                valueFromInitial === undefined
-                ? undefined
-                : this.baseTarget[key];
-        }
         on(eventName, callback) {
             if (!this.events[eventName]) {
                 this.events[eventName] = new SubscriptionManager();
@@ -8929,34 +8868,6 @@
         }
     }
 
-    const numVariantProps = variantProps.length;
-    /**
-     * Get variant context from a visual element's parent chain.
-     * Uses `any` type for visualElement to avoid circular dependencies.
-     */
-    function getVariantContext(visualElement) {
-        if (!visualElement)
-            return undefined;
-        if (!visualElement.isControllingVariants) {
-            const context = visualElement.parent
-                ? getVariantContext(visualElement.parent) || {}
-                : {};
-            if (visualElement.props.initial !== undefined) {
-                context.initial = visualElement.props.initial;
-            }
-            return context;
-        }
-        const context = {};
-        for (let i = 0; i < numVariantProps; i++) {
-            const name = variantProps[i];
-            const prop = visualElement.props[name];
-            if (isVariantLabel(prop) || prop === false) {
-                context[name] = prop;
-            }
-        }
-        return context;
-    }
-
     function shallowCompare(next, prev) {
         if (!Array.isArray(prev))
             return false;
@@ -8971,332 +8882,211 @@
     }
 
     const reversePriorityOrder = [...variantPriorityOrder].reverse();
-    const numAnimationTypes = variantPriorityOrder.length;
-    function createAnimateFunction(visualElement) {
-        return (animations) => {
-            return Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
-        };
-    }
+    /**
+     * Diffs the element's animation props (one layer per AnimationType, highest
+     * priority wins each value) against the previous call and starts animations
+     * for what changed.
+     *
+     * Uses `any` type for visualElement to avoid circular dependencies. It reads
+     * props, parent, presenceContext, variantChildren, enteringChildren,
+     * manuallyAnimateOnMount, blockInitialAnimation, getValue(),
+     * getBaseTargetFromProps(), baseTarget and initialValues.
+     */
     function createAnimationState(visualElement) {
-        let animate = createAnimateFunction(visualElement);
+        let animate = (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
         let state = createState();
         let isInitialRender = true;
         /**
-         * Track whether the animation state has been reset (e.g. via StrictMode
-         * double-invocation or Suspense unmount/remount). On the first
-         * animateChanges() call after a reset we need to behave like the initial
-         * render for variant-inheritance checks, even though isInitialRender is
-         * already false.
+         * After a reset (StrictMode, Suspense, AnimatePresence re-entry) the next
+         * animateChanges() mounts again, but initial={false} no longer applies.
          */
         let wasReset = false;
-        /**
-         * This function will be used to reduce the animation definitions for
-         * each active animation type into an object of resolved values for it.
-         */
-        const buildResolvedTypeValues = (type) => (acc, definition) => {
-            const resolved = resolveVariant(visualElement, definition, type === "exit"
-                ? visualElement.presenceContext?.custom
-                : undefined);
-            if (resolved) {
-                const { transition, transitionEnd, ...target } = resolved;
-                acc = { ...acc, ...target, ...transitionEnd };
-            }
-            return acc;
-        };
-        /**
-         * This just allows us to inject mocked animation functions
-         * @internal
-         */
-        function setAnimateFunction(makeAnimator) {
-            animate = makeAnimator(visualElement);
-        }
-        /**
-         * When we receive new props, we need to:
-         * 1. Create a list of protected keys for each type. This is a directory of
-         *    value keys that are currently being "handled" by types of a higher priority
-         *    so that whenever an animation is played of a given type, these values are
-         *    protected from being animated.
-         * 2. Determine if an animation type needs animating.
-         * 3. Determine if any values have been removed from a type and figure out
-         *    what to animate those to.
-         */
         function animateChanges(changedActiveType) {
-            const { props } = visualElement;
-            const context = getVariantContext(visualElement.parent) || {};
-            /**
-             * A list of animations that we'll build into as we iterate through the animation
-             * types. This will get executed at the end of the function.
-             */
+            const { props, parent, manuallyAnimateOnMount } = visualElement;
+            const isMounting = isInitialRender || wasReset;
             const animations = [];
             /**
-             * Keep track of which values have been removed. Then, as we hit lower priority
-             * animation types, we can check if they contain removed values and animate to that.
+             * Values removed from a type. A lower-priority type that defines
+             * them animates them back, otherwise they fall back to a base target.
              */
             const removedKeys = new Set();
             /**
-             * A dictionary of all encountered keys. This is an object to let us build into and
-             * copy it without iteration. Each time we hit an animation type we set its protected
-             * keys - the keys its not allowed to animate - to the latest version of this object.
+             * Values claimed by active, higher-priority types.
              */
             let encounteredKeys = {};
             /**
-             * If a variant has been removed at a given index, and this component is controlling
-             * variant animations, we want to ensure lower-priority variants are forced to animate.
+             * Once a type has been deactivated, lower-priority variant labels
+             * re-animate so variant children animate back too.
              */
             let removedVariantIndex = Infinity;
             /**
-             * Iterate through all animation types in reverse priority order. For each, we want to
-             * detect which values it's handling and whether or not they've changed (and therefore
-             * need to be animated). If any values have been removed, we want to detect those in
-             * lower priority props and flag for animation.
+             * Variant labels are inherited from the closest variant-controlling
+             * ancestor, unless an element on the way has inherit={false}.
              */
-            for (let i = 0; i < numAnimationTypes; i++) {
-                const type = reversePriorityOrder[i];
+            let source = visualElement;
+            do
+                source = source.props.inherit !== false && source.parent;
+            while (source && !source.isControllingVariants);
+            reversePriorityOrder.forEach((type, i) => {
                 const typeState = state[type];
-                const prop = props[type] !== undefined
-                    ? props[type]
-                    : context[type];
+                const ownProp = props[type];
+                const inheritedProp = source && source.props[type];
+                const prop = ownProp !== undefined
+                    ? ownProp
+                    : isVariantLabel(inheritedProp) || inheritedProp === false
+                        ? inheritedProp
+                        : undefined;
                 const propIsVariant = isVariantLabel(prop);
-                /**
-                 * If this type has *just* changed isActive status, set activeDelta
-                 * to that status. Otherwise set to null.
-                 */
                 const activeDelta = type === changedActiveType ? typeState.isActive : null;
                 if (activeDelta === false)
                     removedVariantIndex = i;
                 /**
-                 * If this prop is an inherited variant, rather than been set directly on the
-                 * component itself, we want to make sure we allow the parent to trigger animations.
-                 *
-                 * TODO: Can probably change this to a !isControllingVariants check
-                 */
-                let isInherited = prop === context[type] &&
-                    prop !== props[type] &&
-                    propIsVariant;
-                if (isInherited &&
-                    (isInitialRender || wasReset) &&
-                    visualElement.manuallyAnimateOnMount) {
-                    isInherited = false;
-                }
-                /**
-                 * Set all encountered keys so far as the protected keys for this type. This will
-                 * be any key that has been animated or otherwise handled by active, higher-priority types.
+                 * Inherited labels are animated by the parent through
+                 * variantChildren, unless this element mounted after its parent.
                  */
+                const isInherited = propIsVariant &&
+                    ownProp === undefined &&
+                    !(isMounting && manuallyAnimateOnMount);
                 typeState.protectedKeys = { ...encounteredKeys };
-                // Check if we can skip analysing this prop early
-                if (
-                // If it isn't active and hasn't *just* been set as inactive
-                (!typeState.isActive && activeDelta === null) ||
-                    // If we didn't and don't have any defined prop for this animation type
+                if ((!typeState.isActive && activeDelta === null) ||
                     (!prop && !typeState.prevProp) ||
-                    // Or if the prop doesn't define an animation
                     isAnimationControls(prop) ||
                     typeof prop === "boolean") {
-                    continue;
+                    return;
                 }
                 /**
-                 * If exit is already active and wasn't just activated, skip
-                 * re-processing to prevent interrupting running exit animations.
-                 * Re-resolving exit with a changed custom value can start new
-                 * value animations that stop the originals, leaving the exit
-                 * animation promise unresolved and the component stuck in the DOM.
+                 * Don't re-resolve a running exit: a changed custom would start
+                 * new value animations that stop the originals, leaving the exit
+                 * promise unresolved and the element stuck in the DOM.
                  */
                 if (type === "exit" && typeState.isActive && activeDelta !== true) {
-                    if (typeState.prevResolvedValues) {
-                        encounteredKeys = {
-                            ...encounteredKeys,
-                            ...typeState.prevResolvedValues,
-                        };
-                    }
-                    continue;
+                    encounteredKeys = {
+                        ...encounteredKeys,
+                        ...typeState.prevResolvedValues,
+                    };
+                    return;
                 }
-                /**
-                 * As we go look through the values defined on this type, if we detect
-                 * a changed value or a value that was removed in a higher priority, we set
-                 * this to true and add this prop to the animation list.
-                 */
                 const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
                 let shouldAnimateType = variantDidChange ||
-                    // If we're making this variant active, we want to always make it active
-                    (type === changedActiveType &&
-                        typeState.isActive &&
-                        !isInherited &&
-                        propIsVariant) ||
-                    // If we removed a higher-priority variant (i is in reverse order)
-                    (i > removedVariantIndex && propIsVariant);
+                    (propIsVariant &&
+                        ((activeDelta && !isInherited) || i > removedVariantIndex));
                 let handledRemovedValues = false;
-                /**
-                 * As animations can be set as variant lists, variants or target objects, we
-                 * coerce everything to an array if it isn't one already
-                 */
                 const definitionList = Array.isArray(prop) ? prop : [prop];
-                /**
-                 * Build an object of all the resolved values. We'll use this in the subsequent
-                 * animateChanges calls to determine whether a value has changed.
-                 */
-                let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {});
-                if (activeDelta === false)
-                    resolvedValues = {};
-                /**
-                 * Now we need to loop through all the keys in the prev prop and this prop,
-                 * and decide:
-                 * 1. If the value has changed, and needs animating
-                 * 2. If it has been removed, and needs adding to the removedKeys set
-                 * 3. If it has been removed in a higher priority type and needs animating
-                 * 4. If it hasn't been removed in a higher priority but hasn't changed, and
-                 *    needs adding to the type's protectedKeys list.
-                 */
-                const { prevResolvedValues = {} } = typeState;
-                const allKeys = {
-                    ...prevResolvedValues,
-                    ...resolvedValues,
-                };
-                const markToAnimate = (key) => {
-                    shouldAnimateType = true;
-                    if (removedKeys.has(key)) {
-                        handledRemovedValues = true;
-                        removedKeys.delete(key);
+                let resolvedValues = {};
+                if (activeDelta !== false) {
+                    for (const definition of definitionList) {
+                        const { transition, transitionEnd, ...target } = resolveVariant(visualElement, definition, getTypeCustom(visualElement, type)) || {};
+                        resolvedValues = {
+                            ...resolvedValues,
+                            ...target,
+                            ...transitionEnd,
+                        };
                     }
-                    typeState.needsAnimating[key] = true;
-                    const motionValue = visualElement.getValue(key);
-                    if (motionValue)
-                        motionValue.liveStyle = false;
-                };
-                for (const key in allKeys) {
+                }
+                const { prevResolvedValues } = typeState;
+                for (const key in { ...prevResolvedValues, ...resolvedValues }) {
+                    if (key in encounteredKeys)
+                        continue;
                     const next = resolvedValues[key];
                     const prev = prevResolvedValues[key];
-                    // If we've already handled this we can just skip ahead
-                    if (encounteredKeys.hasOwnProperty(key))
-                        continue;
                     /**
-                     * If the value has changed, we probably want to animate it.
+                     * Keyframes compare by value, but replay whenever the
+                     * variant label changed.
                      */
-                    let valueHasChanged = false;
-                    if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
-                        valueHasChanged =
-                            !shallowCompare(next, prev) || variantDidChange;
-                    }
-                    else {
-                        valueHasChanged = next !== prev;
-                    }
-                    if (valueHasChanged) {
-                        if (next !== undefined && next !== null) {
-                            // If next is defined and doesn't equal prev, it needs animating
-                            markToAnimate(key);
-                        }
-                        else {
-                            // If it's undefined, it's been removed.
-                            removedKeys.add(key);
-                        }
+                    const valueHasChanged = Array.isArray(next) && Array.isArray(prev)
+                        ? !shallowCompare(next, prev) || variantDidChange
+                        : next !== prev;
+                    if (valueHasChanged &&
+                        (next === undefined || next === null)) {
+                        removedKeys.add(key);
                     }
-                    else if (next !== undefined && removedKeys.has(key)) {
-                        /**
-                         * If next hasn't changed and it isn't undefined, we want to check if it's
-                         * been removed by a higher priority
-                         */
-                        markToAnimate(key);
+                    else if (valueHasChanged ||
+                        (next !== undefined && removedKeys.has(key))) {
+                        shouldAnimateType = true;
+                        if (removedKeys.delete(key))
+                            handledRemovedValues = true;
+                        typeState.needsAnimating[key] = true;
+                        const motionValue = visualElement.getValue(key);
+                        if (motionValue)
+                            motionValue.liveStyle = false;
                     }
                     else {
-                        /**
-                         * If it hasn't changed, we add it to the list of protected values
-                         * to ensure it doesn't get animated.
-                         */
                         typeState.protectedKeys[key] = true;
                     }
                 }
-                /**
-                 * Update the typeState so next time animateChanges is called we can compare the
-                 * latest prop and resolvedValues to these.
-                 */
                 typeState.prevProp = prop;
                 typeState.prevResolvedValues = resolvedValues;
                 if (typeState.isActive) {
                     encounteredKeys = { ...encounteredKeys, ...resolvedValues };
                 }
-                if ((isInitialRender || wasReset) &&
-                    visualElement.blockInitialAnimation) {
-                    shouldAnimateType = false;
-                }
-                /**
-                 * If this is an inherited prop we want to skip this animation
-                 * unless the inherited variants haven't changed on this render.
-                 */
-                const willAnimateViaParent = isInherited && variantDidChange;
-                const needsAnimating = !willAnimateViaParent || handledRemovedValues;
-                if (shouldAnimateType && needsAnimating) {
-                    animations.push(...definitionList.map((animation) => {
+                if (shouldAnimateType &&
+                    (!(isInherited && variantDidChange) || handledRemovedValues)) {
+                    for (const animation of definitionList) {
                         const options = { type };
                         /**
-                         * If we're performing the initial animation, but we're not
-                         * rendering at the same time as the variant-controlling parent,
-                         * we want to use the parent's transition to calculate the stagger.
+                         * Elements that mount into an already-mounted parent
+                         * animate themselves, staggered by the parent variant's
+                         * delayChildren.
                          */
                         if (typeof animation === "string" &&
-                            (isInitialRender || wasReset) &&
-                            !willAnimateViaParent &&
-                            visualElement.manuallyAnimateOnMount &&
-                            visualElement.parent) {
-                            const { parent } = visualElement;
-                            const parentVariant = resolveVariant(parent, animation);
-                            if (parent.enteringChildren && parentVariant) {
-                                const { delayChildren } = parentVariant.transition || {};
-                                options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
-                            }
+                            isMounting &&
+                            manuallyAnimateOnMount &&
+                            parent?.enteringChildren) {
+                            const delayChildren = resolveVariant(parent, animation)
+                                ?.transition?.delayChildren;
+                            options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
                         }
-                        return {
-                            animation: animation,
-                            options,
-                        };
-                    }));
+                        animations.push({ animation, options });
+                    }
                 }
-            }
+            });
             /**
-             * If there are some removed value that haven't been dealt with,
-             * we need to create a new animation that falls back either to the value
-             * defined in the style prop, or the last read value.
+             * Removed values that no lower-priority type defines animate back to
+             * initial, then style, then the value as first read. If initial no
+             * longer defines a value it once did, it stays where it is.
              */
             if (removedKeys.size) {
+                const { initial } = props;
                 const fallbackAnimation = {};
-                /**
-                 * If the initial prop contains a transition we can use that, otherwise
-                 * allow the animation function to use the visual element's default.
-                 */
-                if (typeof props.initial !== "boolean") {
-                    const initialTransition = resolveVariant(visualElement, Array.isArray(props.initial)
-                        ? props.initial[0]
-                        : props.initial);
-                    if (initialTransition && initialTransition.transition) {
-                        fallbackAnimation.transition = initialTransition.transition;
-                    }
+                const resolvedInitial = typeof initial !== "boolean" &&
+                    resolveVariant(visualElement, Array.isArray(initial) ? initial[0] : initial, visualElement.presenceContext?.custom);
+                if (resolvedInitial && resolvedInitial.transition) {
+                    fallbackAnimation.transition = resolvedInitial.transition;
                 }
                 removedKeys.forEach((key) => {
-                    const fallbackTarget = visualElement.getBaseTarget(key);
                     const motionValue = visualElement.getValue(key);
                     if (motionValue)
                         motionValue.liveStyle = true;
-                    // @ts-expect-error - @mattgperry to figure if we should do something here
-                    fallbackAnimation[key] = fallbackTarget ?? null;
+                    const fromInitial = resolvedInitial && !Array.isArray(initial)
+                        ? resolvedInitial[key]
+                        : undefined;
+                    const fromProps = visualElement.getBaseTargetFromProps(props, key);
+                    fallbackAnimation[key] =
+                        (fromInitial !== undefined
+                            ? fromInitial
+                            : fromProps !== undefined && !isMotionValue(fromProps)
+                                ? fromProps
+                                : visualElement.initialValues[key] === undefined
+                                    ? visualElement.baseTarget[key]
+                                    : undefined) ?? null;
                 });
                 animations.push({ animation: fallbackAnimation });
             }
-            let shouldAnimate = Boolean(animations.length);
-            if (isInitialRender &&
-                (props.initial === false || props.initial === props.animate) &&
-                !visualElement.manuallyAnimateOnMount) {
-                shouldAnimate = false;
-            }
-            isInitialRender = false;
-            wasReset = false;
-            return shouldAnimate ? animate(animations) : Promise.resolve();
+            const blockAnimation = (isMounting && visualElement.blockInitialAnimation) ||
+                (isInitialRender &&
+                    !manuallyAnimateOnMount &&
+                    (props.initial === false || props.initial === props.animate));
+            isInitialRender = wasReset = false;
+            return !blockAnimation && animations.length
+                ? animate(animations)
+                : Promise.resolve();
         }
         /**
          * Change whether a certain animation type is active.
          */
         function setActive(type, isActive) {
-            // If the active state hasn't changed, we can safely do nothing here
             if (state[type].isActive === isActive)
                 return Promise.resolve();
-            // Propagate active change to children
             visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
             state[type].isActive = isActive;
             const animations = animateChanges(type);
@@ -9308,7 +9098,13 @@
         return {
             animateChanges,
             setActive,
-            setAnimateFunction,
+            /**
+             * Allows tests to inject a mocked animate function.
+             * @internal
+             */
+            setAnimateFunction: (makeAnimator) => {
+                animate = makeAnimator(visualElement);
+            },
             getState: () => state,
             reset: () => {
                 state = createState();
@@ -9325,24 +9121,45 @@
         }
         return false;
     }
-    function createTypeState(isActive = false) {
-        return {
-            isActive,
-            protectedKeys: {},
-            needsAnimating: {},
-            prevResolvedValues: {},
-        };
-    }
     function createState() {
-        return {
-            animate: createTypeState(true),
-            whileInView: createTypeState(),
-            whileHover: createTypeState(),
-            whileTap: createTypeState(),
-            whileDrag: createTypeState(),
-            whileFocus: createTypeState(),
-            exit: createTypeState(),
-        };
+        const state = {};
+        for (const type of variantPriorityOrder) {
+            state[type] = {
+                isActive: type === "animate",
+                protectedKeys: {},
+                needsAnimating: {},
+                prevResolvedValues: {},
+            };
+        }
+        return state;
+    }
+
+    const numVariantProps = variantProps.length;
+    /**
+     * Get variant context from a visual element's parent chain.
+     * Uses `any` type for visualElement to avoid circular dependencies.
+     */
+    function getVariantContext(visualElement) {
+        if (!visualElement)
+            return undefined;
+        if (!visualElement.isControllingVariants) {
+            const context = visualElement.parent
+                ? getVariantContext(visualElement.parent) || {}
+                : {};
+            if (visualElement.props.initial !== undefined) {
+                context.initial = visualElement.props.initial;
+            }
+            return context;
+        }
+        const context = {};
+        for (let i = 0; i < numVariantProps; i++) {
+            const name = variantProps[i];
+            const prop = visualElement.props[name];
+            if (isVariantLabel(prop) || prop === false) {
+                context[name] = prop;
+            }
+        }
+        return context;
     }
 
     /**
@@ -13471,6 +13288,7 @@
     exports.numberValueTypes = numberValueTypes;
     exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.optimizedAppearDataId = optimizedAppearDataId;
+    exports.originProps = originProps;
     exports.parseAnimateLayoutArgs = parseAnimateLayoutArgs;
     exports.parseCSSVariable = parseCSSVariable;
     exports.parseValueFromTransform = parseValueFromTransform;