framer-motion 11.3.7 → 11.3.9

package/dist/cjs/dom-entry.js

@@ -27,8 +27,8 @@ function createRenderStep(runNextFrame) {
      */
     const toKeepAlive = new WeakSet();
     let latestFrameData = {
-        delta: 0,
-        timestamp: 0,
+        delta: 0.0,
+        timestamp: 0.0,
         isProcessing: false,
     };
     function triggerCallback(callback) {
@@ -101,8 +101,8 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
     let useDefaultElapsed = true;
     const state = {
-        delta: 0,
-        timestamp: 0,
+        delta: 0.0,
+        timestamp: 0.0,
         isProcessing: false,
     };
     const flagRunNextFrame = () => (runNextFrame = true);
@@ -279,7 +279,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.3.7";
+        this.version = "11.3.9";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3684,12 +3684,6 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const createAxis = () => ({ min: 0, max: 0 });
-const createBox = () => ({
-    x: createAxis(),
-    y: createAxis(),
-});
-
 const isBrowser = typeof document !== "undefined";
 
 // Does this device prefer reduced motion? Returns `null` server-side.
@@ -3758,7 +3752,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.7 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.9 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3833,6 +3827,12 @@ const valueTypes = [...dimensionValueTypes, color, complex];
  */
 const findValueType = (v) => valueTypes.find(testValueType(v));
 
+const createAxis = () => ({ min: 0, max: 0 });
+const createBox = () => ({
+    x: createAxis(),
+    y: createAxis(),
+});
+
 const propEventHandlers = [
     "AnimationStart",
     "AnimationComplete",
@@ -4594,6 +4594,7 @@ class SVGVisualElement extends DOMVisualElement {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
+        this.measureInstanceViewportBox = createBox;
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -4606,9 +4607,6 @@ class SVGVisualElement extends DOMVisualElement {
         key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
         return instance.getAttribute(key);
     }
-    measureInstanceViewportBox() {
-        return createBox();
-    }
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }

package/dist/cjs/index.js

@@ -77,8 +77,8 @@ function createRenderStep(runNextFrame) {
      */
     const toKeepAlive = new WeakSet();
     let latestFrameData = {
-        delta: 0,
-        timestamp: 0,
+        delta: 0.0,
+        timestamp: 0.0,
         isProcessing: false,
     };
     function triggerCallback(callback) {
@@ -151,8 +151,8 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
     let useDefaultElapsed = true;
     const state = {
-        delta: 0,
-        timestamp: 0,
+        delta: 0.0,
+        timestamp: 0.0,
         isProcessing: false,
     };
     const flagRunNextFrame = () => (runNextFrame = true);
@@ -314,7 +314,6 @@ function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor,
         layout,
         alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
         visualElement,
-        scheduleRender: () => visualElement.scheduleRender(),
         /**
          * TODO: Update options in an effect. This could be tricky as it'll be too late
          * to update by the time layout animations run.
@@ -4814,7 +4813,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.3.7";
+        this.version = "11.3.9";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5911,12 +5910,12 @@ function calcAxisDelta(delta, source, target, origin = 0.5) {
         mixNumber$1(target.min, target.max, delta.origin) - delta.originPoint;
     if ((delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX) ||
         isNaN(delta.scale)) {
-        delta.scale = 1;
+        delta.scale = 1.0;
     }
     if ((delta.translate >= TRANSLATE_MIN &&
         delta.translate <= TRANSLATE_MAX) ||
         isNaN(delta.translate)) {
-        delta.translate = 0;
+        delta.translate = 0.0;
     }
 }
 function calcBoxDelta(delta, source, target, origin) {
@@ -6171,6 +6170,8 @@ function applyBoxDelta(box, { x, y }) {
     applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
     applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
 }
+const TREE_SCALE_SNAP_MIN = 0.999999999999;
+const TREE_SCALE_SNAP_MAX = 1.0000000000001;
 /**
  * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
  * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
@@ -6222,13 +6223,14 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
      * Snap tree scale back to 1 if it's within a non-perceivable threshold.
      * This will help reduce useless scales getting rendered.
      */
-    treeScale.x = snapToDefault(treeScale.x);
-    treeScale.y = snapToDefault(treeScale.y);
-}
-function snapToDefault(scale) {
-    if (Number.isInteger(scale))
-        return scale;
-    return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1;
+    if (treeScale.x < TREE_SCALE_SNAP_MAX &&
+        treeScale.x > TREE_SCALE_SNAP_MIN) {
+        treeScale.x = 1.0;
+    }
+    if (treeScale.y < TREE_SCALE_SNAP_MAX &&
+        treeScale.y > TREE_SCALE_SNAP_MIN) {
+        treeScale.y = 1.0;
+    }
 }
 function translateAxis(axis, distance) {
     axis.min = axis.min + distance;
@@ -6907,6 +6909,17 @@ function copyBoxInto(box, originBox) {
     copyAxisInto(box.x, originBox.x);
     copyAxisInto(box.y, originBox.y);
 }
+/**
+ * Reset a delta to the provided origin box.
+ *
+ * This is a mutative operation.
+ */
+function copyAxisDeltaInto(delta, originDelta) {
+    delta.translate = originDelta.translate;
+    delta.scale = originDelta.scale;
+    delta.originPoint = originDelta.originPoint;
+    delta.origin = originDelta.origin;
+}
 
 /**
  * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse
@@ -6963,21 +6976,27 @@ function isAxisDeltaZero(delta) {
 function isDeltaZero(delta) {
     return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
 }
+function axisEquals(a, b) {
+    return a.min === b.min && a.max === b.max;
+}
 function boxEquals(a, b) {
-    return (a.x.min === b.x.min &&
-        a.x.max === b.x.max &&
-        a.y.min === b.y.min &&
-        a.y.max === b.y.max);
+    return axisEquals(a.x, b.x) && axisEquals(a.y, b.y);
+}
+function axisEqualsRounded(a, b) {
+    return (Math.round(a.min) === Math.round(b.min) &&
+        Math.round(a.max) === Math.round(b.max));
 }
 function boxEqualsRounded(a, b) {
-    return (Math.round(a.x.min) === Math.round(b.x.min) &&
-        Math.round(a.x.max) === Math.round(b.x.max) &&
-        Math.round(a.y.min) === Math.round(b.y.min) &&
-        Math.round(a.y.max) === Math.round(b.y.max));
+    return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y);
 }
 function aspectRatio(box) {
     return calcLength(box.x) / calcLength(box.y);
 }
+function axisDeltaEquals(a, b) {
+    return (a.translate === b.translate &&
+        a.scale === b.scale &&
+        a.originPoint === b.originPoint);
+}
 
 class NodeStack {
     constructor() {
@@ -7192,12 +7211,6 @@ function delay(callback, timeout) {
     return () => cancelFrame(checkElapsed);
 }
 
-function record(data) {
-    if (window.MotionDebug) {
-        window.MotionDebug.record(data);
-    }
-}
-
 function resolveElements(elements, scope, selectorCache) {
     var _a;
     if (typeof elements === "string") {
@@ -7267,7 +7280,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.7 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.9 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7824,6 +7837,7 @@ class SVGVisualElement extends DOMVisualElement {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
+        this.measureInstanceViewportBox = createBox;
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -7836,9 +7850,6 @@ class SVGVisualElement extends DOMVisualElement {
         key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
         return instance.getAttribute(key);
     }
-    measureInstanceViewportBox() {
-        return createBox();
-    }
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
@@ -8885,6 +8896,13 @@ const cancelSync = stepsOrder.reduce((acc, key) => {
     return acc;
 }, {});
 
+const metrics = {
+    type: "projectionFrame",
+    totalNodes: 0,
+    resolvedTargetDeltas: 0,
+    recalculatedProjection: 0,
+};
+const isDebug = typeof window !== "undefined" && window.MotionDebug !== undefined;
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 /**
@@ -8893,16 +8911,6 @@ const hiddenVisibility = { visibility: "hidden" };
  */
 const animationTarget = 1000;
 let id$1 = 0;
-/**
- * Use a mutable data object for debug data so as to not create a new
- * object every frame.
- */
-const projectionFrameData = {
-    type: "projectionFrame",
-    totalNodes: 0,
-    resolvedTargetDeltas: 0,
-    recalculatedProjection: 0,
-};
 function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
     const { latestValues } = visualElement;
     // Record the distorting transform and then temporarily set it to 0
@@ -9050,16 +9058,24 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  * Reset debug counts. Manually resetting rather than creating a new
                  * object each frame.
                  */
-                projectionFrameData.totalNodes =
-                    projectionFrameData.resolvedTargetDeltas =
-                        projectionFrameData.recalculatedProjection =
-                            0;
+                if (isDebug) {
+                    metrics.totalNodes =
+                        metrics.resolvedTargetDeltas =
+                            metrics.recalculatedProjection =
+                                0;
+                }
                 this.nodes.forEach(propagateDirtyNodes);
                 this.nodes.forEach(resolveTargetDelta);
                 this.nodes.forEach(calcProjection);
                 this.nodes.forEach(cleanDirtyNodes);
-                record(projectionFrameData);
+                if (isDebug) {
+                    window.MotionDebug.record(metrics);
+                }
             };
+            /**
+             * Frame calculations
+             */
+            this.resolvedRelativeTargetAt = 0.0;
             this.hasProjected = false;
             this.isVisible = true;
             this.animationProgress = 0;
@@ -9589,7 +9605,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 (isShared && this.isSharedProjectionDirty) ||
                 this.isProjectionDirty ||
                 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
-                this.attemptToResolveRelativeTarget);
+                this.attemptToResolveRelativeTarget ||
+                this.root.updateBlockedByResize);
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -9688,7 +9705,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Increase debug counter for resolved target deltas
              */
-            projectionFrameData.resolvedTargetDeltas++;
+            if (isDebug) {
+                metrics.resolvedTargetDeltas++;
+            }
         }
         getClosestProjectingParent() {
             if (!this.parent ||
@@ -9783,18 +9802,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  * projecting, we want to remove the stored transform and schedule
                  * a render to ensure the elements reflect the removed transform.
                  */
-                if (this.projectionTransform) {
-                    this.projectionDelta = createDelta();
-                    this.projectionTransform = "none";
+                if (this.prevProjectionDelta) {
+                    this.createProjectionDeltas();
                     this.scheduleRender();
                 }
                 return;
             }
-            if (!this.projectionDelta) {
-                this.projectionDelta = createDelta();
-                this.projectionDeltaWithTransform = createDelta();
+            if (!this.projectionDelta || !this.prevProjectionDelta) {
+                this.createProjectionDeltas();
+            }
+            else {
+                copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);
+                copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);
             }
-            const prevProjectionTransform = this.projectionTransform;
             /**
              * Update the delta between the corrected box and the target box before user-set transforms were applied.
              * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
@@ -9805,10 +9825,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * layout reprojection or the final bounding box.
              */
             calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
-            this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);
-            if (this.projectionTransform !== prevProjectionTransform ||
-                this.treeScale.x !== prevTreeScaleX ||
-                this.treeScale.y !== prevTreeScaleY) {
+            if (this.treeScale.x !== prevTreeScaleX ||
+                this.treeScale.y !== prevTreeScaleY ||
+                !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) ||
+                !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {
                 this.hasProjected = true;
                 this.scheduleRender();
                 this.notifyListeners("projectionUpdate", target);
@@ -9816,7 +9836,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Increase debug counter for recalculated projections
              */
-            projectionFrameData.recalculatedProjection++;
+            if (isDebug) {
+                metrics.recalculatedProjection++;
+            }
         }
         hide() {
             this.isVisible = false;
@@ -9827,7 +9849,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // TODO: Schedule render
         }
         scheduleRender(notifyAll = true) {
-            this.options.scheduleRender && this.options.scheduleRender();
+            var _a;
+            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
             if (notifyAll) {
                 const stack = this.getStack();
                 stack && stack.scheduleRender();
@@ -9836,6 +9859,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.resumingFrom = undefined;
             }
         }
+        createProjectionDeltas() {
+            this.prevProjectionDelta = createDelta();
+            this.projectionDelta = createDelta();
+            this.projectionDeltaWithTransform = createDelta();
+        }
         setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
             const snapshot = this.snapshot;
             const snapshotLatestValues = snapshot
@@ -10309,7 +10337,9 @@ function propagateDirtyNodes(node) {
     /**
      * Increase debug counter for nodes encountered this frame
      */
-    projectionFrameData.totalNodes++;
+    if (isDebug) {
+        metrics.totalNodes++;
+    }
     if (!node.parent)
         return;
     /**
@@ -12244,10 +12274,11 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
 
 const createObject = () => ({});
 class StateVisualElement extends VisualElement {
-    build() { }
-    measureInstanceViewportBox() {
-        return createBox();
+    constructor() {
+        super(...arguments);
+        this.measureInstanceViewportBox = createBox;
     }
+    build() { }
     resetTransform() { }
     restoreTransform() { }
     removeValueFromRenderState() { }