motion 12.11.4 → 12.12.1

package/dist/cjs/react-m.js

@@ -497,6 +497,8 @@ const getValueAsType = (value, type) => {
 const { schedule: microtask, cancel: cancelMicrotask } = 
 /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
 /**
  * Convert camelCase to dash-case properties.
  */
@@ -732,8 +734,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
             (!!scaleCorrectors[key] || key === "opacity")));
 }
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 const translateAlias = {
     x: "translateX",
     y: "translateY",
@@ -906,6 +906,112 @@ function useHTMLProps(props, visualState) {
     return htmlProps;
 }
 
+const dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+const camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    const keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = px.transform(-offset);
+    // Build the dash array
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
+    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
+}
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
+// This is object creation, which we try to avoid per-frame.
+...latest }, isSVGTag, transformTemplate, styleProp) {
+    buildHTMLStyles(state, latest, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
+    state.attrs = state.style;
+    state.style = {};
+    const { attrs, style } = state;
+    /**
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
+     */
+    if (attrs.transform) {
+        style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = styleProp?.transformBox ?? "fill-box";
+        delete attrs.transformBox;
+    }
+    // Render attrX/attrY/attrScale as attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    if (attrScale !== undefined)
+        attrs.scale = attrScale;
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+function useSVGProps(props, visualState, _isStatic, Component) {
+    const visualProps = react.useMemo(() => {
+        const state = createSvgRenderState();
+        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
+        return {
+            ...state.attrs,
+            style: { ...state.style },
+        };
+    }, [visualState]);
+    if (props.style) {
+        const rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+    return visualProps;
+}
+
 /**
  * A list of all valid MotionProps.
  *
@@ -1077,112 +1183,6 @@ function isSVGComponent(Component) {
     return false;
 }
 
-const dashKeys = {
-    offset: "stroke-dashoffset",
-    array: "stroke-dasharray",
-};
-const camelKeys = {
-    offset: "strokeDashoffset",
-    array: "strokeDasharray",
-};
-/**
- * Build SVG path properties. Uses the path's measured length to convert
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
- * and stroke-dasharray attributes.
- *
- * This function is mutative to reduce per-frame GC.
- */
-function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
-    // Normalise path length by setting SVG attribute pathLength to 1
-    attrs.pathLength = 1;
-    // We use dash case when setting attributes directly to the DOM node and camel case
-    // when defining props on a React component.
-    const keys = useDashCase ? dashKeys : camelKeys;
-    // Build the dash offset
-    attrs[keys.offset] = px.transform(-offset);
-    // Build the dash array
-    const pathLength = px.transform(length);
-    const pathSpacing = px.transform(spacing);
-    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
-}
-
-/**
- * Build SVG visual attrbutes, like cx and style.transform
- */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
-// This is object creation, which we try to avoid per-frame.
-...latest }, isSVGTag, transformTemplate, styleProp) {
-    buildHTMLStyles(state, latest, transformTemplate);
-    /**
-     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
-     * as normal HTML tags.
-     */
-    if (isSVGTag) {
-        if (state.style.viewBox) {
-            state.attrs.viewBox = state.style.viewBox;
-        }
-        return;
-    }
-    state.attrs = state.style;
-    state.style = {};
-    const { attrs, style } = state;
-    /**
-     * However, we apply transforms as CSS transforms.
-     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
-     */
-    if (attrs.transform) {
-        style.transform = attrs.transform;
-        delete attrs.transform;
-    }
-    if (style.transform || attrs.transformOrigin) {
-        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
-        delete attrs.transformOrigin;
-    }
-    if (style.transform) {
-        /**
-         * SVG's element transform-origin uses its own median as a reference.
-         * Therefore, transformBox becomes a fill-box
-         */
-        style.transformBox = styleProp?.transformBox ?? "fill-box";
-        delete attrs.transformBox;
-    }
-    // Render attrX/attrY/attrScale as attributes
-    if (attrX !== undefined)
-        attrs.x = attrX;
-    if (attrY !== undefined)
-        attrs.y = attrY;
-    if (attrScale !== undefined)
-        attrs.scale = attrScale;
-    // Build SVG path if one has been defined
-    if (pathLength !== undefined) {
-        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
-    }
-}
-
-const createSvgRenderState = () => ({
-    ...createHtmlRenderState(),
-    attrs: {},
-});
-
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
-function useSVGProps(props, visualState, _isStatic, Component) {
-    const visualProps = react.useMemo(() => {
-        const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
-        return {
-            ...state.attrs,
-            style: { ...state.style },
-        };
-    }, [visualState]);
-    if (props.style) {
-        const rawStyles = {};
-        copyRawValuesOnly(rawStyles, props.style, props);
-        visualProps.style = { ...rawStyles, ...visualProps.style };
-    }
-    return visualProps;
-}
-
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, ref, { latestValues }, isStatic) => {
         const useVisualProps = isSVGComponent(Component)

package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs

@@ -1,5 +1,5 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { animateMotionValue } from '../interfaces/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 animateSingleValue(value, keyframes, options) {

package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs

@@ -1,11 +1,11 @@
 import { visualElementStore } from '../../render/store.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { animateTarget } from '../interfaces/visual-element-target.mjs';
 import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.mjs';
 import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
 import { resolveSubjects } from './resolve-subjects.mjs';
 import { animateSingleValue } from './single-value.mjs';
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function isSingleValue(subject, keyframes) {
     return (isMotionValue(subject) ||

package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs

@@ -1,10 +1,10 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { resolveSubjects } from '../animate/resolve-subjects.mjs';
 import { calculateRepeatDuration } from './utils/calc-repeat-duration.mjs';
 import { calcNextTime } from './utils/calc-time.mjs';
 import { addKeyframes } from './utils/edit.mjs';
 import { normalizeTimes } from './utils/normalize-times.mjs';
 import { compareByTime } from './utils/sort.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { defaultOffset } from '../../../../../motion-dom/dist/es/animation/keyframes/offsets/default.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { createGeneratorEasing } from '../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';

package/dist/es/framer-motion/dist/es/animation/utils/create-visual-element.mjs

@@ -1,8 +1,9 @@
-import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
 import { HTMLVisualElement } from '../../render/html/HTMLVisualElement.mjs';
 import { ObjectVisualElement } from '../../render/object/ObjectVisualElement.mjs';
 import { visualElementStore } from '../../render/store.mjs';
 import { SVGVisualElement } from '../../render/svg/SVGVisualElement.mjs';
+import { isSVGElement } from '../../../../../motion-dom/dist/es/utils/is-svg-element.mjs';
+import { isSVGSVGElement } from '../../../../../motion-dom/dist/es/utils/is-svg-svg-element.mjs';
 
 function createDOMVisualElement(element) {
     const options = {
@@ -19,7 +20,7 @@ function createDOMVisualElement(element) {
             latestValues: {},
         },
     };
-    const node = isSVGElement(element)
+    const node = isSVGElement(element) && !isSVGSVGElement(element)
         ? new SVGVisualElement(options)
         : new HTMLVisualElement(options);
     node.mount(element);

package/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useId, useRef, useContext, useInsertionEffect } from 'react';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+import { isHTMLElement } from '../../../../../motion-dom/dist/es/utils/is-html-element.mjs';
 
 /**
  * Measurement functionality has to be within a separate component
@@ -13,7 +14,9 @@ class PopChildMeasure extends React.Component {
         const element = this.props.childRef.current;
         if (element && prevProps.isPresent && !this.props.isPresent) {
             const parent = element.offsetParent;
-            const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
+            const parentWidth = isHTMLElement(parent)
+                ? parent.offsetWidth || 0
+                : 0;
             const size = this.props.sizeRef.current;
             size.height = element.offsetHeight || 0;
             size.width = element.offsetWidth || 0;

package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs

@@ -6,8 +6,8 @@ import { motion } from '../../render/components/motion/proxy.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { useMotionValue } from '../../value/use-motion-value.mjs';
 import { useTransform } from '../../value/use-transform.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function useDefaultMotionValue(value, defaultValue = 0) {
     return isMotionValue(value) ? value : useMotionValue(defaultValue);

package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs

@@ -1,6 +1,5 @@
 import { animateSingleValue } from '../../animation/animate/single-value.mjs';
 import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
-import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
 import { delay } from '../../utils/delay.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
@@ -19,6 +18,8 @@ import { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.m
 import { globalProjectionState } from './state.mjs';
 import { statsBuffer } from '../../../../../motion-dom/dist/es/stats/buffer.mjs';
 import { SubscriptionManager } from '../../../../../motion-utils/dist/es/subscription-manager.mjs';
+import { isSVGElement } from '../../../../../motion-dom/dist/es/utils/is-svg-element.mjs';
+import { isSVGSVGElement } from '../../../../../motion-dom/dist/es/utils/is-svg-svg-element.mjs';
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { cancelFrame, frameData, frameSteps, frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
@@ -243,7 +244,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         mount(instance) {
             if (this.instance)
                 return;
-            this.isSVG = isSVGElement(instance);
+            this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance);
             this.instance = instance;
             const { layoutId, layout, visualElement } = this.options;
             if (visualElement && !visualElement.current) {

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -2,7 +2,6 @@ import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
-import { isMotionValue } from '../value/utils/is-motion-value.mjs';
 import { visualElementStore } from './store.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
@@ -10,6 +9,7 @@ import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
 import { KeyframeResolver } from '../../../../motion-dom/dist/es/animation/keyframes/KeyframesResolver.mjs';
 import { time } from '../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
 import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { warnOnce } from '../../../../motion-utils/dist/es/warn-once.mjs';
 import { transformProps } from '../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';

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

@@ -1,6 +1,6 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { VisualElement } from '../VisualElement.mjs';
 import { DOMKeyframesResolver } from '../../../../../motion-dom/dist/es/animation/keyframes/DOMKeyframesResolver.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 class DOMVisualElement extends VisualElement {
     constructor() {

package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs

@@ -1,4 +1,5 @@
 import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
+import { isSVGElement } from '../../../../../../motion-dom/dist/es/utils/is-svg-element.mjs';
 
 const resizeHandlers = new WeakMap();
 let observer;
@@ -7,7 +8,7 @@ function getElementSize(target, borderBoxSize) {
         const { inlineSize, blockSize } = borderBoxSize[0];
         return { width: inlineSize, height: blockSize };
     }
-    else if (target instanceof SVGElement && "getBBox" in target) {
+    else if (isSVGElement(target) && "getBBox" in target) {
         return target.getBBox();
     }
     else {

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

@@ -1,8 +1,10 @@
+import { isHTMLElement } from '../../../../../../../motion-dom/dist/es/utils/is-html-element.mjs';
+
 function calcInset(element, container) {
     const inset = { x: 0, y: 0 };
     let current = element;
     while (current && current !== container) {
-        if (current instanceof HTMLElement) {
+        if (isHTMLElement(current)) {
             inset.x += current.offsetLeft;
             inset.y += current.offsetTop;
             current = current.offsetParent;

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

@@ -59,6 +59,9 @@ export { recordStats } from '../../motion-dom/dist/es/stats/index.mjs';
 export { activeAnimations } from '../../motion-dom/dist/es/stats/animation-count.mjs';
 export { statsBuffer } from '../../motion-dom/dist/es/stats/buffer.mjs';
 export { interpolate } from '../../motion-dom/dist/es/utils/interpolate.mjs';
+export { isHTMLElement } from '../../motion-dom/dist/es/utils/is-html-element.mjs';
+export { isSVGElement } from '../../motion-dom/dist/es/utils/is-svg-element.mjs';
+export { isSVGSVGElement } from '../../motion-dom/dist/es/utils/is-svg-svg-element.mjs';
 export { mix } from '../../motion-dom/dist/es/utils/mix/index.mjs';
 export { mixColor, mixLinearColor } from '../../motion-dom/dist/es/utils/mix/color.mjs';
 export { getMixer, mixArray, mixComplex, mixObject } from '../../motion-dom/dist/es/utils/mix/complex.mjs';
@@ -72,6 +75,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 +93,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';
@@ -97,6 +102,7 @@ export { clamp } from '../../motion-utils/dist/es/clamp.mjs';
 export { invariant, warning } from '../../motion-utils/dist/es/errors.mjs';
 export { MotionGlobalConfig } from '../../motion-utils/dist/es/global-config.mjs';
 export { isNumericalString } from '../../motion-utils/dist/es/is-numerical-string.mjs';
+export { isObject } from '../../motion-utils/dist/es/is-object.mjs';
 export { isZeroValueString } from '../../motion-utils/dist/es/is-zero-value-string.mjs';
 export { memo } from '../../motion-utils/dist/es/memo.mjs';
 export { noop } from '../../motion-utils/dist/es/noop.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';
@@ -83,6 +82,7 @@ export { addUniqueItem, moveItem, removeItem } from '../../motion-utils/dist/es/
 export { clamp } from '../../motion-utils/dist/es/clamp.mjs';
 export { invariant, warning } from '../../motion-utils/dist/es/errors.mjs';
 export { isNumericalString } from '../../motion-utils/dist/es/is-numerical-string.mjs';
+export { isObject } from '../../motion-utils/dist/es/is-object.mjs';
 export { isZeroValueString } from '../../motion-utils/dist/es/is-zero-value-string.mjs';
 export { memo } from '../../motion-utils/dist/es/memo.mjs';
 export { noop } from '../../motion-utils/dist/es/noop.mjs';
@@ -158,6 +158,9 @@ export { recordStats } from '../../motion-dom/dist/es/stats/index.mjs';
 export { activeAnimations } from '../../motion-dom/dist/es/stats/animation-count.mjs';
 export { statsBuffer } from '../../motion-dom/dist/es/stats/buffer.mjs';
 export { interpolate } from '../../motion-dom/dist/es/utils/interpolate.mjs';
+export { isHTMLElement } from '../../motion-dom/dist/es/utils/is-html-element.mjs';
+export { isSVGElement } from '../../motion-dom/dist/es/utils/is-svg-element.mjs';
+export { isSVGSVGElement } from '../../motion-dom/dist/es/utils/is-svg-svg-element.mjs';
 export { mix } from '../../motion-dom/dist/es/utils/mix/index.mjs';
 export { mixColor, mixLinearColor } from '../../motion-dom/dist/es/utils/mix/color.mjs';
 export { getMixer, mixArray, mixComplex, mixObject } from '../../motion-dom/dist/es/utils/mix/complex.mjs';
@@ -171,6 +174,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 +192,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';