motion 12.0.0-alpha.2 → 12.0.1

package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs

@@ -1,30 +1,31 @@
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
+import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
+import { animateSingleValue } from '../../animation/animate/single-value.mjs';
+import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
+import { cancelFrame, frameData, frameSteps, frame } from '../../frameloop/frame.mjs';
+import { microtask } from '../../frameloop/microtask.mjs';
+import { time } from '../../frameloop/sync-time.mjs';
+import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
+import { FlatTree } from '../../render/utils/flat-tree.mjs';
+import { clamp } from '../../utils/clamp.mjs';
+import { delay } from '../../utils/delay.mjs';
+import { mixNumber } from '../../utils/mix/number.mjs';
 import { SubscriptionManager } from '../../utils/subscription-manager.mjs';
+import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { mixValues } from '../animation/mix-values.mjs';
 import { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';
 import { translateAxis, transformBox, applyBoxDelta, applyTreeDeltas } from '../geometry/delta-apply.mjs';
 import { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength, isNear } from '../geometry/delta-calc.mjs';
 import { removeBoxTransforms } from '../geometry/delta-remove.mjs';
-import { getValueTransition } from '../../animation/utils/get-value-transition.mjs';
+import { createBox, createDelta } from '../geometry/models.mjs';
 import { boxEqualsRounded, isDeltaZero, axisDeltaEquals, aspectRatio, boxEquals } from '../geometry/utils.mjs';
 import { NodeStack } from '../shared/stack.mjs';
 import { scaleCorrectors } from '../styles/scale-correction.mjs';
 import { buildProjectionTransform } from '../styles/transform.mjs';
 import { eachAxis } from '../utils/each-axis.mjs';
 import { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';
-import { FlatTree } from '../../render/utils/flat-tree.mjs';
-import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { globalProjectionState } from './state.mjs';
-import { delay } from '../../utils/delay.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
-import { animateSingleValue } from '../../animation/animate/single-value.mjs';
-import { clamp } from '../../utils/clamp.mjs';
-import { cancelFrame, frameData, frameSteps, frame } from '../../frameloop/frame.mjs';
-import { noop } from '../../utils/noop.mjs';
-import { time } from '../../frameloop/sync-time.mjs';
-import { microtask } from '../../frameloop/microtask.mjs';
-import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
-import { createBox, createDelta } from '../geometry/models.mjs';
 
 const metrics = {
     type: "projectionFrame",
@@ -273,7 +274,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this.options.animate !== false &&
                 visualElement &&
                 (layoutId || layout)) {
-                this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
+                this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => {
                     if (this.isTreeAnimationBlocked()) {
                         this.target = undefined;
                         this.relativeTarget = undefined;
@@ -288,20 +289,25 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                      * The target layout of the element might stay the same,
                      * but its position relative to its parent has changed.
                      */
-                    const targetChanged = !this.targetLayout ||
-                        !boxEqualsRounded(this.targetLayout, newLayout) ||
-                        hasRelativeTargetChanged;
+                    const hasTargetChanged = !this.targetLayout ||
+                        !boxEqualsRounded(this.targetLayout, newLayout);
+                    /*
+                     * Note: Disabled to fix relative animations always triggering new
+                     * layout animations. If this causes further issues, we can try
+                     * a different approach to detecting relative target changes.
+                     */
+                    // || hasRelativeLayoutChanged
                     /**
                      * If the layout hasn't seemed to have changed, it might be that the
                      * element is visually in the same place in the document but its position
                      * relative to its parent has indeed changed. So here we check for that.
                      */
-                    const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
+                    const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
                     if (this.options.layoutRoot ||
                         (this.resumeFrom && this.resumeFrom.instance) ||
                         hasOnlyRelativeTargetChanged ||
                         (hasLayoutChanged &&
-                            (targetChanged || !this.currentAnimation))) {
+                            (hasTargetChanged || !this.currentAnimation))) {
                         if (this.resumeFrom) {
                             this.resumingFrom = this.resumeFrom;
                             this.resumingFrom.resumingFrom = undefined;
@@ -1417,7 +1423,7 @@ function notifyLayoutUpdate(node) {
             calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
         }
         const hasLayoutChanged = !isDeltaZero(layoutDelta);
-        let hasRelativeTargetChanged = false;
+        let hasRelativeLayoutChanged = false;
         if (!node.resumeFrom) {
             const relativeParent = node.getClosestProjectingParent();
             /**
@@ -1432,7 +1438,7 @@ function notifyLayoutUpdate(node) {
                     const relativeLayout = createBox();
                     calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
                     if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
-                        hasRelativeTargetChanged = true;
+                        hasRelativeLayoutChanged = true;
                     }
                     if (relativeParent.options.layoutRoot) {
                         node.relativeTarget = relativeLayout;
@@ -1448,7 +1454,7 @@ function notifyLayoutUpdate(node) {
             delta: visualDelta,
             layoutDelta,
             hasLayoutChanged,
-            hasRelativeTargetChanged,
+            hasRelativeLayoutChanged,
         });
     }
     else if (node.isLead()) {

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -1,23 +1,23 @@
+import { time } from '../frameloop/sync-time.mjs';
+import { featureDefinitions } from '../motion/features/definitions.mjs';
+import { createBox } from '../projection/geometry/models.mjs';
+import { isNumericalString } from '../utils/is-numerical-string.mjs';
+import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
+import { warnOnce } from '../utils/warn-once.mjs';
 import { motionValue } from '../value/index.mjs';
+import { complex } from '../value/types/complex/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
-import { transformProps } from './html/utils/transform.mjs';
+import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
+import { findValueType } from './dom/value-types/find.mjs';
+import { transformProps } from './html/utils/keys-transform.mjs';
+import { visualElementStore } from './store.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
+import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
-import { warnOnce } from '../utils/warn-once.mjs';
-import { featureDefinitions } from '../motion/features/definitions.mjs';
-import { visualElementStore } from './store.mjs';
-import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
-import { isNumericalString } from '../utils/is-numerical-string.mjs';
-import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
-import { findValueType } from './dom/value-types/find.mjs';
-import { complex } from '../value/types/complex/index.mjs';
-import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
-import { createBox } from '../projection/geometry/models.mjs';
-import { time } from '../frameloop/sync-time.mjs';
 import { frame, cancelFrame } from '../frameloop/frame.mjs';
 
 const propEventHandlers = [
@@ -114,7 +114,8 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState } = visualState;
+        const { latestValues, renderState, onUpdate } = visualState;
+        this.onUpdate = onUpdate;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -314,6 +315,7 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
+        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;

package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs

@@ -1,10 +1,11 @@
 import { isNone } from '../../animation/utils/is-none.mjs';
+import { positionalKeys } from '../html/utils/keys-position.mjs';
+import { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';
+import { KeyframeResolver } from '../utils/KeyframesResolver.mjs';
 import { getVariableValue } from './utils/css-variables-conversion.mjs';
 import { isCSSVariableToken } from './utils/is-css-variable.mjs';
-import { positionalKeys, isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';
+import { isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';
 import { findDimensionValueType } from './value-types/dimensions.mjs';
-import { KeyframeResolver } from '../utils/KeyframesResolver.mjs';
-import { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';
 
 class DOMKeyframesResolver extends KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {

package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs

@@ -1,5 +1,6 @@
 import { VisualElement } from '../VisualElement.mjs';
 import { DOMKeyframesResolver } from './DOMKeyframesResolver.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 class DOMVisualElement extends VisualElement {
     constructor() {
@@ -23,6 +24,20 @@ class DOMVisualElement extends VisualElement {
         delete vars[key];
         delete style[key];
     }
+    handleChildMotionValue() {
+        if (this.childSubscription) {
+            this.childSubscription();
+            delete this.childSubscription;
+        }
+        const { children } = this.props;
+        if (isMotionValue(children)) {
+            this.childSubscription = children.on("change", (latest) => {
+                if (this.current) {
+                    this.current.textContent = `${latest}`;
+                }
+            });
+        }
+    }
 }
 
 export { DOMVisualElement };

package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs

@@ -1,4 +1,5 @@
-import { resolveElements } from '../utils/resolve-element.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
 
 const resizeHandlers = new WeakMap();
 let observer;

package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs

@@ -1,7 +1,8 @@
-import { scrollInfo } from './track.mjs';
+import { supportsScrollTimeline } from '../../../../../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../../motion-utils/dist/es/noop.mjs';
 import { observeTimeline } from './observe.mjs';
-import { supportsScrollTimeline } from './supports.mjs';
-import { noop } from '../../../utils/noop.mjs';
+import { scrollInfo } from './track.mjs';
 
 function scrollTimelineFallback({ source, container, axis = "y", }) {
     // Support legacy source argument. Deprecate later.
@@ -46,7 +47,6 @@ function needsElementTracking(options) {
 }
 function scrollFunction(onScroll, options) {
     if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
-        console.log(isOnScrollWithInfo(onScroll), needsElementTracking(options));
         return scrollInfo((info) => {
             onScroll(info[options.axis].progress, info);
         }, options);

package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs

@@ -1,4 +1,5 @@
-import { progress } from '../../../utils/progress.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
 import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';
 
 /**

package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs

@@ -1,8 +1,9 @@
-import { calcInset } from './inset.mjs';
-import { ScrollOffset } from './presets.mjs';
-import { resolveOffset } from './offset.mjs';
+import { clamp } from '../../../../utils/clamp.mjs';
 import { interpolate } from '../../../../utils/interpolate.mjs';
 import { defaultOffset } from '../../../../utils/offsets/default.mjs';
+import { calcInset } from './inset.mjs';
+import { resolveOffset } from './offset.mjs';
+import { ScrollOffset } from './presets.mjs';
 
 const point = { x: 0, y: 0 };
 function getTargetSize(target) {
@@ -50,10 +51,10 @@ function resolveOffsets(container, info, options) {
      * to map scroll value into a progress.
      */
     if (hasChanged) {
-        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition));
+        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition), { clamp: false });
         info[axis].interpolatorOffsets = [...info[axis].offset];
     }
-    info[axis].progress = info[axis].interpolate(info[axis].current);
+    info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
 }
 
 export { resolveOffsets };

package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -1,4 +1,4 @@
-import { invariant } from '../../../utils/errors.mjs';
+import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
 import { isNumericalString } from '../../../utils/is-numerical-string.mjs';
 import { isCSSVariableToken } from './is-css-variable.mjs';
 

package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,19 +1,7 @@
-import { transformPropOrder } from '../../html/utils/transform.mjs';
 import { number } from '../../../value/types/numbers/index.mjs';
 import { px } from '../../../value/types/numbers/units.mjs';
+import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
 
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    "x",
-    "y",
-    "translateX",
-    "translateY",
-]);
 const isNumOrPxType = (v) => v === number || v === px;
 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
@@ -62,4 +50,4 @@ const positionalValues = {
 positionalValues.translateX = positionalValues.x;
 positionalValues.translateY = positionalValues.y;
 
-export { isNumOrPxType, positionalKeys, positionalValues, removeNonTranslationalTransform };
+export { isNumOrPxType, positionalValues, removeNonTranslationalTransform };

package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs

@@ -1,4 +1,5 @@
-import { resolveElements } from '../utils/resolve-element.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
 
 const thresholds = {
     some: 0,
@@ -17,7 +18,7 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
             if (entry.isIntersecting === Boolean(onEnd))
                 return;
             if (entry.isIntersecting) {
-                const newOnEnd = onStart(entry);
+                const newOnEnd = onStart(entry.target, entry);
                 if (typeof newOnEnd === "function") {
                     activeIntersections.set(entry.target, newOnEnd);
                 }
@@ -25,7 +26,7 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
                     observer.unobserve(entry.target);
                 }
             }
-            else if (onEnd) {
+            else if (typeof onEnd === "function") {
                 onEnd(entry);
                 activeIntersections.delete(entry.target);
             }

package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs

@@ -1,12 +1,11 @@
-import { buildHTMLStyles } from './utils/build-styles.mjs';
-import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
-import { transformProps } from './utils/transform.mjs';
-import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
-import { renderHTML } from './utils/render.mjs';
-import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 import { measureViewportBox } from '../../projection/utils/measure.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
+import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
+import { buildHTMLStyles } from './utils/build-styles.mjs';
+import { transformProps } from './utils/keys-transform.mjs';
+import { renderHTML } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
 function getComputedStyle(element) {
     return window.getComputedStyle(element);
@@ -39,19 +38,6 @@ class HTMLVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    handleChildMotionValue() {
-        if (this.childSubscription) {
-            this.childSubscription();
-            delete this.childSubscription;
-        }
-        const { children } = this.props;
-        if (isMotionValue(children)) {
-            this.childSubscription = children.on("change", (latest) => {
-                if (this.current)
-                    this.current.textContent = `${latest}`;
-            });
-        }
-    }
 }
 
 export { HTMLVisualElement, getComputedStyle };

package/dist/es/framer-motion/dist/es/render/html/utils/build-styles.mjs

@@ -1,8 +1,8 @@
-import { buildTransform } from './build-transform.mjs';
 import { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';
-import { transformProps } from './transform.mjs';
 import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
+import { buildTransform } from './build-transform.mjs';
+import { transformProps } from './keys-transform.mjs';
 
 function buildHTMLStyles(state, latestValues, transformTemplate) {
     const { style, vars, transformOrigin } = state;

package/dist/es/framer-motion/dist/es/render/html/utils/build-transform.mjs

@@ -1,6 +1,6 @@
-import { transformPropOrder } from './transform.mjs';
 import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
+import { transformPropOrder } from './keys-transform.mjs';
 
 const translateAlias = {
     x: "translateX",

package/dist/es/framer-motion/dist/es/render/html/utils/keys-position.mjs

@@ -0,0 +1,13 @@
+import { transformPropOrder } from './keys-transform.mjs';
+
+const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    ...transformPropOrder,
+]);
+
+export { positionalKeys };

package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -1,13 +1,13 @@
-import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
-import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
-import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
-import { transformProps } from '../html/utils/transform.mjs';
-import { renderSVG } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
-import { createBox } from '../../projection/geometry/models.mjs';
+import { transformProps } from '../html/utils/keys-transform.mjs';
+import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';
+import { renderSVG } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
 class SVGVisualElement extends DOMVisualElement {
     constructor() {

package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs

@@ -1,37 +1,70 @@
-import { renderSVG } from './utils/render.mjs';
-import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { frame } from '../../frameloop/frame.mjs';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
-import { createSvgRenderState } from './utils/create-render-state.mjs';
+import { transformProps } from '../html/utils/keys-transform.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { createSvgRenderState } from './utils/create-render-state.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';
-import { frame } from '../../frameloop/frame.mjs';
+import { renderSVG } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
+function updateSVGDimensions(instance, renderState) {
+    try {
+        renderState.dimensions =
+            typeof instance.getBBox === "function"
+                ? instance.getBBox()
+                : instance.getBoundingClientRect();
+    }
+    catch (e) {
+        // Most likely trying to measure an unrendered element under Firefox
+        renderState.dimensions = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        };
+    }
+}
+const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onMount: (props, instance, { renderState, latestValues }) => {
-            frame.read(() => {
-                try {
-                    renderState.dimensions =
-                        typeof instance.getBBox ===
-                            "function"
-                            ? instance.getBBox()
-                            : instance.getBoundingClientRect();
+        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
+            if (!current)
+                return;
+            let hasTransform = !!props.drag;
+            if (!hasTransform) {
+                for (const key in latestValues) {
+                    if (transformProps.has(key)) {
+                        hasTransform = true;
+                        break;
+                    }
                 }
-                catch (e) {
-                    // Most likely trying to measure an unrendered element under Firefox
-                    renderState.dimensions = {
-                        x: 0,
-                        y: 0,
-                        width: 0,
-                        height: 0,
-                    };
+            }
+            if (!hasTransform)
+                return;
+            let needsMeasure = !prevProps;
+            if (prevProps) {
+                /**
+                 * Check the layout props for changes, if any are found we need to
+                 * measure the element again.
+                 */
+                for (let i = 0; i < layoutProps.length; i++) {
+                    const key = layoutProps[i];
+                    if (props[key] !==
+                        prevProps[key]) {
+                        needsMeasure = true;
+                    }
                 }
-            });
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(instance.tagName), props.transformTemplate);
-                renderSVG(instance, renderState);
+            }
+            if (!needsMeasure)
+                return;
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs

@@ -1,6 +1,6 @@
 import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
-import { calcSVGTransformOrigin } from './transform-origin.mjs';
 import { buildSVGPath } from './path.mjs';
+import { calcSVGTransformOrigin } from './transform-origin.mjs';
 
 /**
  * Build SVG visual attrbutes, like cx and style.transform

package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs

@@ -1,6 +1,6 @@
 import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
+import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
 import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';
-import { transformPropOrder } from '../../html/utils/transform.mjs';
 
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);

package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -17,7 +17,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.0.0-alpha.2", `Attempting to mix Motion versions ${nextValue.version} with 12.0.0-alpha.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.0.1", `Attempting to mix Motion versions ${nextValue.version} with 12.0.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/framer-motion/dist/es/utils/delay.mjs

@@ -1,5 +1,6 @@
+import '../../../../motion-utils/dist/es/errors.mjs';
+import { secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
 import { time } from '../frameloop/sync-time.mjs';
-import { secondsToMilliseconds } from './time-conversion.mjs';
 import { frame, cancelFrame } from '../frameloop/frame.mjs';
 
 /**

package/dist/es/framer-motion/dist/es/utils/get-context-window.mjs

@@ -1,4 +1,4 @@
-// Fixes https://github.com/framer/motion/issues/2270
+// Fixes https://github.com/motiondivision/motion/issues/2270
 const getContextWindow = ({ current }) => {
     return current ? current.ownerDocument.defaultView : null;
 };

package/dist/es/framer-motion/dist/es/utils/interpolate.mjs

@@ -1,9 +1,9 @@
-import { invariant } from './errors.mjs';
+import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+import { progress } from '../../../../motion-utils/dist/es/progress.mjs';
 import { clamp } from './clamp.mjs';
-import { pipe } from './pipe.mjs';
-import { progress } from './progress.mjs';
-import { noop } from './noop.mjs';
 import { mix } from './mix/index.mjs';
+import { pipe } from './pipe.mjs';
 
 function createMixers(output, ease, customMixer) {
     const mixers = [];
@@ -47,8 +47,9 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
      */
     if (inputLength === 1)
         return () => output[0];
-    if (inputLength === 2 && input[0] === input[1])
+    if (inputLength === 2 && output[0] === output[1])
         return () => output[1];
+    const isZeroDeltaRange = input[0] === input[1];
     // If input runs highest -> lowest, reverse both arrays
     if (input[0] > input[inputLength - 1]) {
         input = [...input].reverse();
@@ -57,6 +58,8 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
     const mixers = createMixers(output, ease, mixer);
     const numMixers = mixers.length;
     const interpolator = (v) => {
+        if (isZeroDeltaRange && v < input[0])
+            return output[0];
         let i = 0;
         if (numMixers > 1) {
             for (; i < input.length - 2; i++) {

package/dist/es/framer-motion/dist/es/utils/mix/color.mjs

@@ -1,5 +1,5 @@
 import { mixNumber } from './number.mjs';
-import { warning } from '../errors.mjs';
+import { warning } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { hslaToRgba } from '../hsla-to-rgba.mjs';
 import { hex } from '../../value/types/color/hex.mjs';
 import { rgba } from '../../value/types/color/rgba.mjs';

package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs

@@ -1,7 +1,7 @@
 import { mixNumber as mixNumber$1 } from './number.mjs';
 import { mixColor } from './color.mjs';
 import { pipe } from '../pipe.mjs';
-import { warning } from '../errors.mjs';
+import { warning } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { color } from '../../value/types/color/index.mjs';
 import { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';
 import { isCSSVariableToken } from '../../render/dom/utils/is-css-variable.mjs';

package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs

@@ -1,5 +1,6 @@
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
 import { mixNumber } from '../mix/number.mjs';
-import { progress } from '../progress.mjs';
 
 function fillOffset(offset, remaining) {
     const min = offset[offset.length - 1];