framer-motion 12.35.2 → 12.36.0

package/dist/framer-motion.dev.js

@@ -324,7 +324,11 @@
     const backIn = /*@__PURE__*/ reverseEasing(backOut);
     const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
 
-    const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+    const anticipate = (p) => p >= 1
+        ? 1
+        : (p *= 2) < 1
+            ? 0.5 * backIn(p)
+            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const circIn = (p) => 1 - Math.sin(Math.acos(p));
     const circOut = reverseEasing(circIn);
@@ -443,8 +447,7 @@
                 const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
-                if (!queue.has(callback))
-                    queue.add(callback);
+                queue.add(callback);
                 return callback;
             },
             /**
@@ -469,7 +472,10 @@
                     return;
                 }
                 isProcessing = true;
-                [thisFrame, nextFrame] = [nextFrame, thisFrame];
+                // Swap this frame and the next to avoid GC
+                const prevFrame = thisFrame;
+                thisFrame = nextFrame;
+                nextFrame = prevFrame;
                 // Execute this frame
                 thisFrame.forEach(triggerCallback);
                 /**
@@ -508,11 +514,12 @@
         }, {});
         const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
         const processBatch = () => {
-            const timestamp = MotionGlobalConfig.useManualTiming
+            const useManualTiming = MotionGlobalConfig.useManualTiming;
+            const timestamp = useManualTiming
                 ? state.timestamp
                 : performance.now();
             runNextFrame = false;
-            if (!MotionGlobalConfig.useManualTiming) {
+            if (!useManualTiming) {
                 state.delta = useDefaultElapsed
                     ? 1000 / 60
                     : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
@@ -2244,8 +2251,18 @@
     }
     const positionalValues = {
         // Dimensions
-        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+        width: ({ x }, { paddingLeft = "0", paddingRight = "0", boxSizing }) => {
+            const width = x.max - x.min;
+            return boxSizing === "border-box"
+                ? width
+                : width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        },
+        height: ({ y }, { paddingTop = "0", paddingBottom = "0", boxSizing }) => {
+            const height = y.max - y.min;
+            return boxSizing === "border-box"
+                ? height
+                : height - parseFloat(paddingTop) - parseFloat(paddingBottom);
+        },
         top: (_bbox, { top }) => parseFloat(top),
         left: (_bbox, { left }) => parseFloat(left),
         bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
@@ -2937,7 +2954,9 @@
              * If we can't animate this value with the resolved keyframes
              * then we should complete it immediately.
              */
+            let canAnimateValue = true;
             if (!canAnimate(keyframes, name, type, velocity)) {
+                canAnimateValue = false;
                 if (MotionGlobalConfig.instantAnimations || !delay) {
                     onUpdate?.(getFinalKeyframe$1(keyframes, options, finalKeyframe));
                 }
@@ -2974,8 +2993,13 @@
              * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
              * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
              * optimised animation.
+             *
+             * Also skip WAAPI when keyframes aren't animatable, as the resolved
+             * values may not be valid CSS and would trigger browser warnings.
              */
-            const useWaapi = !isHandoff && supportsBrowserAnimation(resolvedOptions);
+            const useWaapi = canAnimateValue &&
+                !isHandoff &&
+                supportsBrowserAnimation(resolvedOptions);
             const element = resolvedOptions.motionValue?.owner?.current;
             const animation = useWaapi
                 ? new NativeAnimationExtended({
@@ -4583,7 +4607,9 @@
      * that works across iframes
      */
     function isHTMLElement(element) {
-        return isObject(element) && "offsetHeight" in element;
+        return (isObject(element) &&
+            "offsetHeight" in element &&
+            !("ownerSVGElement" in element));
     }
 
     const translateAlias$1 = {
@@ -5363,7 +5389,16 @@
             frame.postRender(scheduleAnimation);
         }, stopAnimation);
         if (isMotionValue(source)) {
-            const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
+            let skipNextAnimation = options.skipInitialAnimation === true;
+            const removeSourceOnChange = source.on("change", (v) => {
+                if (skipNextAnimation) {
+                    skipNextAnimation = false;
+                    value.jump(parseValue(v, unit), false);
+                }
+                else {
+                    value.set(parseValue(v, unit));
+                }
+            });
             const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
             return () => {
                 removeSourceOnChange();
@@ -9477,6 +9512,12 @@
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
+            else if (animationType === "x" || animationType === "y") {
+                const snapAxis = animationType === "x" ? "y" : "x";
+                copyAxisInto(isShared
+                    ? snapshot.measuredBox[snapAxis]
+                    : snapshot.layoutBox[snapAxis], layout[snapAxis]);
+            }
             else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = isShared
@@ -10147,6 +10188,7 @@
         `);
             }
             return () => {
+                ref.current?.removeAttribute("data-motion-pop-id");
                 if (parent.contains(style)) {
                     parent.removeChild(style);
                 }
@@ -10425,8 +10467,8 @@
                     if (exitingComponents.current.has(key)) {
                         return;
                     }
-                    exitingComponents.current.add(key);
                     if (exitComplete.has(key)) {
+                        exitingComponents.current.add(key);
                         exitComplete.set(key, true);
                     }
                     else {
@@ -10706,8 +10748,12 @@
          * We attempt to import this package but require won't be defined in esm environments, in that case
          * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
          * in favour of explicit injection.
+         *
+         * String concatenation prevents bundlers like webpack (e.g. Storybook)
+         * from statically resolving this optional dependency at build time.
          */
-        loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
+        const emotionPkg = "@emotion/is-prop-" + "valid";
+        loadExternalIsValidProp(require(emotionPkg).default);
     }
     catch {
         // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
@@ -10724,6 +10770,8 @@
              */
             if (key === "values" && typeof props.values === "object")
                 continue;
+            if (isMotionValue(props[key]))
+                continue;
             if (shouldForward(key) ||
                 (forwardMotionProps === true && isValidMotionProp(key)) ||
                 (!isDom && !isValidMotionProp(key)) ||
@@ -11436,6 +11484,7 @@
         constructor() {
             super(...arguments);
             this.id = id$1++;
+            this.isExitComplete = false;
         }
         update() {
             if (!this.node.presenceContext)
@@ -11445,9 +11494,38 @@
             if (!this.node.animationState || isPresent === prevIsPresent) {
                 return;
             }
+            if (isPresent && prevIsPresent === false) {
+                /**
+                 * When re-entering, if the exit animation already completed
+                 * (element is at rest), reset to initial values so the enter
+                 * animation replays from the correct position.
+                 */
+                if (this.isExitComplete) {
+                    const { initial, custom } = this.node.getProps();
+                    if (typeof initial === "string") {
+                        const resolved = resolveVariant(this.node, initial, custom);
+                        if (resolved) {
+                            const { transition, transitionEnd, ...target } = resolved;
+                            for (const key in target) {
+                                this.node
+                                    .getValue(key)
+                                    ?.jump(target[key]);
+                            }
+                        }
+                    }
+                    this.node.animationState.reset();
+                    this.node.animationState.animateChanges();
+                }
+                else {
+                    this.node.animationState.setActive("exit", false);
+                }
+                this.isExitComplete = false;
+                return;
+            }
             const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
             if (onExitComplete && !isPresent) {
                 exitAnimation.then(() => {
+                    this.isExitComplete = true;
                     onExitComplete(this.id);
                 });
             }
@@ -12174,7 +12252,8 @@
                     return;
                 }
                 let transition = (constraints && constraints[axis]) || {};
-                if (dragSnapToOrigin)
+                if (dragSnapToOrigin === true ||
+                    dragSnapToOrigin === axis)
                     transition = { min: 0, max: 0 };
                 /**
                  * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame