framer-motion 12.23.10 → 12.23.11

package/dist/framer-motion.dev.js

@@ -8286,8 +8286,7 @@
             {
                 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() {
@@ -8297,7 +8296,7 @@
             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();
             }
@@ -8310,6 +8309,15 @@
             }
             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)();
@@ -9660,6 +9668,11 @@
                 });
                 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;
     }
@@ -9953,6 +9966,20 @@
         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
@@ -9995,31 +10022,17 @@
     }
     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);
@@ -10172,9 +10185,6 @@
                 let isInherited = prop === context[type] &&
                     prop !== props[type] &&
                     propIsVariant;
-                /**
-                 *
-                 */
                 if (isInherited &&
                     isInitialRender &&
                     visualElement.manuallyAnimateOnMount) {
@@ -10295,9 +10305,6 @@
                  */
                 typeState.prevProp = prop;
                 typeState.prevResolvedValues = resolvedValues;
-                /**
-                 *
-                 */
                 if (typeState.isActive) {
                     encounteredKeys = { ...encounteredKeys, ...resolvedValues };
                 }
@@ -10311,10 +10318,30 @@
                 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,
+                        };
+                    }));
                 }
             }
             /**