framer-motion 12.11.3 → 12.12.0

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" />
+  <img width="100" height="100" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
 </p>
 <h1 align="center">Motion for React</h1>
 

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-9d9azvs6.js');
+var create = require('./create-BiMCrvDh.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-9d9azvs6.js → create-BiMCrvDh.js}

@@ -156,8 +156,6 @@ function calcRelativePosition(target, layout, parent) {
     calcRelativeAxisPosition(target.y, layout.y, parent.y);
 }
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 const isNotNull = (value) => value !== null;
 function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
     const resolvedKeyframes = keyframes.filter(isNotNull);
@@ -307,7 +305,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
 };
 
 function animateSingleValue(value, keyframes, options) {
-    const motionValue = isMotionValue(value) ? value : motionDom.motionValue(value);
+    const motionValue = motionDom.isMotionValue(value) ? value : motionDom.motionValue(value);
     motionValue.start(animateMotionValue("", motionValue, keyframes, options));
     return motionValue.animation;
 }
@@ -372,7 +370,7 @@ function delay(callback, timeout) {
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    return isMotionValue(value) ? value.get() : value;
+    return motionDom.isMotionValue(value) ? value.get() : value;
 }
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
@@ -2713,14 +2711,14 @@ function updateMotionValuesFromProps(element, next, prev) {
     for (const key in next) {
         const nextValue = next[key];
         const prevValue = prev[key];
-        if (isMotionValue(nextValue)) {
+        if (motionDom.isMotionValue(nextValue)) {
             /**
              * If this is a motion value found in props or style, we want to add it
              * to our visual element's motion value map.
              */
             element.addValue(key, nextValue);
         }
-        else if (isMotionValue(prevValue)) {
+        else if (motionDom.isMotionValue(prevValue)) {
             /**
              * If we're swapping from a motion value to a static value,
              * create a new motion value from that
@@ -2916,7 +2914,7 @@ class VisualElement {
         const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
         for (const key in initialMotionValues) {
             const value = initialMotionValues[key];
-            if (latestValues[key] !== undefined && isMotionValue(value)) {
+            if (latestValues[key] !== undefined && motionDom.isMotionValue(value)) {
                 value.set(latestValues[key], false);
             }
         }
@@ -3187,9 +3185,9 @@ class VisualElement {
             else if (!motionDom.findValueType(value) && motionDom.complex.test(target)) {
                 value = motionDom.getAnimatableNone(key, target);
             }
-            this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
+            this.setBaseTarget(key, motionDom.isMotionValue(value) ? value.get() : value);
         }
-        return isMotionValue(value) ? value.get() : value;
+        return motionDom.isMotionValue(value) ? value.get() : value;
     }
     /**
      * Set the base target to later animate back to. This is currently
@@ -3222,7 +3220,7 @@ class VisualElement {
          * so we can read the value from an alternative source, try that.
          */
         const target = this.getBaseTargetFromProps(this.props, key);
-        if (target !== undefined && !isMotionValue(target))
+        if (target !== undefined && !motionDom.isMotionValue(target))
             return target;
         /**
          * If the value was initially defined on initial, but it doesn't any more,
@@ -3274,7 +3272,7 @@ class DOMVisualElement extends VisualElement {
             delete this.childSubscription;
         }
         const { children } = this.props;
-        if (isMotionValue(children)) {
+        if (motionDom.isMotionValue(children)) {
             this.childSubscription = children.on("change", (latest) => {
                 if (this.current) {
                     this.current.textContent = `${latest}`;
@@ -3418,9 +3416,9 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
     const { style } = props;
     const newValues = {};
     for (const key in style) {
-        if (isMotionValue(style[key]) ||
+        if (motionDom.isMotionValue(style[key]) ||
             (prevProps.style &&
-                isMotionValue(prevProps.style[key])) ||
+                motionDom.isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props) ||
             visualElement?.getValue(key)?.liveStyle !== undefined) {
             newValues[key] = style[key];
@@ -3440,7 +3438,9 @@ class HTMLVisualElement extends DOMVisualElement {
     }
     readValueFromInstance(instance, key) {
         if (motionDom.transformProps.has(key)) {
-            return motionDom.readTransformValue(instance, key);
+            return this.projection?.isProjecting
+                ? motionDom.defaultTransformValue(key)
+                : motionDom.readTransformValue(instance, key);
         }
         else {
             const computedStyle = getComputedStyle(instance);
@@ -3620,7 +3620,7 @@ function setTarget(visualElement, definition) {
 }
 
 function isWillChangeMotionValue(value) {
-    return Boolean(isMotionValue(value) && value.add);
+    return Boolean(motionDom.isMotionValue(value) && value.add);
 }
 
 function addValueToWillChange(visualElement, key) {
@@ -5713,7 +5713,7 @@ const createHtmlRenderState = () => ({
 
 function copyRawValuesOnly(target, source, props) {
     for (const key in source) {
-        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+        if (!motionDom.isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
             target[key] = source[key];
         }
     }
@@ -5761,65 +5761,6 @@ function useHTMLProps(props, visualState) {
     return htmlProps;
 }
 
-/**
- * We keep these listed separately as we use the lowercase tag names as part
- * of the runtime bundle to detect SVG components
- */
-const lowercaseSVGElements = [
-    "animate",
-    "circle",
-    "defs",
-    "desc",
-    "ellipse",
-    "g",
-    "image",
-    "line",
-    "filter",
-    "marker",
-    "mask",
-    "metadata",
-    "path",
-    "pattern",
-    "polygon",
-    "polyline",
-    "rect",
-    "stop",
-    "switch",
-    "symbol",
-    "svg",
-    "text",
-    "tspan",
-    "use",
-    "view",
-];
-
-function isSVGComponent(Component) {
-    if (
-    /**
-     * If it's not a string, it's a custom React component. Currently we only support
-     * HTML custom React components.
-     */
-    typeof Component !== "string" ||
-        /**
-         * If it contains a dash, the element is a custom HTML webcomponent.
-         */
-        Component.includes("-")) {
-        return false;
-    }
-    else if (
-    /**
-     * If it's in our list of lowercase SVG tags, it's an SVG component
-     */
-    lowercaseSVGElements.indexOf(Component) > -1 ||
-        /**
-         * If it contains a capital letter, it's an SVG component
-         */
-        /[A-Z]/u.test(Component)) {
-        return true;
-    }
-    return false;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -5926,6 +5867,65 @@ function useSVGProps(props, visualState, _isStatic, Component) {
     return visualProps;
 }
 
+/**
+ * We keep these listed separately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */
+const lowercaseSVGElements = [
+    "animate",
+    "circle",
+    "defs",
+    "desc",
+    "ellipse",
+    "g",
+    "image",
+    "line",
+    "filter",
+    "marker",
+    "mask",
+    "metadata",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "rect",
+    "stop",
+    "switch",
+    "symbol",
+    "svg",
+    "text",
+    "tspan",
+    "use",
+    "view",
+];
+
+function isSVGComponent(Component) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component !== "string" ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component.includes("-")) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/u.test(Component)) {
+        return true;
+    }
+    return false;
+}
+
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, ref, { latestValues }, isStatic) => {
         const useVisualProps = isSVGComponent(Component)
@@ -5942,7 +5942,7 @@ function createUseRender(forwardMotionProps = false) {
          * will be handled by the onChange handler
          */
         const { children } = props;
-        const renderedChildren = React.useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
+        const renderedChildren = React.useMemo(() => (motionDom.isMotionValue(children) ? children.get() : children), [children]);
         return React.createElement(Component, {
             ...elementProps,
             children: renderedChildren,
@@ -6030,8 +6030,8 @@ const htmlMotionConfig = {
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
-        if (isMotionValue(props[key]) ||
-            isMotionValue(prevProps[key])) {
+        if (motionDom.isMotionValue(props[key]) ||
+            motionDom.isMotionValue(prevProps[key])) {
             const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
                 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
                 : key;
@@ -6183,7 +6183,6 @@ exports.getOptimisedAppearId = getOptimisedAppearId;
 exports.hasReducedMotionListener = hasReducedMotionListener;
 exports.initPrefersReducedMotion = initPrefersReducedMotion;
 exports.isBrowser = isBrowser;
-exports.isMotionValue = isMotionValue;
 exports.isSVGElement = isSVGElement;
 exports.isValidMotionProp = isValidMotionProp;
 exports.layout = layout;

package/dist/cjs/dom-mini.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -229,7 +227,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             maxDuration = Math.max(calculatedDelay + duration, maxDuration);
             totalDuration = Math.max(targetTime, totalDuration);
         };
-        if (isMotionValue(subject)) {
+        if (motionDom.isMotionValue(subject)) {
             const subjectSequence = getSubjectSequence(subject, sequences);
             resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
         }

package/dist/cjs/dom.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -229,7 +227,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             maxDuration = Math.max(calculatedDelay + duration, maxDuration);
             totalDuration = Math.max(targetTime, totalDuration);
         };
-        if (isMotionValue(subject)) {
+        if (motionDom.isMotionValue(subject)) {
             const subjectSequence = getSubjectSequence(subject, sequences);
             resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
         }
@@ -412,7 +410,7 @@ function setTarget(visualElement, definition) {
 }
 
 function isWillChangeMotionValue(value) {
-    return Boolean(isMotionValue(value) && value.add);
+    return Boolean(motionDom.isMotionValue(value) && value.add);
 }
 
 function addValueToWillChange(visualElement, key) {
@@ -794,14 +792,14 @@ function updateMotionValuesFromProps(element, next, prev) {
     for (const key in next) {
         const nextValue = next[key];
         const prevValue = prev[key];
-        if (isMotionValue(nextValue)) {
+        if (motionDom.isMotionValue(nextValue)) {
             /**
              * If this is a motion value found in props or style, we want to add it
              * to our visual element's motion value map.
              */
             element.addValue(key, nextValue);
         }
-        else if (isMotionValue(prevValue)) {
+        else if (motionDom.isMotionValue(prevValue)) {
             /**
              * If we're swapping from a motion value to a static value,
              * create a new motion value from that
@@ -962,7 +960,7 @@ class VisualElement {
         const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
         for (const key in initialMotionValues) {
             const value = initialMotionValues[key];
-            if (latestValues[key] !== undefined && isMotionValue(value)) {
+            if (latestValues[key] !== undefined && motionDom.isMotionValue(value)) {
                 value.set(latestValues[key], false);
             }
         }
@@ -1233,9 +1231,9 @@ class VisualElement {
             else if (!motionDom.findValueType(value) && motionDom.complex.test(target)) {
                 value = motionDom.getAnimatableNone(key, target);
             }
-            this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
+            this.setBaseTarget(key, motionDom.isMotionValue(value) ? value.get() : value);
         }
-        return isMotionValue(value) ? value.get() : value;
+        return motionDom.isMotionValue(value) ? value.get() : value;
     }
     /**
      * Set the base target to later animate back to. This is currently
@@ -1268,7 +1266,7 @@ class VisualElement {
          * so we can read the value from an alternative source, try that.
          */
         const target = this.getBaseTargetFromProps(this.props, key);
-        if (target !== undefined && !isMotionValue(target))
+        if (target !== undefined && !motionDom.isMotionValue(target))
             return target;
         /**
          * If the value was initially defined on initial, but it doesn't any more,
@@ -1320,7 +1318,7 @@ class DOMVisualElement extends VisualElement {
             delete this.childSubscription;
         }
         const { children } = this.props;
-        if (isMotionValue(children)) {
+        if (motionDom.isMotionValue(children)) {
             this.childSubscription = children.on("change", (latest) => {
                 if (this.current) {
                     this.current.textContent = `${latest}`;
@@ -1466,9 +1464,9 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
     const { style } = props;
     const newValues = {};
     for (const key in style) {
-        if (isMotionValue(style[key]) ||
+        if (motionDom.isMotionValue(style[key]) ||
             (prevProps.style &&
-                isMotionValue(prevProps.style[key])) ||
+                motionDom.isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props) ||
             visualElement?.getValue(key)?.liveStyle !== undefined) {
             newValues[key] = style[key];
@@ -1488,7 +1486,9 @@ class HTMLVisualElement extends DOMVisualElement {
     }
     readValueFromInstance(instance, key) {
         if (motionDom.transformProps.has(key)) {
-            return motionDom.readTransformValue(instance, key);
+            return this.projection?.isProjecting
+                ? motionDom.defaultTransformValue(key)
+                : motionDom.readTransformValue(instance, key);
         }
         else {
             const computedStyle = getComputedStyle$1(instance);
@@ -1669,8 +1669,8 @@ function renderSVG(element, renderState, _styleProp, projection) {
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
-        if (isMotionValue(props[key]) ||
-            isMotionValue(prevProps[key])) {
+        if (motionDom.isMotionValue(props[key]) ||
+            motionDom.isMotionValue(prevProps[key])) {
             const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
                 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
                 : key;
@@ -1751,13 +1751,13 @@ function createObjectVisualElement(subject) {
 }
 
 function animateSingleValue(value, keyframes, options) {
-    const motionValue = isMotionValue(value) ? value : motionDom.motionValue(value);
+    const motionValue = motionDom.isMotionValue(value) ? value : motionDom.motionValue(value);
     motionValue.start(animateMotionValue("", motionValue, keyframes, options));
     return motionValue.animation;
 }
 
 function isSingleValue(subject, keyframes) {
-    return (isMotionValue(subject) ||
+    return (motionDom.isMotionValue(subject) ||
         typeof subject === "number" ||
         (typeof subject === "string" && !isDOMKeyframes(keyframes)));
 }

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-9d9azvs6.js');
+var create = require('./create-BiMCrvDh.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -709,7 +709,7 @@ function useListTransform(values, transformer) {
 }
 
 function useDefaultMotionValue(value, defaultValue = 0) {
-    return create.isMotionValue(value) ? value : useMotionValue(defaultValue);
+    return motionDom.isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
 function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
     const Component = create.useConstant(() => motion[as]);
@@ -958,7 +958,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             maxDuration = Math.max(calculatedDelay + duration, maxDuration);
             totalDuration = Math.max(targetTime, totalDuration);
         };
-        if (create.isMotionValue(subject)) {
+        if (motionDom.isMotionValue(subject)) {
             const subjectSequence = getSubjectSequence(subject, sequences);
             resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
         }
@@ -1143,7 +1143,7 @@ function createObjectVisualElement(subject) {
 }
 
 function isSingleValue(subject, keyframes) {
-    return (create.isMotionValue(subject) ||
+    return (motionDom.isMotionValue(subject) ||
         typeof subject === "number" ||
         (typeof subject === "string" && !isDOMKeyframes(keyframes)));
 }
@@ -2048,64 +2048,27 @@ function useMotionTemplate(fragments, ...values) {
             output += fragments[i];
             const value = values[i];
             if (value) {
-                output += create.isMotionValue(value) ? value.get() : value;
+                output += motionDom.isMotionValue(value) ? value.get() : value;
             }
         }
         return output;
     }
-    return useCombineMotionValues(values.filter(create.isMotionValue), buildValue);
+    return useCombineMotionValues(values.filter(motionDom.isMotionValue), buildValue);
 }
 
-function useSpring(source, config = {}) {
+function useSpring(source, options = {}) {
     const { isStatic } = React.useContext(create.MotionConfigContext);
-    const activeSpringAnimation = React.useRef(null);
-    const initialValue = create.useConstant(() => create.isMotionValue(source) ? source.get() : source);
-    const unit = create.useConstant(() => typeof initialValue === "string"
-        ? initialValue.replace(/[\d.-]/g, "")
-        : undefined);
-    const value = useMotionValue(initialValue);
-    const latestValue = React.useRef(initialValue);
-    const latestSetter = React.useRef(motionUtils.noop);
-    const startAnimation = () => {
-        stopAnimation();
-        activeSpringAnimation.current = new motionDom.JSAnimation({
-            keyframes: [asNumber(value.get()), asNumber(latestValue.current)],
-            velocity: value.getVelocity(),
-            type: "spring",
-            restDelta: 0.001,
-            restSpeed: 0.01,
-            ...config,
-            onUpdate: latestSetter.current,
-        });
-    };
-    const stopAnimation = () => {
-        if (activeSpringAnimation.current) {
-            activeSpringAnimation.current.stop();
-        }
-    };
+    const getFromSource = () => (motionDom.isMotionValue(source) ? source.get() : source);
+    // isStatic will never change, allowing early hooks return
+    if (isStatic) {
+        return useTransform(getFromSource);
+    }
+    const value = useMotionValue(getFromSource());
     React.useInsertionEffect(() => {
-        return value.attach((v, set) => {
-            if (isStatic)
-                return set(v);
-            latestValue.current = v;
-            latestSetter.current = (latest) => set(parseValue(latest, unit));
-            motionDom.frame.postRender(startAnimation);
-            return value.get();
-        }, stopAnimation);
-    }, [JSON.stringify(config)]);
-    create.useIsomorphicLayoutEffect(() => {
-        if (create.isMotionValue(source)) {
-            return source.on("change", (v) => value.set(parseValue(v, unit)));
-        }
-    }, [value, unit]);
+        return motionDom.attachSpring(value, source, options);
+    }, [value, JSON.stringify(options)]);
     return value;
 }
-function parseValue(v, unit) {
-    return unit ? v + unit : v;
-}
-function asNumber(v) {
-    return typeof v === "number" ? v : parseFloat(v);
-}
 
 function useAnimationFrame(callback) {
     const initialTimestamp = React.useRef(0);
@@ -2962,7 +2925,6 @@ exports.distance = create.distance;
 exports.distance2D = create.distance2D;
 exports.filterProps = create.filterProps;
 exports.isBrowser = create.isBrowser;
-exports.isMotionValue = create.isMotionValue;
 exports.isValidMotionProp = create.isValidMotionProp;
 exports.makeUseVisualState = create.makeUseVisualState;
 exports.optimizedAppearDataAttribute = create.optimizedAppearDataAttribute;