motion 12.35.2 → 12.37.0

package/README.md

@@ -39,8 +39,7 @@ npm install motion-v
 
 Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
 
-<details>
-<summary>React ⬇</summary>
+### React
 
 ```jsx
 import { motion } from "motion/react"
@@ -52,10 +51,9 @@ function Component() {
 
 Get started with [Motion for React](https://motion.dev/docs/react).
 
-</details>
+**Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
 
-<details>
-<summary>JavaScript ⬇</summary>
+### JS
 
 ```javascript
 import { animate } from "motion"
@@ -65,10 +63,7 @@ animate("#box", { x: 100 })
 
 Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
-</details>
-
-<details>
-<summary>Vue ⬇</summary>
+### Vue
 
 ```html
 <script>
@@ -80,19 +75,21 @@ Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
 Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
-</details>
+## 🎓 Examples & tutorials
 
-## 🎓 Examples
+Browse 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
 
-Browse 100+ free and 180+ premium [Motion Examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
+Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
 
 ## ⚡️ Motion+
 
 A one-time payment, lifetime-updates membership:
 
--   **180+ premium examples**
+-   **330+ examples**
+-   **100+ tutorials**
 -   **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
--   **Visual editing** for VS Code (alpha)
+-   **Transition editor** for Cursor and VS Code
+-   **AI skills**
 -   **Private Discord**
 -   **Early access content**
 
@@ -132,7 +129,7 @@ Motion drives the animations on the Cursor homepage, and is working with Cursor
 
 ### Gold
 
-<a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a> <a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
+<a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
 
 ### Silver
 

package/dist/motion.dev.js

@@ -245,7 +245,11 @@
     const backIn = /*@__PURE__*/ reverseEasing(backOut);
     const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
 
-    const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+    const anticipate = (p) => p >= 1
+        ? 1
+        : (p *= 2) < 1
+            ? 0.5 * backIn(p)
+            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const circIn = (p) => 1 - Math.sin(Math.acos(p));
     const circOut = reverseEasing(circIn);
@@ -364,8 +368,7 @@
                 const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
-                if (!queue.has(callback))
-                    queue.add(callback);
+                queue.add(callback);
                 return callback;
             },
             /**
@@ -390,7 +393,10 @@
                     return;
                 }
                 isProcessing = true;
-                [thisFrame, nextFrame] = [nextFrame, thisFrame];
+                // Swap this frame and the next to avoid GC
+                const prevFrame = thisFrame;
+                thisFrame = nextFrame;
+                nextFrame = prevFrame;
                 // Execute this frame
                 thisFrame.forEach(triggerCallback);
                 /**
@@ -429,11 +435,12 @@
         }, {});
         const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
         const processBatch = () => {
-            const timestamp = MotionGlobalConfig.useManualTiming
+            const useManualTiming = MotionGlobalConfig.useManualTiming;
+            const timestamp = useManualTiming
                 ? state.timestamp
                 : performance.now();
             runNextFrame = false;
-            if (!MotionGlobalConfig.useManualTiming) {
+            if (!useManualTiming) {
                 state.delta = useDefaultElapsed
                     ? 1000 / 60
                     : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
@@ -1625,9 +1632,9 @@
         };
     }
 
-    const isNotNull$1 = (value) => value !== null;
-    function getFinalKeyframe$1(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
-        const resolvedKeyframes = keyframes.filter(isNotNull$1);
+    const isNotNull = (value) => value !== null;
+    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
+        const resolvedKeyframes = keyframes.filter(isNotNull);
         const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
         const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
         return !index || finalKeyframe === undefined
@@ -1692,6 +1699,14 @@
              * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
              */
             this.playbackSpeed = 1;
+            /**
+             * Reusable state object for the delay phase to avoid
+             * allocating a new object every frame.
+             */
+            this.delayState = {
+                done: false,
+                value: undefined,
+            };
             /**
              * This method is bound to the instance to fix a pattern where
              * animation.stop is returned as a reference from a useEffect.
@@ -1853,9 +1868,14 @@
              * This prevents delay: x, duration: 0 animations from finishing
              * instantly.
              */
-            const state = isInDelayPhase
-                ? { done: false, value: keyframes[0] }
-                : frameGenerator.next(elapsed);
+            let state;
+            if (isInDelayPhase) {
+                this.delayState.value = keyframes[0];
+                state = this.delayState;
+            }
+            else {
+                state = frameGenerator.next(elapsed);
+            }
             if (mixKeyframes && !isInDelayPhase) {
                 state.value = mixKeyframes(state.value);
             }
@@ -1870,7 +1890,7 @@
                 (this.state === "finished" || (this.state === "running" && done));
             // TODO: The exception for inertia could be cleaner here
             if (isAnimationFinished && type !== inertia) {
-                state.value = getFinalKeyframe$1(keyframes, this.options, finalKeyframe, this.speed);
+                state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
             }
             if (onUpdate) {
                 onUpdate(state.value);
@@ -2165,8 +2185,18 @@
     }
     const positionalValues = {
         // Dimensions
-        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+        width: ({ x }, { paddingLeft = "0", paddingRight = "0", boxSizing }) => {
+            const width = x.max - x.min;
+            return boxSizing === "border-box"
+                ? width
+                : width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        },
+        height: ({ y }, { paddingTop = "0", paddingBottom = "0", boxSizing }) => {
+            const height = y.max - y.min;
+            return boxSizing === "border-box"
+                ? height
+                : height - parseFloat(paddingTop) - parseFloat(paddingBottom);
+        },
         top: (_bbox, { top }) => parseFloat(top),
         left: (_bbox, { left }) => parseFloat(left),
         bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
@@ -2468,7 +2498,7 @@
             this.animation.onfinish = () => {
                 this.finishedTime = this.time;
                 if (!pseudoElement) {
-                    const keyframe = getFinalKeyframe$1(keyframes, this.options, finalKeyframe, this.speed);
+                    const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
                     if (this.updateMotionValue) {
                         this.updateMotionValue(keyframe);
                     }
@@ -2774,17 +2804,42 @@
     /**
      * A list of values that can be hardware-accelerated.
      */
-    const acceleratedValues$1 = new Set([
+    const acceleratedValues = new Set([
         "opacity",
         "clipPath",
         "filter",
         "transform",
-        // TODO: Could be re-enabled now we have support for linear() easing
+        // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
+        // or until we implement support for linear() easing.
         // "background-color"
     ]);
+
+    const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
+    function hasBrowserOnlyColors(keyframes) {
+        for (let i = 0; i < keyframes.length; i++) {
+            if (typeof keyframes[i] === "string" &&
+                browserColorFunctions.test(keyframes[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const colorProperties = new Set([
+        "color",
+        "backgroundColor",
+        "outlineColor",
+        "fill",
+        "stroke",
+        "borderColor",
+        "borderTopColor",
+        "borderRightColor",
+        "borderBottomColor",
+        "borderLeftColor",
+    ]);
     const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
     function supportsBrowserAnimation(options) {
-        const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+        const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
         const subject = motionValue?.owner?.current;
         /**
          * We use this check instead of isHTMLElement() because we explicitly
@@ -2798,7 +2853,13 @@
         const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
-            acceleratedValues$1.has(name) &&
+            /**
+             * Force WAAPI for color properties with browser-only color formats
+             * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
+             */
+            (acceleratedValues.has(name) ||
+                (colorProperties.has(name) &&
+                    hasBrowserOnlyColors(keyframes))) &&
             (name !== "transform" || !transformTemplate) &&
             /**
              * If we're outputting values to onUpdate then we can't use WAAPI as there's
@@ -2858,9 +2919,11 @@
              * If we can't animate this value with the resolved keyframes
              * then we should complete it immediately.
              */
+            let canAnimateValue = true;
             if (!canAnimate(keyframes, name, type, velocity)) {
+                canAnimateValue = false;
                 if (MotionGlobalConfig.instantAnimations || !delay) {
-                    onUpdate?.(getFinalKeyframe$1(keyframes, options, finalKeyframe));
+                    onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
                 }
                 keyframes[0] = keyframes[keyframes.length - 1];
                 makeAnimationInstant(options);
@@ -2895,15 +2958,29 @@
              * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
              * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
              * optimised animation.
+             *
+             * Also skip WAAPI when keyframes aren't animatable, as the resolved
+             * values may not be valid CSS and would trigger browser warnings.
              */
-            const useWaapi = !isHandoff && supportsBrowserAnimation(resolvedOptions);
+            const useWaapi = canAnimateValue &&
+                !isHandoff &&
+                supportsBrowserAnimation(resolvedOptions);
             const element = resolvedOptions.motionValue?.owner?.current;
-            const animation = useWaapi
-                ? new NativeAnimationExtended({
-                    ...resolvedOptions,
-                    element,
-                })
-                : new JSAnimation(resolvedOptions);
+            let animation;
+            if (useWaapi) {
+                try {
+                    animation = new NativeAnimationExtended({
+                        ...resolvedOptions,
+                        element,
+                    });
+                }
+                catch {
+                    animation = new JSAnimation(resolvedOptions);
+                }
+            }
+            else {
+                animation = new JSAnimation(resolvedOptions);
+            }
             animation.finished.then(() => {
                 this.notifyFinished();
             }).catch(noop$1);
@@ -3081,8 +3158,11 @@
     const animationMaps = new WeakMap();
     const animationMapKey = (name, pseudoElement = "") => `${name}:${pseudoElement}`;
     function getAnimationMap(element) {
-        const map = animationMaps.get(element) || new Map();
-        animationMaps.set(element, map);
+        let map = animationMaps.get(element);
+        if (!map) {
+            map = new Map();
+            animationMaps.set(element, map);
+        }
         return map;
     }
 
@@ -3174,17 +3254,6 @@
         return ease;
     };
 
-    const isNotNull = (value) => value !== null;
-    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-        const resolvedKeyframes = keyframes.filter(isNotNull);
-        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-            ? 0
-            : resolvedKeyframes.length - 1;
-        return !index || finalKeyframe === undefined
-            ? resolvedKeyframes[index]
-            : finalKeyframe;
-    }
-
     /**
      * If `transition` has `inherit: true`, shallow-merge it with
      * `parentTransition` (child keys win) and strip the `inherit` key.
@@ -3208,13 +3277,29 @@
         return valueTransition;
     }
 
+    const orchestrationKeys = new Set([
+        "when",
+        "delay",
+        "delayChildren",
+        "staggerChildren",
+        "staggerDirection",
+        "repeat",
+        "repeatType",
+        "repeatDelay",
+        "from",
+        "elapsed",
+    ]);
     /**
      * Decide whether a transition is defined on a given Transition.
      * This filters out orchestration options and returns true
      * if any options are left.
      */
-    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-        return !!Object.keys(transition).length;
+    function isTransitionDefined(transition) {
+        for (const key in transition) {
+            if (!orchestrationKeys.has(key))
+                return true;
+        }
+        return false;
     }
 
     const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
@@ -4346,19 +4431,6 @@
         return true;
     });
 
-    /**
-     * A list of values that can be hardware-accelerated.
-     */
-    const acceleratedValues = new Set([
-        "opacity",
-        "clipPath",
-        "filter",
-        "transform",
-        // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-        // or until we implement support for linear() easing.
-        // "background-color"
-    ]);
-
     function resolveElements(elementOrSelector, scope, selectorCache) {
         if (elementOrSelector == null) {
             return [];
@@ -4504,7 +4576,9 @@
      * that works across iframes
      */
     function isHTMLElement(element) {
-        return isObject(element) && "offsetHeight" in element;
+        return (isObject(element) &&
+            "offsetHeight" in element &&
+            !("ownerSVGElement" in element));
     }
 
     const translateAlias$1 = {
@@ -5242,6 +5316,7 @@
                 activeAnimation.stop();
                 activeAnimation = null;
             }
+            value.animation = undefined;
         };
         const startAnimation = () => {
             const currentValue = asNumber$1(value.get());
@@ -5273,8 +5348,10 @@
         // multiple calls within the same frame (e.g. rapid mouse events)
         const scheduleAnimation = () => {
             startAnimation();
+            value.animation = activeAnimation ?? undefined;
             value["events"].animationStart?.notify();
             activeAnimation?.then(() => {
+                value.animation = undefined;
                 value["events"].animationComplete?.notify();
             });
         };
@@ -5284,7 +5361,16 @@
             frame.postRender(scheduleAnimation);
         }, stopAnimation);
         if (isMotionValue(source)) {
-            const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
+            let skipNextAnimation = options.skipInitialAnimation === true;
+            const removeSourceOnChange = source.on("change", (v) => {
+                if (skipNextAnimation) {
+                    skipNextAnimation = false;
+                    value.jump(parseValue(v, unit), false);
+                }
+                else {
+                    value.set(parseValue(v, unit));
+                }
+            });
             const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
             return () => {
                 removeSourceOnChange();
@@ -6564,10 +6650,8 @@
                 node.options.layoutScroll &&
                 node.scroll &&
                 node !== node.root) {
-                transformBox(box, {
-                    x: -node.scroll.offset.x,
-                    y: -node.scroll.offset.y,
-                });
+                translateAxis(box.x, -node.scroll.offset.x);
+                translateAxis(box.y, -node.scroll.offset.y);
             }
             if (delta) {
                 // Incoporate each ancestor's scale into a cumulative treeScale for this component
@@ -6594,8 +6678,8 @@
         }
     }
     function translateAxis(axis, distance) {
-        axis.min = axis.min + distance;
-        axis.max = axis.max + distance;
+        axis.min += distance;
+        axis.max += distance;
     }
     /**
      * Apply a transform to an axis from the latest resolved motion values.
@@ -7762,8 +7846,13 @@
         return transform || "none";
     }
 
-    const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
-    const numBorders = borders.length;
+    const borderLabels = [
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomLeftRadius",
+        "borderBottomRightRadius",
+    ];
+    const numBorders = borderLabels.length;
     const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
@@ -7778,7 +7867,7 @@
          * Mix border radius
          */
         for (let i = 0; i < numBorders; i++) {
-            const borderLabel = `border${borders[i]}Radius`;
+            const borderLabel = borderLabels[i];
             let followRadius = getRadius(follow, borderLabel);
             let leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)
@@ -8423,6 +8512,11 @@
                 }
                 else {
                     this.isUpdating = false;
+                    /**
+                     * Ensure animation-blocked nodes (e.g. during drag)
+                     * get measured even when memoized (willUpdate skipped).
+                     */
+                    this.nodes.forEach(ensureDraggedNodesSnapshotted);
                     /**
                      * Write
                      */
@@ -8521,7 +8615,8 @@
                 const prevLayout = this.layout;
                 this.layout = this.measure(false);
                 this.layoutVersion++;
-                this.layoutCorrected = createBox();
+                if (!this.layoutCorrected)
+                    this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
                 this.notifyListeners("measure", this.layout.layoutBox);
@@ -8632,8 +8727,8 @@
                 }
                 return boxWithoutScroll;
             }
-            applyTransform(box, transformOnly = false) {
-                const withTransforms = createBox();
+            applyTransform(box, transformOnly = false, output) {
+                const withTransforms = output || createBox();
                 copyBoxInto(withTransforms, box);
                 for (let i = 0; i < this.path.length; i++) {
                     const node = this.path[i];
@@ -8641,10 +8736,8 @@
                         node.options.layoutScroll &&
                         node.scroll &&
                         node !== node.root) {
-                        transformBox(withTransforms, {
-                            x: -node.scroll.offset.x,
-                            y: -node.scroll.offset.y,
-                        });
+                        translateAxis(withTransforms.x, -node.scroll.offset.x);
+                        translateAxis(withTransforms.y, -node.scroll.offset.y);
                     }
                     if (!hasTransform(node.latestValues))
                         continue;
@@ -8787,8 +8880,7 @@
                 }
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
-                        // TODO: This is creating a new object every frame
-                        this.target = this.applyTransform(this.layout.layoutBox);
+                        this.applyTransform(this.layout.layoutBox, false, this.target);
                     }
                     else {
                         copyBoxInto(this.target, this.layout.layoutBox);
@@ -9398,6 +9490,12 @@
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
+            else if (animationType === "x" || animationType === "y") {
+                const snapAxis = animationType === "x" ? "y" : "x";
+                copyAxisInto(isShared
+                    ? snapshot.measuredBox[snapAxis]
+                    : snapshot.layoutBox[snapAxis], layout[snapAxis]);
+            }
             else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = isShared
@@ -9513,6 +9611,18 @@
     function clearIsLayoutDirty(node) {
         node.isLayoutDirty = false;
     }
+    /**
+     * When a node is animation-blocked (e.g. during drag) and its component
+     * didn't re-render (memoized), willUpdate() is never called so there's
+     * no snapshot. Use the previous layout as a snapshot and mark dirty so
+     * resetTransform/updateLayout/notifyLayoutUpdate process it normally.
+     */
+    function ensureDraggedNodesSnapshotted(node) {
+        if (node.isAnimationBlocked && node.layout && !node.isLayoutDirty) {
+            node.snapshot = node.layout;
+            node.isLayoutDirty = true;
+        }
+    }
     function resetTransformStyle(node) {
         const { visualElement } = node.options;
         if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
@@ -10951,16 +11061,48 @@
         [ScrollOffset.Any, "cover"],
         [ScrollOffset.All, "contain"],
     ];
-    function matchesPreset(offset, preset) {
+    const stringToProgress = {
+        start: 0,
+        end: 1,
+    };
+    function parseStringOffset(s) {
+        const parts = s.trim().split(/\s+/);
+        if (parts.length !== 2)
+            return undefined;
+        const a = stringToProgress[parts[0]];
+        const b = stringToProgress[parts[1]];
+        if (a === undefined || b === undefined)
+            return undefined;
+        return [a, b];
+    }
+    function normaliseOffset(offset) {
         if (offset.length !== 2)
+            return undefined;
+        const result = [];
+        for (const item of offset) {
+            if (Array.isArray(item)) {
+                result.push(item);
+            }
+            else if (typeof item === "string") {
+                const parsed = parseStringOffset(item);
+                if (!parsed)
+                    return undefined;
+                result.push(parsed);
+            }
+            else {
+                return undefined;
+            }
+        }
+        return result;
+    }
+    function matchesPreset(offset, preset) {
+        const normalised = normaliseOffset(offset);
+        if (!normalised)
             return false;
         for (let i = 0; i < 2; i++) {
-            const o = offset[i];
+            const o = normalised[i];
             const p = preset[i];
-            if (!Array.isArray(o) ||
-                o.length !== 2 ||
-                o[0] !== p[0] ||
-                o[1] !== p[1])
+            if (o[0] !== p[0] || o[1] !== p[1])
                 return false;
         }
         return true;