motion 12.8.0 → 12.8.2

package/dist/cjs/react-m.js

@@ -30,9 +30,6 @@ if (process.env.NODE_ENV !== "production") {
 
 const MotionGlobalConfig = {};
 
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
 const LayoutGroupContext = react.createContext({});
 
 const LazyContext = react.createContext({ strict: false });
@@ -352,8 +349,6 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
 const isCSSVariableName = 
 /*@__PURE__*/ checkStringStartsWith("--");
@@ -1111,25 +1106,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
-function calcOrigin(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -1145,20 +1125,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
@@ -1281,20 +1267,11 @@ function resolveMotionValue(value) {
     return isMotionValue(value) ? value.get() : value;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
@@ -1381,68 +1358,6 @@ const htmlMotionConfig = {
     }),
 };
 
-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,
-        };
-    }
-}
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
@@ -1457,49 +1372,10 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        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;
-                    }
-                }
-            }
-            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;
-                    }
-                }
-            }
-            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/motion/utils/use-visual-state.mjs

@@ -7,20 +7,11 @@ import { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs
 import { useConstant } from '../../utils/use-constant.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {

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

@@ -114,8 +114,7 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState, onUpdate } = visualState;
-        this.onUpdate = onUpdate;
+        const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -317,7 +316,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;

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

@@ -4,12 +4,10 @@ import { camelToDash } from '../dom/utils/camel-to-dash.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 { updateSVGDimensions } from './utils/measure.mjs';
 import { renderSVG } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 import { getDefaultValueType } from '../../../../../motion-dom/dist/es/value/types/maps/defaults.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
@@ -17,11 +15,6 @@ class SVGVisualElement extends DOMVisualElement {
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
-        this.updateDimensions = () => {
-            if (this.current && !this.renderState.dimensions) {
-                updateSVGDimensions(this.current, this.renderState);
-            }
-        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -37,11 +30,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }

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

@@ -1,56 +1,11 @@
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.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 { updateSVGDimensions } from './utils/measure.mjs';
-import { renderSVG } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
-import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        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;
-                    }
-                }
-            }
-            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;
-                    }
-                }
-            }
-            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,11 +1,10 @@
 import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
 import { buildSVGPath } from './path.mjs';
-import { calcSVGTransformOrigin } from './transform-origin.mjs';
 
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -21,20 +20,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)

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.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "12.8.2", `Attempting to mix Motion versions ${nextValue.version} with 12.8.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -32,7 +32,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 = "12.8.0";
+        this.version = "12.8.1";
         /**
          * 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
@@ -176,8 +176,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }

package/dist/motion.dev.js

@@ -3777,7 +3777,7 @@
              * 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 = "12.8.0";
+            this.version = "12.8.1";
             /**
              * 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
@@ -3921,8 +3921,6 @@
          * @public
          */
         set(v, render = true) {
-            if (v === "none")
-                console.trace();
             if (!render || !this.passiveEffect) {
                 this.updateAndNotify(v, render);
             }
@@ -5240,7 +5238,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.8.2", `Attempting to mix Motion versions ${nextValue.version} with 12.8.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5373,8 +5371,7 @@
                     frame.render(this.render, false, true);
                 }
             };
-            const { latestValues, renderState, onUpdate } = visualState;
-            this.onUpdate = onUpdate;
+            const { latestValues, renderState } = visualState;
             this.latestValues = latestValues;
             this.baseTarget = { ...latestValues };
             this.initialValues = props.initial ? { ...latestValues } : {};
@@ -5576,7 +5573,6 @@
             if (this.handleChildMotionValue) {
                 this.handleChildMotionValue();
             }
-            this.onUpdate && this.onUpdate(this);
         }
         getProps() {
             return this.props;
@@ -5918,25 +5914,10 @@
         attrs[keys.array] = `${pathLength} ${pathSpacing}`;
     }
 
-    function calcOrigin(origin, offset, size) {
-        return typeof origin === "string"
-            ? origin
-            : px.transform(offset + size * origin);
-    }
-    /**
-     * The SVG transform origin defaults are different to CSS and is less intuitive,
-     * so we use the measured dimensions of the SVG to reconcile these.
-     */
-    function calcSVGTransformOrigin(dimensions, originX, originY) {
-        const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-        const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-        return `${pxOriginX} ${pxOriginY}`;
-    }
-
     /**
      * Build SVG visual attrbutes, like cx and style.transform
      */
-    function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+    function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
     // This is object creation, which we try to avoid per-frame.
     ...latest }, isSVGTag, transformTemplate) {
         buildHTMLStyles(state, latest, transformTemplate);
@@ -5952,20 +5933,26 @@
         }
         state.attrs = state.style;
         state.style = {};
-        const { attrs, style, dimensions } = state;
+        const { attrs, style } = state;
         /**
-         * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-         * and copy it into style.
+         * However, we apply transforms as CSS transforms.
+         * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
          */
         if (attrs.transform) {
-            if (dimensions)
-                style.transform = attrs.transform;
+            style.transform = attrs.transform;
             delete attrs.transform;
         }
-        // Parse transformOrigin
-        if (dimensions &&
-            (originX !== undefined || originY !== undefined || style.transform)) {
-            style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+        if (style.transform || attrs.transformOrigin) {
+            style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+            delete attrs.transformOrigin;
+        }
+        if (style.transform) {
+            /**
+             * SVG's element transform-origin uses its own median as a reference.
+             * Therefore, transformBox becomes a fill-box
+             */
+            style.transformBox = "fill-box";
+            delete attrs.transformBox;
         }
         // Render attrX/attrY/attrScale as attributes
         if (attrX !== undefined)
@@ -6011,24 +5998,6 @@
 
     const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
 
-    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,
-            };
-        }
-    }
-
     function renderHTML(element, { style, vars }, styleProp, projection) {
         Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
         // Loop over any CSS variables and assign those.
@@ -6088,11 +6057,6 @@
             this.type = "svg";
             this.isSVGTag = false;
             this.measureInstanceViewportBox = createBox;
-            this.updateDimensions = () => {
-                if (this.current && !this.renderState.dimensions) {
-                    updateSVGDimensions(this.current, this.renderState);
-                }
-            };
         }
         getBaseTargetFromProps(props, key) {
             return props[key];
@@ -6108,11 +6072,6 @@
         scrapeMotionValuesFromProps(props, prevProps, visualElement) {
             return scrapeMotionValuesFromProps(props, prevProps, visualElement);
         }
-        onBindTransform() {
-            if (this.current && !this.renderState.dimensions) {
-                frame.postRender(this.updateDimensions);
-            }
-        }
         build(renderState, latestValues, props) {
             buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
         }