motion 12.11.4 → 12.12.0

package/dist/es/framer-motion/dist/es/render/dom/use-render.mjs

@@ -1,9 +1,9 @@
 import { Fragment, useMemo, createElement } from 'react';
 import { useHTMLProps } from '../html/use-props.mjs';
+import { useSVGProps } from '../svg/use-props.mjs';
 import { filterProps } from './utils/filter-props.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
-import { useSVGProps } from '../svg/use-props.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, ref, { latestValues }, isStatic) => {

package/dist/es/framer-motion/dist/es/render/html/use-props.mjs

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { buildHTMLStyles } from './utils/build-styles.mjs';
 import { createHtmlRenderState } from './utils/create-render-state.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function copyRawValuesOnly(target, source, props) {
     for (const key in source) {

package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs

@@ -1,5 +1,5 @@
 import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';
-import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
+import { isMotionValue } from '../../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const { style } = props;

package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs

@@ -1,5 +1,5 @@
-import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
 import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';
+import { isMotionValue } from '../../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { transformPropOrder } from '../../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {

package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -1,4 +1,4 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
 
 function updateMotionValuesFromProps(element, next, prev) {

package/dist/es/framer-motion/dist/es/value/use-motion-template.mjs

@@ -1,5 +1,5 @@
 import { useCombineMotionValues } from './use-combine-values.mjs';
-import { isMotionValue } from './utils/is-motion-value.mjs';
+import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 /**
  * Combine multiple motion values into a new one using a string template literal.

package/dist/es/framer-motion/dist/es/value/use-spring.mjs

@@ -1,62 +1,22 @@
-import { useContext, useRef, useInsertionEffect } from 'react';
+import { useContext, useInsertionEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { useConstant } from '../utils/use-constant.mjs';
-import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
-import { isMotionValue } from './utils/is-motion-value.mjs';
-import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
-import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { JSAnimation } from '../../../../motion-dom/dist/es/animation/JSAnimation.mjs';
+import { useTransform } from './use-transform.mjs';
+import { attachSpring } from '../../../../motion-dom/dist/es/value/spring-value.mjs';
+import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
-function useSpring(source, config = {}) {
+function useSpring(source, options = {}) {
     const { isStatic } = useContext(MotionConfigContext);
-    const activeSpringAnimation = useRef(null);
-    const initialValue = useConstant(() => isMotionValue(source) ? source.get() : source);
-    const unit = useConstant(() => typeof initialValue === "string"
-        ? initialValue.replace(/[\d.-]/g, "")
-        : undefined);
-    const value = useMotionValue(initialValue);
-    const latestValue = useRef(initialValue);
-    const latestSetter = useRef(noop);
-    const startAnimation = () => {
-        stopAnimation();
-        activeSpringAnimation.current = new 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 = () => (isMotionValue(source) ? source.get() : source);
+    // isStatic will never change, allowing early hooks return
+    if (isStatic) {
+        return useTransform(getFromSource);
+    }
+    const value = useMotionValue(getFromSource());
     useInsertionEffect(() => {
-        return value.attach((v, set) => {
-            if (isStatic)
-                return set(v);
-            latestValue.current = v;
-            latestSetter.current = (latest) => set(parseValue(latest, unit));
-            frame.postRender(startAnimation);
-            return value.get();
-        }, stopAnimation);
-    }, [JSON.stringify(config)]);
-    useIsomorphicLayoutEffect(() => {
-        if (isMotionValue(source)) {
-            return source.on("change", (v) => value.set(parseValue(v, unit)));
-        }
-    }, [value, unit]);
+        return 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);
-}
 
 export { useSpring };

package/dist/es/framer-motion/dist/es/value/use-will-change/is.mjs

@@ -1,4 +1,4 @@
-import { isMotionValue } from '../utils/is-motion-value.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);

package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs

@@ -1,4 +1,4 @@
-import { isMotionValue } from './is-motion-value.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself

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

@@ -72,6 +72,7 @@ export { supportsScrollTimeline } from '../../motion-dom/dist/es/utils/supports/
 export { transform } from '../../motion-dom/dist/es/utils/transform.mjs';
 export { MotionValue, collectMotionValues, motionValue } from '../../motion-dom/dist/es/value/index.mjs';
 export { mapValue } from '../../motion-dom/dist/es/value/map-value.mjs';
+export { attachSpring, springValue } from '../../motion-dom/dist/es/value/spring-value.mjs';
 export { transformValue } from '../../motion-dom/dist/es/value/transform-value.mjs';
 export { color } from '../../motion-dom/dist/es/value/types/color/index.mjs';
 export { hex } from '../../motion-dom/dist/es/value/types/color/hex.mjs';
@@ -89,6 +90,7 @@ export { testValueType } from '../../motion-dom/dist/es/value/types/test.mjs';
 export { getAnimatableNone } from '../../motion-dom/dist/es/value/types/utils/animatable-none.mjs';
 export { findValueType } from '../../motion-dom/dist/es/value/types/utils/find.mjs';
 export { getValueAsType } from '../../motion-dom/dist/es/value/types/utils/get-as-type.mjs';
+export { isMotionValue } from '../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 export { ViewTransitionBuilder, animateView } from '../../motion-dom/dist/es/view/index.mjs';
 export { cancelSync, sync } from '../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 export { cancelFrame, frame, frameData, frameSteps } from '../../motion-dom/dist/es/frameloop/frame.mjs';

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

@@ -16,7 +16,6 @@ export { isBrowser } from '../../framer-motion/dist/es/utils/is-browser.mjs';
 export { useForceUpdate } from '../../framer-motion/dist/es/utils/use-force-update.mjs';
 export { useIsomorphicLayoutEffect } from '../../framer-motion/dist/es/utils/use-isomorphic-effect.mjs';
 export { useUnmountEffect } from '../../framer-motion/dist/es/utils/use-unmount-effect.mjs';
-export { isMotionValue } from '../../framer-motion/dist/es/value/utils/is-motion-value.mjs';
 export { domAnimation } from '../../framer-motion/dist/es/render/dom/features-animation.mjs';
 export { domMax } from '../../framer-motion/dist/es/render/dom/features-max.mjs';
 export { domMin } from '../../framer-motion/dist/es/render/dom/features-min.mjs';
@@ -171,6 +170,7 @@ export { supportsScrollTimeline } from '../../motion-dom/dist/es/utils/supports/
 export { transform } from '../../motion-dom/dist/es/utils/transform.mjs';
 export { MotionValue, collectMotionValues, motionValue } from '../../motion-dom/dist/es/value/index.mjs';
 export { mapValue } from '../../motion-dom/dist/es/value/map-value.mjs';
+export { attachSpring, springValue } from '../../motion-dom/dist/es/value/spring-value.mjs';
 export { transformValue } from '../../motion-dom/dist/es/value/transform-value.mjs';
 export { color } from '../../motion-dom/dist/es/value/types/color/index.mjs';
 export { hex } from '../../motion-dom/dist/es/value/types/color/hex.mjs';
@@ -188,6 +188,7 @@ export { testValueType } from '../../motion-dom/dist/es/value/types/test.mjs';
 export { getAnimatableNone } from '../../motion-dom/dist/es/value/types/utils/animatable-none.mjs';
 export { findValueType } from '../../motion-dom/dist/es/value/types/utils/find.mjs';
 export { getValueAsType } from '../../motion-dom/dist/es/value/types/utils/get-as-type.mjs';
+export { isMotionValue } from '../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 export { ViewTransitionBuilder, animateView } from '../../motion-dom/dist/es/view/index.mjs';
 export { cancelSync, sync } from '../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 export { cancelFrame, frame, frameData, frameSteps } from '../../motion-dom/dist/es/frameloop/frame.mjs';

package/dist/es/motion-dom/dist/es/utils/interpolate.mjs

@@ -34,7 +34,7 @@ function createMixers(output, ease, customMixer) {
  * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
  * ```
  *
- * TODO Revist this approach once we've moved to data models for values,
+ * TODO Revisit this approach once we've moved to data models for values,
  * probably not needed to pregenerate mixer functions.
  *
  * @public

package/dist/es/motion-dom/dist/es/value/spring-value.mjs

@@ -0,0 +1,72 @@
+import { motionValue } from './index.mjs';
+import { JSAnimation } from '../animation/JSAnimation.mjs';
+import { isMotionValue } from './utils/is-motion-value.mjs';
+import { frame } from '../frameloop/frame.mjs';
+
+/**
+ * Create a `MotionValue` that animates to its latest value using a spring.
+ * Can either be a value or track another `MotionValue`.
+ *
+ * ```jsx
+ * const x = motionValue(0)
+ * const y = transformValue(() => x.get() * 2) // double x
+ * ```
+ *
+ * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function springValue(source, options) {
+    const initialValue = isMotionValue(source) ? source.get() : source;
+    const value = motionValue(initialValue);
+    attachSpring(value, source, options);
+    return value;
+}
+function attachSpring(value, source, options) {
+    const initialValue = value.get();
+    let activeAnimation = null;
+    let latestValue = initialValue;
+    let latestSetter;
+    const unit = typeof initialValue === "string"
+        ? initialValue.replace(/[\d.-]/g, "")
+        : undefined;
+    const stopAnimation = () => {
+        if (activeAnimation) {
+            activeAnimation.stop();
+            activeAnimation = null;
+        }
+    };
+    const startAnimation = () => {
+        stopAnimation();
+        activeAnimation = new JSAnimation({
+            keyframes: [asNumber(value.get()), asNumber(latestValue)],
+            velocity: value.getVelocity(),
+            type: "spring",
+            restDelta: 0.001,
+            restSpeed: 0.01,
+            ...options,
+            onUpdate: latestSetter,
+        });
+    };
+    value.attach((v, set) => {
+        latestValue = v;
+        latestSetter = (latest) => set(parseValue(latest, unit));
+        frame.postRender(startAnimation);
+        return value.get();
+    }, stopAnimation);
+    let unsubscribe = undefined;
+    if (isMotionValue(source)) {
+        unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
+        value.on("destroy", unsubscribe);
+    }
+    return unsubscribe;
+}
+function parseValue(v, unit) {
+    return unit ? v + unit : v;
+}
+function asNumber(v) {
+    return typeof v === "number" ? v : parseFloat(v);
+}
+
+export { attachSpring, springValue };

package/dist/motion.dev.js

@@ -1425,7 +1425,7 @@
      * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
      * ```
      *
-     * TODO Revist this approach once we've moved to data models for values,
+     * TODO Revisit this approach once we've moved to data models for values,
      * probably not needed to pregenerate mixer functions.
      *
      * @public
@@ -4269,6 +4269,74 @@
         return transformValue(() => map(inputValue.get()));
     }
 
+    const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+    /**
+     * Create a `MotionValue` that animates to its latest value using a spring.
+     * Can either be a value or track another `MotionValue`.
+     *
+     * ```jsx
+     * const x = motionValue(0)
+     * const y = transformValue(() => x.get() * 2) // double x
+     * ```
+     *
+     * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+     * @returns `MotionValue`
+     *
+     * @public
+     */
+    function springValue(source, options) {
+        const initialValue = isMotionValue(source) ? source.get() : source;
+        const value = motionValue(initialValue);
+        attachSpring(value, source, options);
+        return value;
+    }
+    function attachSpring(value, source, options) {
+        const initialValue = value.get();
+        let activeAnimation = null;
+        let latestValue = initialValue;
+        let latestSetter;
+        const unit = typeof initialValue === "string"
+            ? initialValue.replace(/[\d.-]/g, "")
+            : undefined;
+        const stopAnimation = () => {
+            if (activeAnimation) {
+                activeAnimation.stop();
+                activeAnimation = null;
+            }
+        };
+        const startAnimation = () => {
+            stopAnimation();
+            activeAnimation = new JSAnimation({
+                keyframes: [asNumber(value.get()), asNumber(latestValue)],
+                velocity: value.getVelocity(),
+                type: "spring",
+                restDelta: 0.001,
+                restSpeed: 0.01,
+                ...options,
+                onUpdate: latestSetter,
+            });
+        };
+        value.attach((v, set) => {
+            latestValue = v;
+            latestSetter = (latest) => set(parseValue(latest, unit));
+            frame.postRender(startAnimation);
+            return value.get();
+        }, stopAnimation);
+        let unsubscribe = undefined;
+        if (isMotionValue(source)) {
+            unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
+            value.on("destroy", unsubscribe);
+        }
+        return unsubscribe;
+    }
+    function parseValue(v, unit) {
+        return unit ? v + unit : v;
+    }
+    function asNumber(v) {
+        return typeof v === "number" ? v : parseFloat(v);
+    }
+
     /**
      * A list of all ValueTypes
      */
@@ -4605,8 +4673,6 @@
         return acc;
     }, {});
 
-    const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
     function isDOMKeyframes(keyframes) {
         return typeof keyframes === "object" && !Array.isArray(keyframes);
     }
@@ -7187,6 +7253,7 @@
     exports.animationMapKey = animationMapKey;
     exports.anticipate = anticipate;
     exports.applyPxDefaults = applyPxDefaults;
+    exports.attachSpring = attachSpring;
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
@@ -7254,6 +7321,7 @@
     exports.isDragging = isDragging;
     exports.isEasingArray = isEasingArray;
     exports.isGenerator = isGenerator;
+    exports.isMotionValue = isMotionValue;
     exports.isNodeOrChild = isNodeOrChild;
     exports.isNumericalString = isNumericalString;
     exports.isPrimaryPointer = isPrimaryPointer;
@@ -7305,6 +7373,7 @@
     exports.setDragLock = setDragLock;
     exports.setStyle = setStyle;
     exports.spring = spring;
+    exports.springValue = springValue;
     exports.stagger = stagger;
     exports.startWaapiAnimation = startWaapiAnimation;
     exports.statsBuffer = statsBuffer;