framer-motion 12.23.10 → 12.23.11

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var featureBundle = require('./feature-bundle-CQ-jKhGL.js');
+var featureBundle = require('./feature-bundle-PNQ-8QDo.js');
 require('react');
 require('motion-dom');
 require('motion-utils');

package/dist/cjs/dom.js

@@ -986,8 +986,7 @@ class VisualElement {
         if (process.env.NODE_ENV !== "production") {
             motionUtils.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
         }
-        if (this.parent)
-            this.parent.children.add(this);
+        this.parent?.addChild(this);
         this.update(this.props, this.presenceContext);
     }
     unmount() {
@@ -997,7 +996,7 @@ class VisualElement {
         this.valueSubscriptions.forEach((remove) => remove());
         this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
-        this.parent && this.parent.children.delete(this);
+        this.parent?.removeChild(this);
         for (const key in this.events) {
             this.events[key].clear();
         }
@@ -1010,6 +1009,15 @@ class VisualElement {
         }
         this.current = null;
     }
+    addChild(child) {
+        this.children.add(child);
+        this.enteringChildren ?? (this.enteringChildren = new Set());
+        this.enteringChildren.add(child);
+    }
+    removeChild(child) {
+        this.children.delete(child);
+        this.enteringChildren && this.enteringChildren.delete(child);
+    }
     bindToMotionValue(key, value) {
         if (this.valueSubscriptions.has(key)) {
             this.valueSubscriptions.get(key)();

package/dist/cjs/{feature-bundle-CQ-jKhGL.js → feature-bundle-PNQ-8QDo.js}

@@ -2960,8 +2960,7 @@ class VisualElement {
         if (process.env.NODE_ENV !== "production") {
             motionUtils.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
         }
-        if (this.parent)
-            this.parent.children.add(this);
+        this.parent?.addChild(this);
         this.update(this.props, this.presenceContext);
     }
     unmount() {
@@ -2971,7 +2970,7 @@ class VisualElement {
         this.valueSubscriptions.forEach((remove) => remove());
         this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
-        this.parent && this.parent.children.delete(this);
+        this.parent?.removeChild(this);
         for (const key in this.events) {
             this.events[key].clear();
         }
@@ -2984,6 +2983,15 @@ class VisualElement {
         }
         this.current = null;
     }
+    addChild(child) {
+        this.children.add(child);
+        this.enteringChildren ?? (this.enteringChildren = new Set());
+        this.enteringChildren.add(child);
+    }
+    removeChild(child) {
+        this.children.delete(child);
+        this.enteringChildren && this.enteringChildren.delete(child);
+    }
     bindToMotionValue(key, value) {
         if (this.valueSubscriptions.has(key)) {
             this.valueSubscriptions.get(key)();
@@ -4183,6 +4191,11 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
             });
             wantsHandoff.current = false;
         }
+        /**
+         * Now we've finished triggering animations for this element we
+         * can wipe the enteringChildren set for the next render.
+         */
+        visualElement.enteringChildren = undefined;
     });
     return visualElement;
 }
@@ -4436,6 +4449,20 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     return animations;
 }
 
+function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
+    const index = Array.from(children)
+        .sort((a, b) => a.sortNodePosition(b))
+        .indexOf(child);
+    const numChildren = children.size;
+    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+    const delayIsFunction = typeof delayChildren === "function";
+    return delayIsFunction
+        ? delayChildren(index, numChildren)
+        : staggerDirection === 1
+            ? index * staggerChildren
+            : maxStaggerDuration - index * staggerChildren;
+}
+
 function animateVariant(visualElement, variant, options = {}) {
     const resolved = resolveVariant(visualElement, variant, options.type === "exit"
         ? visualElement.presenceContext?.custom
@@ -4478,31 +4505,17 @@ function animateVariant(visualElement, variant, options = {}) {
 }
 function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
     const animations = [];
-    const numChildren = visualElement.variantChildren.size;
-    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
-    const delayIsFunction = typeof delayChildren === "function";
-    const generateStaggerDuration = delayIsFunction
-        ? (i) => delayChildren(i, numChildren)
-        : // Support deprecated staggerChildren
-            staggerDirection === 1
-                ? (i = 0) => i * staggerChildren
-                : (i = 0) => maxStaggerDuration - i * staggerChildren;
-    Array.from(visualElement.variantChildren)
-        .sort(sortByTreeOrder)
-        .forEach((child, i) => {
+    for (const child of visualElement.variantChildren) {
         child.notify("AnimationStart", variant);
         animations.push(animateVariant(child, variant, {
             ...options,
             delay: delay +
-                (delayIsFunction ? 0 : delayChildren) +
-                generateStaggerDuration(i),
+                (typeof delayChildren === "function" ? 0 : delayChildren) +
+                calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
         }).then(() => child.notify("AnimationComplete", variant)));
-    });
+    }
     return Promise.all(animations);
 }
-function sortByTreeOrder(a, b) {
-    return a.sortNodePosition(b);
-}
 
 function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationStart", definition);
@@ -4655,9 +4668,6 @@ function createAnimationState(visualElement) {
             let isInherited = prop === context[type] &&
                 prop !== props[type] &&
                 propIsVariant;
-            /**
-             *
-             */
             if (isInherited &&
                 isInitialRender &&
                 visualElement.manuallyAnimateOnMount) {
@@ -4778,9 +4788,6 @@ function createAnimationState(visualElement) {
              */
             typeState.prevProp = prop;
             typeState.prevResolvedValues = resolvedValues;
-            /**
-             *
-             */
             if (typeState.isActive) {
                 encounteredKeys = { ...encounteredKeys, ...resolvedValues };
             }
@@ -4794,10 +4801,30 @@ function createAnimationState(visualElement) {
             const willAnimateViaParent = isInherited && variantDidChange;
             const needsAnimating = !willAnimateViaParent || handledRemovedValues;
             if (shouldAnimateType && needsAnimating) {
-                animations.push(...definitionList.map((animation) => ({
-                    animation: animation,
-                    options: { type },
-                })));
+                animations.push(...definitionList.map((animation) => {
+                    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.
+                     */
+                    if (typeof animation === "string" &&
+                        isInitialRender &&
+                        !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);
+                        }
+                    }
+                    return {
+                        animation: animation,
+                        options,
+                    };
+                }));
             }
         }
         /**

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var featureBundle = require('./feature-bundle-CQ-jKhGL.js');
+var featureBundle = require('./feature-bundle-PNQ-8QDo.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

package/dist/cjs/m.js

@@ -909,6 +909,11 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
             });
             wantsHandoff.current = false;
         }
+        /**
+         * Now we've finished triggering animations for this element we
+         * can wipe the enteringChildren set for the next render.
+         */
+        visualElement.enteringChildren = undefined;
     });
     return visualElement;
 }