framer-motion 12.20.5 → 12.22.0

package/dist/framer-motion.dev.js

@@ -4492,6 +4492,29 @@
         return isSVGElement(element) && element.tagName === "svg";
     }
 
+    function getOriginIndex(from, total) {
+        if (from === "first") {
+            return 0;
+        }
+        else {
+            const lastIndex = total - 1;
+            return from === "last" ? lastIndex : lastIndex / 2;
+        }
+    }
+    function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+        return (i, total) => {
+            const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
+            const distance = Math.abs(fromIndex - i);
+            let delay = duration * distance;
+            if (ease) {
+                const maxDelay = total * duration;
+                const easingFunction = easingDefinitionToFunction(ease);
+                delay = easingFunction(delay / maxDelay) * maxDelay;
+            }
+            return startDelay + delay;
+        };
+    }
+
     function transform(...args) {
         const useImmediate = !Array.isArray(args[0]);
         const argOffset = useImmediate ? 0 : -1;
@@ -9239,7 +9262,7 @@
         const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
             ? (forwardDelay = 0) => {
                 const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
-                return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
+                return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
             }
             : () => Promise.resolve();
         /**
@@ -9257,19 +9280,26 @@
             return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
         }
     }
-    function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
+    function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
         const animations = [];
-        const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
-        const generateStaggerDuration = staggerDirection === 1
-            ? (i = 0) => i * staggerChildren
-            : (i = 0) => maxStaggerDuration - i * staggerChildren;
+        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) => {
             child.notify("AnimationStart", variant);
             animations.push(animateVariant(child, variant, {
                 ...options,
-                delay: delayChildren + generateStaggerDuration(i),
+                delay: delay +
+                    (delayIsFunction ? 0 : delayChildren) +
+                    generateStaggerDuration(i),
             }).then(() => child.notify("AnimationComplete", variant)));
         });
         return Promise.all(animations);
@@ -9792,7 +9822,7 @@
      * @internal
      */
     class PanSession {
-        constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
+        constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, } = {}) {
             /**
              * @internal
              */
@@ -9820,8 +9850,8 @@
                 const isPanStarted = this.startEvent !== null;
                 // Only start panning if the offset is larger than 3 pixels. If we make it
                 // any larger than this we'll want to reset the pointer history
-                // on the first update to avoid visual snapping to the cursoe.
-                const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
+                // on the first update to avoid visual snapping to the cursor.
+                const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
                 if (!isPanStarted && !isDistancePastThreshold)
                     return;
                 const { point } = info;
@@ -9861,6 +9891,7 @@
             this.dragSnapToOrigin = dragSnapToOrigin;
             this.handlers = handlers;
             this.transformPagePoint = transformPagePoint;
+            this.distanceThreshold = distanceThreshold;
             this.contextWindow = contextWindow || window;
             const info = extractEventInfo(event);
             const initialInfo = transformPoint(info, this.transformPagePoint);
@@ -10059,10 +10090,6 @@
     }
 
     const elementDragControls = new WeakMap();
-    /**
-     *
-     */
-    // let latestPointerEvent: PointerEvent
     class VisualElementDragControls {
         constructor(visualElement) {
             this.openDragLock = null;
@@ -10080,7 +10107,7 @@
             this.elastic = createBox();
             this.visualElement = visualElement;
         }
-        start(originEvent, { snapToCursor = false } = {}) {
+        start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
             /**
              * Don't start dragging if this component is exiting
              */
@@ -10187,6 +10214,7 @@
             }, {
                 transformPagePoint: this.visualElement.getTransformPagePoint(),
                 dragSnapToOrigin,
+                distanceThreshold,
                 contextWindow: getContextWindow(this.visualElement),
             });
         }
@@ -12919,29 +12947,6 @@
         return () => observer.disconnect();
     }
 
-    function getOriginIndex(from, total) {
-        if (from === "first") {
-            return 0;
-        }
-        else {
-            const lastIndex = total - 1;
-            return from === "last" ? lastIndex : lastIndex / 2;
-        }
-    }
-    function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
-        return (i, total) => {
-            const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-            const distance = Math.abs(fromIndex - i);
-            let delay = duration * distance;
-            if (ease) {
-                const maxDelay = total * duration;
-                const easingFunction = easingDefinitionToFunction(ease);
-                delay = easingFunction(delay / maxDelay) * maxDelay;
-            }
-            return startDelay + delay;
-        };
-    }
-
     const createMinimalMotionComponent = 
     /*@__PURE__*/ createMotionComponentFactory();
 
@@ -14051,6 +14056,7 @@
     exports.getDefaultValueType = getDefaultValueType;
     exports.getEasingForSegment = getEasingForSegment;
     exports.getMixer = getMixer;
+    exports.getOriginIndex = getOriginIndex;
     exports.getValueAsType = getValueAsType;
     exports.getValueTransition = getValueTransition$1;
     exports.getVariableValue = getVariableValue;