motion 12.9.7 → 12.10.1

package/dist/cjs/react-client.js

@@ -991,7 +991,7 @@ function mix(from, to, p) {
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);
     return {
-        start: () => frame.update(passTimestamp, true),
+        start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),
         stop: () => cancelFrame(passTimestamp),
         /**
          * If we're processing this frame we can use the
@@ -1818,6 +1818,7 @@ class JSAnimation extends WithPromise {
         else if (this.driver) {
             this.startTime = this.driver.now() - newTime / this.playbackSpeed;
         }
+        this.driver?.start(false);
     }
     get speed() {
         return this.playbackSpeed;
@@ -1906,6 +1907,7 @@ class JSAnimation extends WithPromise {
             this.options.ease = "linear";
             this.initAnimation();
         }
+        this.driver?.stop();
         return timeline.observe(this);
     }
 }
@@ -3187,243 +3189,6 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     return Array.from(elementOrSelector);
 }
 
-const { schedule: microtask, cancel: cancelMicrotask } = 
-/* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
-
-const isDragging = {
-    x: false,
-    y: false,
-};
-function isDragActive() {
-    return isDragging.x || isDragging.y;
-}
-
-function setDragLock(axis) {
-    if (axis === "x" || axis === "y") {
-        if (isDragging[axis]) {
-            return null;
-        }
-        else {
-            isDragging[axis] = true;
-            return () => {
-                isDragging[axis] = false;
-            };
-        }
-    }
-    else {
-        if (isDragging.x || isDragging.y) {
-            return null;
-        }
-        else {
-            isDragging.x = isDragging.y = true;
-            return () => {
-                isDragging.x = isDragging.y = false;
-            };
-        }
-    }
-}
-
-function setupGesture(elementOrSelector, options) {
-    const elements = resolveElements(elementOrSelector);
-    const gestureAbortController = new AbortController();
-    const eventOptions = {
-        passive: true,
-        ...options,
-        signal: gestureAbortController.signal,
-    };
-    const cancel = () => gestureAbortController.abort();
-    return [elements, eventOptions, cancel];
-}
-
-function isValidHover(event) {
-    return !(event.pointerType === "touch" || isDragActive());
-}
-/**
- * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
- * in that it has an easier syntax, filters out polyfilled touch events, interoperates
- * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
- *
- * @public
- */
-function hover(elementOrSelector, onHoverStart, options = {}) {
-    const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-    const onPointerEnter = (enterEvent) => {
-        if (!isValidHover(enterEvent))
-            return;
-        const { target } = enterEvent;
-        const onHoverEnd = onHoverStart(target, enterEvent);
-        if (typeof onHoverEnd !== "function" || !target)
-            return;
-        const onPointerLeave = (leaveEvent) => {
-            if (!isValidHover(leaveEvent))
-                return;
-            onHoverEnd(leaveEvent);
-            target.removeEventListener("pointerleave", onPointerLeave);
-        };
-        target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-    };
-    elements.forEach((element) => {
-        element.addEventListener("pointerenter", onPointerEnter, eventOptions);
-    });
-    return cancel;
-}
-
-/**
- * Recursively traverse up the tree to check whether the provided child node
- * is the parent or a descendant of it.
- *
- * @param parent - Element to find
- * @param child - Element to test against parent
- */
-const isNodeOrChild = (parent, child) => {
-    if (!child) {
-        return false;
-    }
-    else if (parent === child) {
-        return true;
-    }
-    else {
-        return isNodeOrChild(parent, child.parentElement);
-    }
-};
-
-const isPrimaryPointer = (event) => {
-    if (event.pointerType === "mouse") {
-        return typeof event.button !== "number" || event.button <= 0;
-    }
-    else {
-        /**
-         * isPrimary is true for all mice buttons, whereas every touch point
-         * is regarded as its own input. So subsequent concurrent touch points
-         * will be false.
-         *
-         * Specifically match against false here as incomplete versions of
-         * PointerEvents in very old browser might have it set as undefined.
-         */
-        return event.isPrimary !== false;
-    }
-};
-
-const focusableElements = new Set([
-    "BUTTON",
-    "INPUT",
-    "SELECT",
-    "TEXTAREA",
-    "A",
-]);
-function isElementKeyboardAccessible(element) {
-    return (focusableElements.has(element.tagName) ||
-        element.tabIndex !== -1);
-}
-
-const isPressing = new WeakSet();
-
-/**
- * Filter out events that are not "Enter" keys.
- */
-function filterEvents(callback) {
-    return (event) => {
-        if (event.key !== "Enter")
-            return;
-        callback(event);
-    };
-}
-function firePointerEvent(target, type) {
-    target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
-}
-const enableKeyboardPress = (focusEvent, eventOptions) => {
-    const element = focusEvent.currentTarget;
-    if (!element)
-        return;
-    const handleKeydown = filterEvents(() => {
-        if (isPressing.has(element))
-            return;
-        firePointerEvent(element, "down");
-        const handleKeyup = filterEvents(() => {
-            firePointerEvent(element, "up");
-        });
-        const handleBlur = () => firePointerEvent(element, "cancel");
-        element.addEventListener("keyup", handleKeyup, eventOptions);
-        element.addEventListener("blur", handleBlur, eventOptions);
-    });
-    element.addEventListener("keydown", handleKeydown, eventOptions);
-    /**
-     * Add an event listener that fires on blur to remove the keydown events.
-     */
-    element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
-};
-
-/**
- * Filter out events that are not primary pointer events, or are triggering
- * while a Motion gesture is active.
- */
-function isValidPressEvent(event) {
-    return isPrimaryPointer(event) && !isDragActive();
-}
-/**
- * Create a press gesture.
- *
- * Press is different to `"pointerdown"`, `"pointerup"` in that it
- * automatically filters out secondary pointer events like right
- * click and multitouch.
- *
- * It also adds accessibility support for keyboards, where
- * an element with a press gesture will receive focus and
- *  trigger on Enter `"keydown"` and `"keyup"` events.
- *
- * This is different to a browser's `"click"` event, which does
- * respond to keyboards but only for the `"click"` itself, rather
- * than the press start and end/cancel. The element also needs
- * to be focusable for this to work, whereas a press gesture will
- * make an element focusable by default.
- *
- * @public
- */
-function press(targetOrSelector, onPressStart, options = {}) {
-    const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
-    const startPress = (startEvent) => {
-        const target = startEvent.currentTarget;
-        if (!isValidPressEvent(startEvent) || isPressing.has(target))
-            return;
-        isPressing.add(target);
-        const onPressEnd = onPressStart(target, startEvent);
-        const onPointerEnd = (endEvent, success) => {
-            window.removeEventListener("pointerup", onPointerUp);
-            window.removeEventListener("pointercancel", onPointerCancel);
-            if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
-                return;
-            }
-            isPressing.delete(target);
-            if (typeof onPressEnd === "function") {
-                onPressEnd(endEvent, { success });
-            }
-        };
-        const onPointerUp = (upEvent) => {
-            onPointerEnd(upEvent, target === window ||
-                target === document ||
-                options.useGlobalTarget ||
-                isNodeOrChild(target, upEvent.target));
-        };
-        const onPointerCancel = (cancelEvent) => {
-            onPointerEnd(cancelEvent, false);
-        };
-        window.addEventListener("pointerup", onPointerUp, eventOptions);
-        window.addEventListener("pointercancel", onPointerCancel, eventOptions);
-    };
-    targets.forEach((target) => {
-        const pointerDownTarget = options.useGlobalTarget ? window : target;
-        pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-        if (target instanceof HTMLElement) {
-            target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
-            if (!isElementKeyboardAccessible(target) &&
-                !target.hasAttribute("tabindex")) {
-                target.tabIndex = 0;
-            }
-        }
-    });
-    return cancelEvents;
-}
-
 /**
  * Maximum time between the value of two frames, beyond which we
  * assume the velocity has since been 0.
@@ -3477,6 +3242,11 @@ class MotionValue {
             // Update update subscribers
             if (this.current !== this.prev) {
                 this.events.change?.notify(this.current);
+                if (this.dependents) {
+                    for (const dependent of this.dependents) {
+                        dependent.dirty();
+                    }
+                }
             }
             // Update render subscribers
             if (render) {
@@ -3618,6 +3388,20 @@ class MotionValue {
         if (this.stopPassiveEffect)
             this.stopPassiveEffect();
     }
+    dirty() {
+        this.events.change?.notify(this.current);
+    }
+    addDependent(dependent) {
+        if (!this.dependents) {
+            this.dependents = new Set();
+        }
+        this.dependents.add(dependent);
+    }
+    removeDependent(dependent) {
+        if (this.dependents) {
+            this.dependents.delete(dependent);
+        }
+    }
     /**
      * Returns the latest state of `MotionValue`
      *
@@ -3713,6 +3497,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.dependents?.clear();
         this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
@@ -3725,15 +3510,6 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 
-/**
- * A list of all ValueTypes
- */
-const valueTypes = [...dimensionValueTypes, color, complex];
-/**
- * Tests a value against the list of ValueTypes
- */
-const findValueType = (v) => valueTypes.find(testValueType(v));
-
 /**
  * Provided a value and a ValueType, returns the value as that value type.
  */
@@ -3743,6 +3519,254 @@ const getValueAsType = (value, type) => {
         : value;
 };
 
+const { schedule: microtask, cancel: cancelMicrotask } = 
+/* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
+
+const isDragging = {
+    x: false,
+    y: false,
+};
+function isDragActive() {
+    return isDragging.x || isDragging.y;
+}
+
+function setDragLock(axis) {
+    if (axis === "x" || axis === "y") {
+        if (isDragging[axis]) {
+            return null;
+        }
+        else {
+            isDragging[axis] = true;
+            return () => {
+                isDragging[axis] = false;
+            };
+        }
+    }
+    else {
+        if (isDragging.x || isDragging.y) {
+            return null;
+        }
+        else {
+            isDragging.x = isDragging.y = true;
+            return () => {
+                isDragging.x = isDragging.y = false;
+            };
+        }
+    }
+}
+
+function setupGesture(elementOrSelector, options) {
+    const elements = resolveElements(elementOrSelector);
+    const gestureAbortController = new AbortController();
+    const eventOptions = {
+        passive: true,
+        ...options,
+        signal: gestureAbortController.signal,
+    };
+    const cancel = () => gestureAbortController.abort();
+    return [elements, eventOptions, cancel];
+}
+
+function isValidHover(event) {
+    return !(event.pointerType === "touch" || isDragActive());
+}
+/**
+ * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
+ * in that it has an easier syntax, filters out polyfilled touch events, interoperates
+ * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
+ *
+ * @public
+ */
+function hover(elementOrSelector, onHoverStart, options = {}) {
+    const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
+    const onPointerEnter = (enterEvent) => {
+        if (!isValidHover(enterEvent))
+            return;
+        const { target } = enterEvent;
+        const onHoverEnd = onHoverStart(target, enterEvent);
+        if (typeof onHoverEnd !== "function" || !target)
+            return;
+        const onPointerLeave = (leaveEvent) => {
+            if (!isValidHover(leaveEvent))
+                return;
+            onHoverEnd(leaveEvent);
+            target.removeEventListener("pointerleave", onPointerLeave);
+        };
+        target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+    };
+    elements.forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+    });
+    return cancel;
+}
+
+/**
+ * Recursively traverse up the tree to check whether the provided child node
+ * is the parent or a descendant of it.
+ *
+ * @param parent - Element to find
+ * @param child - Element to test against parent
+ */
+const isNodeOrChild = (parent, child) => {
+    if (!child) {
+        return false;
+    }
+    else if (parent === child) {
+        return true;
+    }
+    else {
+        return isNodeOrChild(parent, child.parentElement);
+    }
+};
+
+const isPrimaryPointer = (event) => {
+    if (event.pointerType === "mouse") {
+        return typeof event.button !== "number" || event.button <= 0;
+    }
+    else {
+        /**
+         * isPrimary is true for all mice buttons, whereas every touch point
+         * is regarded as its own input. So subsequent concurrent touch points
+         * will be false.
+         *
+         * Specifically match against false here as incomplete versions of
+         * PointerEvents in very old browser might have it set as undefined.
+         */
+        return event.isPrimary !== false;
+    }
+};
+
+const focusableElements = new Set([
+    "BUTTON",
+    "INPUT",
+    "SELECT",
+    "TEXTAREA",
+    "A",
+]);
+function isElementKeyboardAccessible(element) {
+    return (focusableElements.has(element.tagName) ||
+        element.tabIndex !== -1);
+}
+
+const isPressing = new WeakSet();
+
+/**
+ * Filter out events that are not "Enter" keys.
+ */
+function filterEvents(callback) {
+    return (event) => {
+        if (event.key !== "Enter")
+            return;
+        callback(event);
+    };
+}
+function firePointerEvent(target, type) {
+    target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
+}
+const enableKeyboardPress = (focusEvent, eventOptions) => {
+    const element = focusEvent.currentTarget;
+    if (!element)
+        return;
+    const handleKeydown = filterEvents(() => {
+        if (isPressing.has(element))
+            return;
+        firePointerEvent(element, "down");
+        const handleKeyup = filterEvents(() => {
+            firePointerEvent(element, "up");
+        });
+        const handleBlur = () => firePointerEvent(element, "cancel");
+        element.addEventListener("keyup", handleKeyup, eventOptions);
+        element.addEventListener("blur", handleBlur, eventOptions);
+    });
+    element.addEventListener("keydown", handleKeydown, eventOptions);
+    /**
+     * Add an event listener that fires on blur to remove the keydown events.
+     */
+    element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+};
+
+/**
+ * Filter out events that are not primary pointer events, or are triggering
+ * while a Motion gesture is active.
+ */
+function isValidPressEvent(event) {
+    return isPrimaryPointer(event) && !isDragActive();
+}
+/**
+ * Create a press gesture.
+ *
+ * Press is different to `"pointerdown"`, `"pointerup"` in that it
+ * automatically filters out secondary pointer events like right
+ * click and multitouch.
+ *
+ * It also adds accessibility support for keyboards, where
+ * an element with a press gesture will receive focus and
+ *  trigger on Enter `"keydown"` and `"keyup"` events.
+ *
+ * This is different to a browser's `"click"` event, which does
+ * respond to keyboards but only for the `"click"` itself, rather
+ * than the press start and end/cancel. The element also needs
+ * to be focusable for this to work, whereas a press gesture will
+ * make an element focusable by default.
+ *
+ * @public
+ */
+function press(targetOrSelector, onPressStart, options = {}) {
+    const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
+    const startPress = (startEvent) => {
+        const target = startEvent.currentTarget;
+        if (!isValidPressEvent(startEvent) || isPressing.has(target))
+            return;
+        isPressing.add(target);
+        const onPressEnd = onPressStart(target, startEvent);
+        const onPointerEnd = (endEvent, success) => {
+            window.removeEventListener("pointerup", onPointerUp);
+            window.removeEventListener("pointercancel", onPointerCancel);
+            if (isPressing.has(target)) {
+                isPressing.delete(target);
+            }
+            if (!isValidPressEvent(endEvent)) {
+                return;
+            }
+            if (typeof onPressEnd === "function") {
+                onPressEnd(endEvent, { success });
+            }
+        };
+        const onPointerUp = (upEvent) => {
+            onPointerEnd(upEvent, target === window ||
+                target === document ||
+                options.useGlobalTarget ||
+                isNodeOrChild(target, upEvent.target));
+        };
+        const onPointerCancel = (cancelEvent) => {
+            onPointerEnd(cancelEvent, false);
+        };
+        window.addEventListener("pointerup", onPointerUp, eventOptions);
+        window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+    };
+    targets.forEach((target) => {
+        const pointerDownTarget = options.useGlobalTarget ? window : target;
+        pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
+        if (target instanceof HTMLElement) {
+            target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
+            if (!isElementKeyboardAccessible(target) &&
+                !target.hasAttribute("tabindex")) {
+                target.tabIndex = 0;
+            }
+        }
+    });
+    return cancelEvents;
+}
+
+/**
+ * A list of all ValueTypes
+ */
+const valueTypes = [...dimensionValueTypes, color, complex];
+/**
+ * Tests a value against the list of ValueTypes
+ */
+const findValueType = (v) => valueTypes.find(testValueType(v));
+
 const isKeyframesTarget = (v) => {
     return Array.isArray(v);
 };

package/dist/cjs/react-m.js

@@ -485,9 +485,6 @@ const numberValueTypes = {
     numOctaves: int,
 };
 
-const { schedule: microtask, cancel: cancelMicrotask } = 
-/* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
-
 /**
  * Provided a value and a ValueType, returns the value as that value type.
  */
@@ -497,6 +494,9 @@ const getValueAsType = (value, type) => {
         : value;
 };
 
+const { schedule: microtask, cancel: cancelMicrotask } = 
+/* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
+
 /**
  * Convert camelCase to dash-case properties.
  */

package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs

@@ -42,9 +42,9 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
                 handler.notify();
         };
         const listener = () => {
-            frame.read(measureAll, false, true);
-            frame.read(updateAll, false, true);
-            frame.preUpdate(notifyAll, false, true);
+            frame.read(measureAll);
+            frame.read(updateAll);
+            frame.preUpdate(notifyAll);
         };
         scrollListeners.set(container, listener);
         const target = getEventTarget(container);
@@ -53,6 +53,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
             resizeListeners.set(container, resize(container, listener));
         }
         target.addEventListener("scroll", listener, { passive: true });
+        listener();
     }
     const listener = scrollListeners.get(container);
     frame.read(listener, false, true);

package/dist/es/motion/lib/index.mjs

@@ -39,7 +39,7 @@ export { supportsPartialKeyframes } from '../../motion-dom/dist/es/animation/waa
 export { supportsBrowserAnimation } from '../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs';
 export { acceleratedValues } from '../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs';
 export { generateLinearEasing } from '../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
-export { styleEffect } from '../../motion-dom/dist/es/effects/style-effect.mjs';
+export { styleEffect } from '../../motion-dom/dist/es/effects/style/index.mjs';
 export { createRenderBatcher } from '../../motion-dom/dist/es/frameloop/batcher.mjs';
 export { cancelMicrotask, microtask } from '../../motion-dom/dist/es/frameloop/microtask.mjs';
 export { time } from '../../motion-dom/dist/es/frameloop/sync-time.mjs';

package/dist/es/motion/lib/react.mjs

@@ -138,7 +138,7 @@ export { supportsPartialKeyframes } from '../../motion-dom/dist/es/animation/waa
 export { supportsBrowserAnimation } from '../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs';
 export { acceleratedValues } from '../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs';
 export { generateLinearEasing } from '../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
-export { styleEffect } from '../../motion-dom/dist/es/effects/style-effect.mjs';
+export { styleEffect } from '../../motion-dom/dist/es/effects/style/index.mjs';
 export { createRenderBatcher } from '../../motion-dom/dist/es/frameloop/batcher.mjs';
 export { cancelMicrotask, microtask } from '../../motion-dom/dist/es/frameloop/microtask.mjs';
 export { time } from '../../motion-dom/dist/es/frameloop/sync-time.mjs';

package/dist/es/motion-dom/dist/es/animation/JSAnimation.mjs

@@ -1,7 +1,7 @@
 import { time } from '../frameloop/sync-time.mjs';
 import { activeAnimations } from '../stats/animation-count.mjs';
 import { mix } from '../utils/mix/index.mjs';
-import { frameloopDriver } from './drivers/driver-frameloop.mjs';
+import { frameloopDriver } from './drivers/frame.mjs';
 import { inertia } from './generators/inertia.mjs';
 import { keyframes } from './generators/keyframes.mjs';
 import { calcGeneratorDuration } from './generators/utils/calc-duration.mjs';
@@ -247,6 +247,7 @@ class JSAnimation extends WithPromise {
         else if (this.driver) {
             this.startTime = this.driver.now() - newTime / this.playbackSpeed;
         }
+        this.driver?.start(false);
     }
     get speed() {
         return this.playbackSpeed;
@@ -336,6 +337,7 @@ class JSAnimation extends WithPromise {
             this.options.ease = "linear";
             this.initAnimation();
         }
+        this.driver?.stop();
         return timeline.observe(this);
     }
 }

package/dist/es/motion-dom/dist/es/animation/drivers/{driver-frameloop.mjs → frame.mjs}

@@ -4,7 +4,7 @@ import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);
     return {
-        start: () => frame.update(passTimestamp, true),
+        start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),
         stop: () => cancelFrame(passTimestamp),
         /**
          * If we're processing this frame we can use the