motion 12.8.0 → 12.9.0

package/dist/motion.dev.js

@@ -1866,7 +1866,6 @@
             this.holdTime = null;
         }
         finish() {
-            this.notifyFinished();
             this.teardown();
             this.state = "finished";
             const { onComplete } = this.options;
@@ -1879,6 +1878,7 @@
             this.teardown();
         }
         teardown() {
+            this.notifyFinished();
             this.state = "idle";
             this.stopDriver();
             this.startTime = this.holdTime = null;
@@ -2331,7 +2331,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;
@@ -2357,8 +2357,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)
@@ -2683,7 +2688,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
@@ -2733,12 +2738,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;
@@ -3351,6 +3351,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);
 
@@ -3387,22 +3435,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();
@@ -3777,7 +3809,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
@@ -3803,12 +3835,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;
@@ -3921,8 +3953,6 @@
          * @public
          */
         set(v, render = true) {
-            if (v === "none")
-                console.trace();
             if (!render || !this.passiveEffect) {
                 this.updateAndNotify(v, render);
             }
@@ -5101,6 +5131,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.
@@ -5240,7 +5281,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)) {
@@ -5373,8 +5414,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 +5616,6 @@
             if (this.handleChildMotionValue) {
                 this.handleChildMotionValue();
             }
-            this.onUpdate && this.onUpdate(this);
         }
         getProps() {
             return this.props;
@@ -5918,25 +5957,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 +5976,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 +6041,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 +6100,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 +6115,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);
         }
@@ -7215,6 +7217,7 @@
     exports.startWaapiAnimation = startWaapiAnimation;
     exports.statsBuffer = statsBuffer;
     exports.steps = steps;
+    exports.styleEffect = styleEffect;
     exports.supportedWaapiEasing = supportedWaapiEasing;
     exports.supportsBrowserAnimation = supportsBrowserAnimation;
     exports.supportsFlags = supportsFlags;