framer-motion 12.12.2 → 12.13.0

package/dist/framer-motion.dev.js

@@ -1682,12 +1682,10 @@
              * This method is bound to the instance to fix a pattern where
              * animation.stop is returned as a reference from a useEffect.
              */
-            this.stop = (sync = true) => {
-                if (sync) {
-                    const { motionValue } = this.options;
-                    if (motionValue && motionValue.updatedAt !== time.now()) {
-                        this.tick(time.now());
-                    }
+            this.stop = () => {
+                const { motionValue } = this.options;
+                if (motionValue && motionValue.updatedAt !== time.now()) {
+                    this.tick(time.now());
                 }
                 this.isStopped = true;
                 if (this.state === "idle")
@@ -3429,22 +3427,6 @@
         // "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);
-    }
-
     /**
      * Maximum time between the value of two frames, beyond which we
      * assume the velocity has since been 0.
@@ -3767,6 +3749,37 @@
         return new MotionValue(init, options);
     }
 
+    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 createSelectorEffect(subjectEffect) {
+        return (subject, values) => {
+            const elements = resolveElements(subject);
+            const subscriptions = [];
+            for (const element of elements) {
+                const remove = subjectEffect(element, values);
+                subscriptions.push(remove);
+            }
+            return () => {
+                for (const remove of subscriptions)
+                    remove();
+            };
+        };
+    }
+
     /**
      * Provided a value and a ValueType, returns the value as that value type.
      */
@@ -3781,13 +3794,19 @@
             this.latest = {};
             this.values = new Map();
         }
-        set(name, value, render, computed) {
+        set(name, value, render, computed, useDefaultValueType = true) {
             const existingValue = this.values.get(name);
             if (existingValue) {
                 existingValue.onRemove();
             }
             const onChange = () => {
-                this.latest[name] = getValueAsType(value.get(), numberValueTypes[name]);
+                const v = value.get();
+                if (useDefaultValueType) {
+                    this.latest[name] = getValueAsType(v, numberValueTypes[name]);
+                }
+                else {
+                    this.latest[name] = v;
+                }
                 render && frame.render(render);
             };
             onChange();
@@ -3812,6 +3831,24 @@
         }
     }
 
+    function createEffect(addValue) {
+        const stateCache = new WeakMap();
+        const subscriptions = [];
+        return (subject, values) => {
+            const state = stateCache.get(subject) ?? new MotionValueState();
+            stateCache.set(subject, state);
+            for (const key in values) {
+                const value = values[key];
+                const remove = addValue(subject, state, key, value);
+                subscriptions.push(remove);
+            }
+            return () => {
+                for (const cancel of subscriptions)
+                    cancel();
+            };
+        };
+    }
+
     const translateAlias$1 = {
         x: "translateX",
         y: "translateY",
@@ -3847,26 +3884,7 @@
         return transformIsDefault ? "none" : transform.trim();
     }
 
-    const stateMap = new WeakMap();
-    function styleEffect(subject, values) {
-        const elements = resolveElements(subject);
-        const subscriptions = [];
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            const state = stateMap.get(element) ?? new MotionValueState();
-            stateMap.set(element, state);
-            for (const key in values) {
-                const value = values[key];
-                const remove = addValue(element, state, key, value);
-                subscriptions.push(remove);
-            }
-        }
-        return () => {
-            for (const cancel of subscriptions)
-                cancel();
-        };
-    }
-    function addValue(element, state, key, value) {
+    const addStyleValue = (element, state, key, value) => {
         let render = undefined;
         let computed = undefined;
         if (transformProps.has(key)) {
@@ -3888,7 +3906,8 @@
             };
         }
         return state.set(key, value, render, computed);
-    }
+    };
+    const styleEffect = createSelectorEffect(createEffect(addStyleValue));
 
     const { schedule: microtask, cancel: cancelMicrotask } = 
     /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
@@ -6262,7 +6281,6 @@
                                 this.resumingFrom = this.resumeFrom;
                                 this.resumingFrom.resumingFrom = undefined;
                             }
-                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                             const animationOptions = {
                                 ...getValueTransition$1(layoutTransition, "layout"),
                                 onPlay: onLayoutAnimationStart,
@@ -6274,6 +6292,11 @@
                                 animationOptions.type = false;
                             }
                             this.startAnimation(animationOptions);
+                            /**
+                             * Set animation origin after starting animation to avoid layout jump
+                             * caused by stopping previous layout animation
+                             */
+                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                         }
                         else {
                             /**
@@ -7009,8 +7032,8 @@
             }
             startAnimation(options) {
                 this.notifyListeners("animationStart");
-                this.currentAnimation?.stop(false);
-                this.resumingFrom?.currentAnimation?.stop(false);
+                this.currentAnimation?.stop();
+                this.resumingFrom?.currentAnimation?.stop();
                 if (this.pendingAnimation) {
                     cancelFrame(this.pendingAnimation);
                     this.pendingAnimation = undefined;
@@ -7062,7 +7085,7 @@
             finishAnimation() {
                 if (this.currentAnimation) {
                     this.mixTargetDelta && this.mixTargetDelta(animationTarget);
-                    this.currentAnimation.stop(false);
+                    this.currentAnimation.stop();
                 }
                 this.completeAnimation();
             }
@@ -7327,7 +7350,7 @@
             }
             // Only run on root
             resetTree() {
-                this.root.nodes.forEach((node) => node.currentAnimation?.stop(false));
+                this.root.nodes.forEach((node) => node.currentAnimation?.stop());
                 this.root.nodes.forEach(clearMeasurements);
                 this.root.sharedNodes.clear();
             }
@@ -13794,6 +13817,7 @@
     exports.addPointerEvent = addPointerEvent;
     exports.addPointerInfo = addPointerInfo;
     exports.addScaleCorrector = addScaleCorrector;
+    exports.addStyleValue = addStyleValue;
     exports.addUniqueItem = addUniqueItem;
     exports.alpha = alpha;
     exports.analyseComplexValue = analyseComplexValue;