framer-motion 12.8.0 → 12.9.0

package/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/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.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/framer-motion.dev.js

@@ -2322,7 +2322,6 @@
             this.holdTime = null;
         }
         finish() {
-            this.notifyFinished();
             this.teardown();
             this.state = "finished";
             const { onComplete } = this.options;
@@ -2335,6 +2334,7 @@
             this.teardown();
         }
         teardown() {
+            this.notifyFinished();
             this.state = "idle";
             this.stopDriver();
             this.startTime = this.holdTime = null;
@@ -2787,7 +2787,7 @@
             this.isStopped = false;
             if (!options)
                 return;
-            const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
+            const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
             this.isPseudoElement = Boolean(pseudoElement);
             this.allowFlatten = allowFlatten;
             this.options = options;
@@ -2813,8 +2813,13 @@
                     }
                     this.animation.cancel();
                 }
+                onComplete?.();
                 this.notifyFinished();
             };
+            /**
+             * TODO: In a breaking change, we should replace this with `.notifyCancel()`
+             */
+            this.animation.oncancel = () => this.notifyFinished();
         }
         play() {
             if (this.isStopped)
@@ -3139,7 +3144,7 @@
         }
         onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
             this.keyframeResolver = undefined;
-            const { name, type, velocity, delay, isHandoff, onUpdate, onComplete } = options;
+            const { name, type, velocity, delay, isHandoff, onUpdate } = options;
             this.resolvedAt = time.now();
             /**
              * If we can't animate this value with the resolved keyframes
@@ -3189,12 +3194,7 @@
                     element: resolvedOptions.motionValue.owner.current,
                 })
                 : new JSAnimation(resolvedOptions);
-            animation.finished
-                .then(() => {
-                onComplete?.();
-                this.notifyFinished();
-            })
-                .catch(noop);
+            animation.finished.then(() => this.notifyFinished()).catch(noop);
             if (this.pendingTimeline) {
                 this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
                 this.pendingTimeline = undefined;
@@ -3807,6 +3807,54 @@
         // "background-color"
     ]);
 
+    function resolveElements(elementOrSelector, scope, selectorCache) {
+        if (elementOrSelector instanceof EventTarget) {
+            return [elementOrSelector];
+        }
+        else if (typeof elementOrSelector === "string") {
+            let root = document;
+            if (scope) {
+                root = scope.current;
+            }
+            const elements = selectorCache?.[elementOrSelector] ??
+                root.querySelectorAll(elementOrSelector);
+            return elements ? Array.from(elements) : [];
+        }
+        return Array.from(elementOrSelector);
+    }
+
+    function styleEffect(subject, values) {
+        const elements = resolveElements(subject);
+        const subscriptions = [];
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            for (const key in values) {
+                const value = values[key];
+                /**
+                 * TODO: Get specific setters for combined props (like x)
+                 * or values with default types (like color)
+                 *
+                 * TODO: CSS variable support
+                 */
+                const updateStyle = () => {
+                    element.style[key] = value.get();
+                };
+                const scheduleUpdate = () => frame.render(updateStyle);
+                const cancel = value.on("change", scheduleUpdate);
+                scheduleUpdate();
+                subscriptions.push(() => {
+                    cancel();
+                    cancelFrame(updateStyle);
+                });
+            }
+        }
+        return () => {
+            for (const cancel of subscriptions) {
+                cancel();
+            }
+        };
+    }
+
     const { schedule: microtask, cancel: cancelMicrotask } = 
     /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
@@ -3843,22 +3891,6 @@
         }
     }
 
-    function resolveElements(elementOrSelector, scope, selectorCache) {
-        if (elementOrSelector instanceof EventTarget) {
-            return [elementOrSelector];
-        }
-        else if (typeof elementOrSelector === "string") {
-            let root = document;
-            if (scope) {
-                root = scope.current;
-            }
-            const elements = selectorCache?.[elementOrSelector] ??
-                root.querySelectorAll(elementOrSelector);
-            return elements ? Array.from(elements) : [];
-        }
-        return Array.from(elementOrSelector);
-    }
-
     function setupGesture(elementOrSelector, options) {
         const elements = resolveElements(elementOrSelector);
         const gestureAbortController = new AbortController();
@@ -4233,7 +4265,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.9.0";
             /**
              * 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
@@ -4259,12 +4291,12 @@
                 this.prev = this.current;
                 this.setCurrent(v);
                 // Update update subscribers
-                if (this.current !== this.prev && this.events.change) {
-                    this.events.change.notify(this.current);
+                if (this.current !== this.prev) {
+                    this.events.change?.notify(this.current);
                 }
                 // Update render subscribers
-                if (render && this.events.renderRequest) {
-                    this.events.renderRequest.notify(this.current);
+                if (render) {
+                    this.events.renderRequest?.notify(this.current);
                 }
             };
             this.hasAnimated = false;
@@ -4377,8 +4409,6 @@
          * @public
          */
         set(v, render = true) {
-            if (v === "none")
-                console.trace();
             if (!render || !this.passiveEffect) {
                 this.updateAndNotify(v, render);
             }
@@ -7578,7 +7608,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.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7746,8 +7776,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 } : {};
@@ -7949,7 +7978,6 @@
             if (this.handleChildMotionValue) {
                 this.handleChildMotionValue();
             }
-            this.onUpdate && this.onUpdate(this);
         }
         getProps() {
             return this.props;
@@ -8719,6 +8747,17 @@
                 delay,
                 ...getValueTransition$1(transition || {}, key),
             };
+            /**
+             * If the value is already at the defined target, skip the animation.
+             */
+            const currentValue = value.get();
+            if (currentValue !== undefined &&
+                !value.isAnimating &&
+                !Array.isArray(valueTarget) &&
+                valueTarget === currentValue &&
+                !valueTransition.velocity) {
+                continue;
+            }
             /**
              * If this is the first time a value is being animated, check
              * to see if we're handling off from an existing animation.
@@ -9541,7 +9580,7 @@
      * Calculate a transform origin relative to the source axis, between 0-1, that results
      * in an asthetically pleasing scale/transform needed to project from source to target.
      */
-    function calcOrigin$1(source, target) {
+    function calcOrigin(source, target) {
         let origin = 0.5;
         const sourceLength = calcLength(source);
         const targetLength = calcLength(target);
@@ -9935,7 +9974,7 @@
                 const axisValue = this.getAxisMotionValue(axis);
                 if (axisValue && this.constraints !== false) {
                     const latest = axisValue.get();
-                    boxProgress[axis] = calcOrigin$1({ min: latest, max: latest }, this.constraints[axis]);
+                    boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
                 }
             });
             /**
@@ -10886,25 +10925,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);
@@ -10920,20 +10944,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)
@@ -10997,20 +11027,11 @@
         return useRender;
     }
 
-    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) => {
@@ -11082,22 +11103,41 @@
         }),
     };
 
-    function updateSVGDimensions(instance, renderState) {
-        try {
-            renderState.dimensions =
-                typeof instance.getBBox === "function"
-                    ? instance.getBBox()
-                    : instance.getBoundingClientRect();
+    function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+        const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+        for (const key in props) {
+            if (isMotionValue(props[key]) ||
+                isMotionValue(prevProps[key])) {
+                const targetKey = transformPropOrder.indexOf(key) !== -1
+                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
+                    : key;
+                newValues[targetKey] = props[key];
+            }
         }
-        catch (e) {
-            // Most likely trying to measure an unrendered element under Firefox
-            renderState.dimensions = {
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0,
+        return newValues;
+    }
+
+    const svgMotionConfig = {
+        useVisualState: makeUseVisualState({
+            scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+            createRenderState: createSvgRenderState,
+        }),
+    };
+
+    function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
+        return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {
+            const baseConfig = isSVGComponent(Component)
+                ? svgMotionConfig
+                : htmlMotionConfig;
+            const config = {
+                ...baseConfig,
+                preloadedFeatures,
+                useRender: createUseRender(forwardMotionProps),
+                createVisualElement,
+                Component,
             };
-        }
+            return createRendererMotionComponent(config);
+        };
     }
 
     /**
@@ -11136,93 +11176,12 @@
         }
     }
 
-    function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-        const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
-        for (const key in props) {
-            if (isMotionValue(props[key]) ||
-                isMotionValue(prevProps[key])) {
-                const targetKey = transformPropOrder.indexOf(key) !== -1
-                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
-                    : key;
-                newValues[targetKey] = props[key];
-            }
-        }
-        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);
-                    });
-                });
-            },
-        }),
-    };
-
-    function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
-        return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {
-            const baseConfig = isSVGComponent(Component)
-                ? svgMotionConfig
-                : htmlMotionConfig;
-            const config = {
-                ...baseConfig,
-                preloadedFeatures,
-                useRender: createUseRender(forwardMotionProps),
-                createVisualElement,
-                Component,
-            };
-            return createRendererMotionComponent(config);
-        };
-    }
-
     class SVGVisualElement extends DOMVisualElement {
         constructor() {
             super(...arguments);
             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];
@@ -11238,11 +11197,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);
         }
@@ -13862,6 +13816,7 @@
     exports.startWaapiAnimation = startWaapiAnimation;
     exports.statsBuffer = statsBuffer;
     exports.steps = steps;
+    exports.styleEffect = styleEffect;
     exports.supportedWaapiEasing = supportedWaapiEasing;
     exports.supportsBrowserAnimation = supportsBrowserAnimation;
     exports.supportsFlags = supportsFlags;