motion 12.8.0 → 12.9.0

package/dist/cjs/index.js

@@ -1865,7 +1865,6 @@ class JSAnimation extends WithPromise {
         this.holdTime = null;
     }
     finish() {
-        this.notifyFinished();
         this.teardown();
         this.state = "finished";
         const { onComplete } = this.options;
@@ -1878,6 +1877,7 @@ class JSAnimation extends WithPromise {
         this.teardown();
     }
     teardown() {
+        this.notifyFinished();
         this.state = "idle";
         this.stopDriver();
         this.startTime = this.holdTime = null;
@@ -2330,7 +2330,7 @@ class NativeAnimation extends WithPromise {
         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;
@@ -2356,8 +2356,13 @@ class NativeAnimation extends WithPromise {
                 }
                 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)
@@ -2682,7 +2687,7 @@ class AsyncMotionValueAnimation extends WithPromise {
     }
     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
@@ -2732,12 +2737,7 @@ class AsyncMotionValueAnimation extends WithPromise {
                 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;
@@ -3350,6 +3350,54 @@ const acceleratedValues = new Set([
     // "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);
 
@@ -3386,22 +3434,6 @@ function setDragLock(axis) {
     }
 }
 
-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();
@@ -3776,7 +3808,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.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
@@ -3802,12 +3834,12 @@ class MotionValue {
             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;
@@ -3920,8 +3952,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
@@ -5100,6 +5130,17 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             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.
@@ -5239,7 +5280,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)) {
@@ -5372,8 +5413,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 } : {};
@@ -5575,7 +5615,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -5917,25 +5956,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);
@@ -5951,20 +5975,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)
@@ -6010,24 +6040,6 @@ const camelCaseAttributes = new Set([
 
 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.
@@ -6087,11 +6099,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];
@@ -6107,11 +6114,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);
     }
@@ -7214,6 +7216,7 @@ exports.stagger = stagger;
 exports.startWaapiAnimation = startWaapiAnimation;
 exports.statsBuffer = statsBuffer;
 exports.steps = steps;
+exports.styleEffect = styleEffect;
 exports.supportedWaapiEasing = supportedWaapiEasing;
 exports.supportsBrowserAnimation = supportsBrowserAnimation;
 exports.supportsFlags = supportsFlags;

package/dist/cjs/mini.js

@@ -317,7 +317,7 @@ class NativeAnimation extends WithPromise {
         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;
@@ -343,8 +343,13 @@ class NativeAnimation extends WithPromise {
                 }
                 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)