framer-motion 12.8.2 → 12.9.0

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.1";
+            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;
@@ -7576,7 +7608,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.8.2", `Attempting to mix Motion versions ${nextValue.version} with 12.8.2 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)) {
@@ -8715,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.
@@ -13773,6 +13816,7 @@
     exports.startWaapiAnimation = startWaapiAnimation;
     exports.statsBuffer = statsBuffer;
     exports.steps = steps;
+    exports.styleEffect = styleEffect;
     exports.supportedWaapiEasing = supportedWaapiEasing;
     exports.supportsBrowserAnimation = supportsBrowserAnimation;
     exports.supportsFlags = supportsFlags;