framer-motion 12.20.4 → 12.22.0

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-7q3QlJ1Z.js');
+var create = require('./create-Dr1Bf9gl.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-7q3QlJ1Z.js → create-Dr1Bf9gl.js}

@@ -911,7 +911,6 @@ const metrics = {
     calculatedProjections: 0,
 };
 const transformAxes = ["", "X", "Y", "Z"];
-const hiddenVisibility = { visibility: "hidden" };
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
  * which has a noticeable difference in spring animations
@@ -1133,8 +1132,17 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             }
             if (attachResizeListener) {
                 let cancelDelay;
+                let innerWidth = 0;
                 const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
+                // Set initial innerWidth in a frame.read callback to batch the read
+                motionDom.frame.read(() => {
+                    innerWidth = window.innerWidth;
+                });
                 attachResizeListener(instance, () => {
+                    const newInnerWidth = window.innerWidth;
+                    if (newInnerWidth === innerWidth)
+                        return;
+                    innerWidth = newInnerWidth;
                     this.root.updateBlockedByResize = true;
                     cancelDelay && cancelDelay();
                     cancelDelay = delay(resizeUnblockUpdate, 250);
@@ -2141,59 +2149,60 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             // see the element with the reset rotate value applied.
             visualElement.scheduleRender();
         }
-        getProjectionStyles(styleProp) {
+        applyProjectionStyles(targetStyle, // CSSStyleDeclaration - doesn't allow numbers to be assigned to properties
+        styleProp) {
             if (!this.instance || this.isSVG)
-                return undefined;
+                return;
             if (!this.isVisible) {
-                return hiddenVisibility;
+                targetStyle.visibility = "hidden";
+                return;
             }
-            const styles = {
-                visibility: "",
-            };
             const transformTemplate = this.getTransformTemplate();
             if (this.needsReset) {
                 this.needsReset = false;
-                styles.opacity = "";
-                styles.pointerEvents =
+                targetStyle.visibility = "";
+                targetStyle.opacity = "";
+                targetStyle.pointerEvents =
                     resolveMotionValue(styleProp?.pointerEvents) || "";
-                styles.transform = transformTemplate
+                targetStyle.transform = transformTemplate
                     ? transformTemplate(this.latestValues, "")
                     : "none";
-                return styles;
+                return;
             }
             const lead = this.getLead();
             if (!this.projectionDelta || !this.layout || !lead.target) {
-                const emptyStyles = {};
                 if (this.options.layoutId) {
-                    emptyStyles.opacity =
+                    targetStyle.opacity =
                         this.latestValues.opacity !== undefined
                             ? this.latestValues.opacity
                             : 1;
-                    emptyStyles.pointerEvents =
+                    targetStyle.pointerEvents =
                         resolveMotionValue(styleProp?.pointerEvents) || "";
                 }
                 if (this.hasProjected && !hasTransform(this.latestValues)) {
-                    emptyStyles.transform = transformTemplate
+                    targetStyle.transform = transformTemplate
                         ? transformTemplate({}, "")
                         : "none";
                     this.hasProjected = false;
                 }
-                return emptyStyles;
+                return;
             }
+            targetStyle.visibility = "";
             const valuesToRender = lead.animationValues || lead.latestValues;
             this.applyTransformsToTarget();
-            styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+            let transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
             if (transformTemplate) {
-                styles.transform = transformTemplate(valuesToRender, styles.transform);
+                transform = transformTemplate(valuesToRender, transform);
             }
+            targetStyle.transform = transform;
             const { x, y } = this.projectionDelta;
-            styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+            targetStyle.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
             if (lead.animationValues) {
                 /**
                  * If the lead component is animating, assign this either the entering/leaving
                  * opacity
                  */
-                styles.opacity =
+                targetStyle.opacity =
                     lead === this
                         ? valuesToRender.opacity ??
                             this.latestValues.opacity ??
@@ -2207,7 +2216,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                  * Or we're not animating at all, set the lead component to its layout
                  * opacity and other components to hidden.
                  */
-                styles.opacity =
+                targetStyle.opacity =
                     lead === this
                         ? valuesToRender.opacity !== undefined
                             ? valuesToRender.opacity
@@ -2229,13 +2238,13 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                  * vulnerable to distortion if the element changes size without
                  * a corresponding layout animation.
                  */
-                const corrected = styles.transform === "none"
+                const corrected = transform === "none"
                     ? valuesToRender[key]
                     : correct(valuesToRender[key], lead);
                 if (applyTo) {
                     const num = applyTo.length;
                     for (let i = 0; i < num; i++) {
-                        styles[applyTo[i]] = corrected;
+                        targetStyle[applyTo[i]] = corrected;
                     }
                 }
                 else {
@@ -2246,7 +2255,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                         this.options.visualElement.renderState.vars[key] = corrected;
                     }
                     else {
-                        styles[key] = corrected;
+                        targetStyle[key] = corrected;
                     }
                 }
             }
@@ -2256,12 +2265,11 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              * pointer events on the lead.
              */
             if (this.options.layoutId) {
-                styles.pointerEvents =
+                targetStyle.pointerEvents =
                     lead === this
                         ? resolveMotionValue(styleProp?.pointerEvents) || ""
                         : "none";
             }
-            return styles;
         }
         clearSnapshot() {
             this.resumeFrom = this.snapshot = undefined;
@@ -3415,10 +3423,8 @@ function renderHTML(element, { style, vars }, styleProp, projection) {
         // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
         elementStyle[key] = style[key];
     }
-    const projectionStyle = projection?.getProjectionStyles(styleProp);
-    for (key in projectionStyle) {
-        elementStyle[key] = projectionStyle[key];
-    }
+    // Write projection styles directly to element style
+    projection?.applyProjectionStyles(elementStyle, styleProp);
     for (key in vars) {
         // Loop over any CSS variables and assign those.
         // They can only be assigned using `setProperty`.
@@ -3758,7 +3764,7 @@ function animateVariant(visualElement, variant, options = {}) {
     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();
     /**
@@ -3776,19 +3782,26 @@ function animateVariant(visualElement, variant, options = {}) {
         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);
@@ -4311,7 +4324,7 @@ function distance2D(a, b) {
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, } = {}) {
         /**
          * @internal
          */
@@ -4339,8 +4352,8 @@ class PanSession {
             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;
@@ -4380,6 +4393,7 @@ class PanSession {
         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);
@@ -4578,10 +4592,6 @@ function resolvePointElastic(dragElastic, label) {
 }
 
 const elementDragControls = new WeakMap();
-/**
- *
- */
-// let latestPointerEvent: PointerEvent
 class VisualElementDragControls {
     constructor(visualElement) {
         this.openDragLock = null;
@@ -4599,7 +4609,7 @@ class VisualElementDragControls {
         this.elastic = createBox();
         this.visualElement = visualElement;
     }
-    start(originEvent, { snapToCursor = false } = {}) {
+    start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
         /**
          * Don't start dragging if this component is exiting
          */
@@ -4706,6 +4716,7 @@ class VisualElementDragControls {
         }, {
             transformPagePoint: this.visualElement.getTransformPagePoint(),
             dragSnapToOrigin,
+            distanceThreshold,
             contextWindow: getContextWindow(this.visualElement),
         });
     }

package/dist/cjs/dom.js

@@ -1449,10 +1449,8 @@ function renderHTML(element, { style, vars }, styleProp, projection) {
         // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
         elementStyle[key] = style[key];
     }
-    const projectionStyle = projection?.getProjectionStyles(styleProp);
-    for (key in projectionStyle) {
-        elementStyle[key] = projectionStyle[key];
-    }
+    // Write projection styles directly to element style
+    projection?.applyProjectionStyles(elementStyle, styleProp);
     for (key in vars) {
         // Loop over any CSS variables and assign those.
         // They can only be assigned using `setProperty`.
@@ -2423,29 +2421,6 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     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 = motionUtils.easingDefinitionToFunction(ease);
-            delay = easingFunction(delay / maxDelay) * maxDelay;
-        }
-        return startDelay + delay;
-    };
-}
-
 /**
  * Timeout defined in ms
  */
@@ -2482,7 +2457,6 @@ exports.distance2D = distance2D;
 exports.inView = inView;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
-exports.stagger = stagger;
 Object.keys(motionDom).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,

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 create = require('./create-7q3QlJ1Z.js');
+var create = require('./create-Dr1Bf9gl.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -1807,29 +1807,6 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     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 = motionUtils.easingDefinitionToFunction(ease);
-            delay = easingFunction(delay / maxDelay) * maxDelay;
-        }
-        return startDelay + delay;
-    };
-}
-
 const createMinimalMotionComponent = 
 /*@__PURE__*/ create.createMotionComponentFactory();
 
@@ -2887,7 +2864,6 @@ exports.m = m;
 exports.motion = motion;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
-exports.stagger = stagger;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimate = useAnimate;

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnyResolvedKeyframe, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
+import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnyResolvedKeyframe, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls } from 'motion-dom';
 export * from 'motion-dom';
 import { Easing, EasingFunction, Point } from 'motion-utils';
 export * from 'motion-utils';
@@ -142,18 +142,10 @@ interface InViewOptions {
 }
 declare function inView(elementOrSelector: ElementOrSelector, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
 
-type StaggerOrigin = "first" | "last" | "center" | number;
-type StaggerOptions = {
-    startDelay?: number;
-    from?: StaggerOrigin;
-    ease?: Easing;
-};
-declare function stagger(duration?: number, { startDelay, from, ease }?: StaggerOptions): DynamicOption<number>;
-
 type DelayedFunction = (overshoot: number) => void;
 declare function delayInSeconds(callback: DelayedFunction, timeout: number): () => void;
 
 declare const distance: (a: number, b: number) => number;
 declare function distance2D(a: Point, b: Point): number;
 
-export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type ValueSequence, animate, animateMini, createScopedAnimate, delayInSeconds as delay, distance, distance2D, inView, scroll, scrollInfo, stagger };
+export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type ValueSequence, animate, animateMini, createScopedAnimate, delayInSeconds as delay, distance, distance2D, inView, scroll, scrollInfo };