framer-motion 10.3.4 → 10.4.0

package/dist/dom-entry.d.ts

@@ -28,6 +28,7 @@ declare type Sync = {
     [key in StepId]: Schedule;
 };
 
+declare type GenericKeyframesTarget<V> = [null, ...V[]] | V[];
 /**
  * Options for orchestrating the timing of animations.
  *
@@ -799,6 +800,15 @@ declare type TransitionMap = Orchestration & {
  */
 declare type Transition = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap);
 
+interface AnimationPlaybackLifecycles<V> {
+    onUpdate?: (latest: V) => void;
+    onPlay?: () => void;
+    onComplete?: () => void;
+    onRepeat?: () => void;
+    onStop?: () => void;
+}
+declare type AnimateOptions<V = any> = Transition & AnimationPlaybackLifecycles<V>;
+declare type ElementOrSelector$1 = Element | Element[] | NodeListOf<Element> | string;
 /**
  * @public
  */
@@ -809,6 +819,29 @@ interface AnimationPlaybackControls {
     pause: () => void;
     then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
+interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition"> {
+    x: number | string;
+    y: number | string;
+    z: number | string;
+    rotateX: number | string;
+    rotateY: number | string;
+    rotateZ: number | string;
+    scaleX: number;
+    scaleY: number;
+    scaleZ: number;
+    skewX: number | string;
+    skewY: number | string;
+}
+declare type ValueKeyframe = string | number;
+declare type UnresolvedValueKeyframe = ValueKeyframe | null;
+declare type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
+declare type StyleKeyframesDefinition = {
+    [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
+};
+declare type VariableKeyframesDefinition = {
+    [key: `--${string}`]: ValueKeyframesDefinition;
+};
+declare type DOMKeyframesDefinition = StyleKeyframesDefinition & VariableKeyframesDefinition;
 
 /**
  * @public
@@ -973,43 +1006,19 @@ declare class MotionValue<V = any> {
 declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
 
 /**
- * @public
+ * Animate a single value
  */
-interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
-}
+declare function animate(from: string, to: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+declare function animate(from: number, to: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
 /**
- * Animate a single value or a `MotionValue`.
- *
- * The first argument is either a `MotionValue` to animate, or an initial animation value.
- *
- * The second is either a value to animate to, or an array of keyframes to animate through.
- *
- * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
- *
- * Returns `AnimationPlaybackControls`, currently just a `stop` method.
- *
- * ```javascript
- * const x = useMotionValue(0)
- *
- * useEffect(() => {
- *   const controls = animate(x, 100, {
- *     type: "spring",
- *     stiffness: 2000,
- *     onComplete: v => {}
- *   })
- *
- *   return controls.stop
- * })
- * ```
- *
- * @public
+ * Animate a MotionValue
+ */
+declare function animate(value: MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+declare function animate(value: MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
+/**
+ * Animate DOM
  */
-declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: Transition & AnimationPlaybackLifecycles<V>): AnimationPlaybackControls;
+declare function animate<V>(value: ElementOrSelector$1, keyframes: DOMKeyframesDefinition, options?: AnimateOptions<V>): AnimationPlaybackControls;
 
 interface AxisScrollInfo {
     current: number;

package/dist/es/animation/animate.mjs

@@ -1,39 +1,43 @@
-import { createMotionValueAnimation } from './index.mjs';
-import { motionValue } from '../value/index.mjs';
-import { isMotionValue } from '../value/utils/is-motion-value.mjs';
+import { resolveElements } from '../render/dom/utils/resolve-element.mjs';
+import { visualElementStore } from '../render/store.mjs';
+import { invariant } from '../utils/errors.mjs';
 import { GroupPlaybackControls } from './GroupPlaybackControls.mjs';
+import { isDOMKeyframes } from './utils/is-dom-keyframes.mjs';
+import { animateTarget } from './interfaces/visual-element-target.mjs';
+import { createVisualElement } from './utils/create-visual-element.mjs';
+import { animateSingleValue } from './interfaces/single-value.mjs';
 
-/**
- * Animate a single value or a `MotionValue`.
- *
- * The first argument is either a `MotionValue` to animate, or an initial animation value.
- *
- * The second is either a value to animate to, or an array of keyframes to animate through.
- *
- * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
- *
- * Returns `AnimationPlaybackControls`, currently just a `stop` method.
- *
- * ```javascript
- * const x = useMotionValue(0)
- *
- * useEffect(() => {
- *   const controls = animate(x, 100, {
- *     type: "spring",
- *     stiffness: 2000,
- *     onComplete: v => {}
- *   })
- *
- *   return controls.stop
- * })
- * ```
- *
- * @public
- */
-function animate(from, to, transition = {}) {
-    const value = isMotionValue(from) ? from : motionValue(from);
-    value.start(createMotionValueAnimation("", value, to, transition));
-    return value.animation || new GroupPlaybackControls([]);
+function animateElements(elementOrSelector, keyframes, options) {
+    const elements = resolveElements(elementOrSelector);
+    const numElements = elements.length;
+    invariant(Boolean(numElements), "No valid element provided.");
+    const animations = [];
+    for (let i = 0; i < numElements; i++) {
+        const element = elements[i];
+        /**
+         * Check each element for an associated VisualElement. If none exists,
+         * we need to create one.
+         */
+        if (!visualElementStore.has(element)) {
+            /**
+             * TODO: We only need render-specific parts of the VisualElement.
+             * With some additional work the size of the animate() function
+             * could be reduced significantly.
+             */
+            createVisualElement(element);
+        }
+        const visualElement = visualElementStore.get(element);
+        animations.push(...animateTarget(visualElement, { ...keyframes, transition: options }, {}));
+    }
+    return new GroupPlaybackControls(animations);
+}
+function animate(valueOrElement, keyframes, options = {}) {
+    if (isDOMKeyframes(keyframes)) {
+        return animateElements(valueOrElement, keyframes, options);
+    }
+    else {
+        return animateSingleValue(valueOrElement, keyframes, options);
+    }
 }
 
 export { animate };

package/dist/es/animation/{create-instant-animation.mjs → animators/instant.mjs}

@@ -1,5 +1,5 @@
 import { animateValue } from './js/index.mjs';
-import { noop } from '../utils/noop.mjs';
+import { noop } from '../../utils/noop.mjs';
 
 function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplete, }) {
     const setValue = () => {
@@ -10,7 +10,10 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
             play: (noop),
             pause: (noop),
             stop: (noop),
-            then: () => Promise.resolve(),
+            then: (resolve) => {
+                resolve();
+                return Promise.resolve();
+            },
         };
     };
     return delayBy

package/dist/es/animation/{js → animators/js}/driver-frameloop.mjs

@@ -1,5 +1,5 @@
-import { sync, cancelSync } from '../../frameloop/index.mjs';
-import { frameData } from '../../frameloop/data.mjs';
+import { sync, cancelSync } from '../../../frameloop/index.mjs';
+import { frameData } from '../../../frameloop/data.mjs';
 
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);

package/dist/es/animation/{js → animators/js}/index.mjs

@@ -1,10 +1,10 @@
-import { keyframes } from '../generators/keyframes.mjs';
-import { spring } from '../generators/spring/index.mjs';
-import { inertia } from '../generators/inertia.mjs';
+import { keyframes } from '../../generators/keyframes.mjs';
+import { spring } from '../../generators/spring/index.mjs';
+import { inertia } from '../../generators/inertia.mjs';
 import { frameloopDriver } from './driver-frameloop.mjs';
-import { interpolate } from '../../utils/interpolate.mjs';
-import { clamp } from '../../utils/clamp.mjs';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
+import { interpolate } from '../../../utils/interpolate.mjs';
+import { clamp } from '../../../utils/clamp.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
 
 const types = {
     decay: inertia,
@@ -206,12 +206,13 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             return millisecondsToSeconds(time);
         },
         set time(newTime) {
-            const timeInMs = secondsToMilliseconds(newTime);
+            newTime = secondsToMilliseconds(newTime);
+            time = newTime;
             if (holdTime !== null || !animationDriver) {
-                holdTime = timeInMs;
+                holdTime = newTime;
             }
             else {
-                startTime = animationDriver.now() - timeInMs;
+                startTime = animationDriver.now() - newTime;
             }
         },
         play,

package/dist/es/animation/{waapi → animators/waapi}/create-accelerated-animation.mjs

@@ -1,10 +1,10 @@
-import { sync } from '../../frameloop/index.mjs';
+import { sync } from '../../../frameloop/index.mjs';
 import { animateStyle } from './index.mjs';
 import { isWaapiSupportedEasing } from './easing.mjs';
 import { supports } from './supports.mjs';
 import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
 import { animateValue } from '../js/index.mjs';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
 
 /**
  * A list of values that can be hardware-accelerated.
@@ -39,6 +39,23 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         options.type !== "inertia";
     if (!canAccelerateAnimation)
         return false;
+    /**
+     * TODO: Unify with js/index
+     */
+    let resolveFinishedPromise;
+    let currentFinishedPromise;
+    /**
+     * Create a new finished Promise every time we enter the
+     * finished state and resolve the old Promise. This is
+     * WAAPI-compatible behaviour.
+     */
+    const updateFinishedPromise = () => {
+        currentFinishedPromise = new Promise((resolve) => {
+            resolveFinishedPromise = resolve;
+        });
+    };
+    // Create the first finished promise
+    updateFinishedPromise();
     let { keyframes, duration = 300, ease } = options;
     /**
      * If this animation needs pre-generated keyframes then generate.
@@ -90,13 +107,15 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         value.set(getFinalKeyframe(keyframes, options));
         sync.update(() => animation.cancel());
         onComplete && onComplete();
+        resolveFinishedPromise();
+        updateFinishedPromise();
     };
     /**
      * Animation interrupt callback.
      */
     return {
         then(resolve, reject) {
-            return animation.finished.then(resolve, reject);
+            return currentFinishedPromise.then(resolve, reject);
         },
         get time() {
             return millisecondsToSeconds(animation.currentTime || 0);

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,7 +1,10 @@
 import { invariant } from '../../utils/errors.mjs';
-import { animateVisualElement, stopAnimation } from '../../render/utils/animation.mjs';
 import { setValues } from '../../render/utils/setters.mjs';
+import { animateVisualElement } from '../interfaces/visual-element.mjs';
 
+function stopAnimation(visualElement) {
+    visualElement.values.forEach((value) => value.stop());
+}
 /**
  * @public
  */

package/dist/es/animation/hooks/use-animated-state.mjs

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs';
-import { animateVisualElement } from '../../render/utils/animation.mjs';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { VisualElement } from '../../render/VisualElement.mjs';
+import { animateVisualElement } from '../interfaces/visual-element.mjs';
 
 const createObject = () => ({});
 class StateVisualElement extends VisualElement {

package/dist/es/animation/{index.mjs → interfaces/motion-value.mjs}

@@ -1,15 +1,15 @@
-import { warning } from '../utils/errors.mjs';
-import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
-import { instantAnimationState } from '../utils/use-instant-transition-state.mjs';
-import { createAcceleratedAnimation } from './waapi/create-accelerated-animation.mjs';
-import { createInstantAnimation } from './create-instant-animation.mjs';
-import { getDefaultTransition } from './utils/default-transitions.mjs';
-import { isAnimatable } from './utils/is-animatable.mjs';
-import { getKeyframes } from './utils/keyframes.mjs';
-import { getValueTransition, isTransitionDefined } from './utils/transitions.mjs';
-import { animateValue } from './js/index.mjs';
+import { warning } from '../../utils/errors.mjs';
+import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
+import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
+import { createAcceleratedAnimation } from '../animators/waapi/create-accelerated-animation.mjs';
+import { createInstantAnimation } from '../animators/instant.mjs';
+import { getDefaultTransition } from '../utils/default-transitions.mjs';
+import { isAnimatable } from '../utils/is-animatable.mjs';
+import { getKeyframes } from '../utils/keyframes.mjs';
+import { getValueTransition, isTransitionDefined } from '../utils/transitions.mjs';
+import { animateValue } from '../animators/js/index.mjs';
 
-const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
+const animateMotionValue = (valueName, value, target, transition = {}) => {
     return (onComplete) => {
         const valueTransition = getValueTransition(transition, valueName) || {};
         /**
@@ -97,4 +97,4 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
     };
 };
 
-export { createMotionValueAnimation };
+export { animateMotionValue };

package/dist/es/animation/interfaces/single-value.mjs

@@ -0,0 +1,11 @@
+import { animateMotionValue } from './motion-value.mjs';
+import { motionValue } from '../../value/index.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+
+function animateSingleValue(value, keyframes, options) {
+    const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
+    motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
+    return motionValue$1.animation;
+}
+
+export { animateSingleValue };

package/dist/es/animation/interfaces/visual-element-target.mjs

@@ -0,0 +1,66 @@
+import { sync } from '../../frameloop/index.mjs';
+import { transformProps } from '../../render/html/utils/transform.mjs';
+import { optimizedAppearDataAttribute } from '../optimized-appear/data-id.mjs';
+import { animateMotionValue } from './motion-value.mjs';
+import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';
+import { setTarget } from '../../render/utils/setters.mjs';
+
+/**
+ * Decide whether we should block this animation. Previously, we achieved this
+ * just by checking whether the key was listed in protectedKeys, but this
+ * posed problems if an animation was triggered by afterChildren and protectedKeys
+ * had been set to true in the meantime.
+ */
+function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
+    const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
+    needsAnimating[key] = false;
+    return shouldBlock;
+}
+function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
+    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
+    const willChange = visualElement.getValue("willChange");
+    if (transitionOverride)
+        transition = transitionOverride;
+    const animations = [];
+    const animationTypeState = type &&
+        visualElement.animationState &&
+        visualElement.animationState.getState()[type];
+    for (const key in target) {
+        const value = visualElement.getValue(key);
+        const valueTarget = target[key];
+        if (!value ||
+            valueTarget === undefined ||
+            (animationTypeState &&
+                shouldBlockAnimation(animationTypeState, key))) {
+            continue;
+        }
+        const valueTransition = { delay, elapsed: 0, ...transition };
+        /**
+         * If this is the first time a value is being animated, check
+         * to see if we're handling off from an existing animation.
+         */
+        if (window.HandoffAppearAnimations && !value.hasAnimated) {
+            const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
+            if (appearId) {
+                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, sync);
+            }
+        }
+        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
+            ? { type: false }
+            : valueTransition));
+        const animation = value.animation;
+        if (isWillChangeMotionValue(willChange)) {
+            willChange.add(key);
+            animation.then(() => willChange.remove(key));
+        }
+        animations.push(animation);
+    }
+    if (transitionEnd) {
+        Promise.all(animations).then(() => {
+            transitionEnd && setTarget(visualElement, transitionEnd);
+        });
+    }
+    return animations;
+}
+
+export { animateTarget };

package/dist/es/animation/interfaces/visual-element-variant.mjs

@@ -0,0 +1,63 @@
+import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
+import { animateTarget } from './visual-element-target.mjs';
+
+function animateVariant(visualElement, variant, options = {}) {
+    const resolved = resolveVariant(visualElement, variant, options.custom);
+    let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
+    if (options.transitionOverride) {
+        transition = options.transitionOverride;
+    }
+    /**
+     * If we have a variant, create a callback that runs it as an animation.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    const getAnimation = resolved
+        ? () => Promise.all(animateTarget(visualElement, resolved, options))
+        : () => Promise.resolve();
+    /**
+     * If we have children, create a callback that runs all their animations.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
+        ? (forwardDelay = 0) => {
+            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
+            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
+        }
+        : () => Promise.resolve();
+    /**
+     * If the transition explicitly defines a "when" option, we need to resolve either
+     * this animation or all children animations before playing the other.
+     */
+    const { when } = transition;
+    if (when) {
+        const [first, last] = when === "beforeChildren"
+            ? [getAnimation, getChildAnimations]
+            : [getChildAnimations, getAnimation];
+        return first().then(() => last());
+    }
+    else {
+        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
+    }
+}
+function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
+    const animations = [];
+    const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
+    const generateStaggerDuration = staggerDirection === 1
+        ? (i = 0) => i * staggerChildren
+        : (i = 0) => maxStaggerDuration - i * staggerChildren;
+    Array.from(visualElement.variantChildren)
+        .sort(sortByTreeOrder)
+        .forEach((child, i) => {
+        child.notify("AnimationStart", variant);
+        animations.push(animateVariant(child, variant, {
+            ...options,
+            delay: delayChildren + generateStaggerDuration(i),
+        }).then(() => child.notify("AnimationComplete", variant)));
+    });
+    return Promise.all(animations);
+}
+function sortByTreeOrder(a, b) {
+    return a.sortNodePosition(b);
+}
+
+export { animateVariant, sortByTreeOrder };

package/dist/es/animation/interfaces/visual-element.mjs

@@ -0,0 +1,24 @@
+import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
+import { animateTarget } from './visual-element-target.mjs';
+import { animateVariant } from './visual-element-variant.mjs';
+
+function animateVisualElement(visualElement, definition, options = {}) {
+    visualElement.notify("AnimationStart", definition);
+    let animation;
+    if (Array.isArray(definition)) {
+        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
+        animation = Promise.all(animations);
+    }
+    else if (typeof definition === "string") {
+        animation = animateVariant(visualElement, definition, options);
+    }
+    else {
+        const resolvedDefinition = typeof definition === "function"
+            ? resolveVariant(visualElement, definition, options.custom)
+            : definition;
+        animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
+    }
+    return animation.then(() => visualElement.notify("AnimationComplete", definition));
+}
+
+export { animateVisualElement };

package/dist/es/animation/optimized-appear/start.mjs

@@ -1,5 +1,5 @@
 import { appearStoreId } from './store-id.mjs';
-import { animateStyle } from '../waapi/index.mjs';
+import { animateStyle } from '../animators/waapi/index.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';
 import { appearAnimationStore } from './store.mjs';

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

@@ -0,0 +1,32 @@
+import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
+import { SVGVisualElement } from '../../render/svg/SVGVisualElement.mjs';
+import { HTMLVisualElement } from '../../render/html/HTMLVisualElement.mjs';
+import { visualElementStore } from '../../render/store.mjs';
+
+function createVisualElement(element) {
+    const options = {
+        presenceContext: null,
+        props: {},
+        visualState: {
+            renderState: {
+                transform: {},
+                transformOrigin: {},
+                style: {},
+                vars: {},
+                attrs: {},
+            },
+            latestValues: {},
+        },
+    };
+    const node = isSVGElement(element)
+        ? new SVGVisualElement(options, {
+            enableHardwareAcceleration: false,
+        })
+        : new HTMLVisualElement(options, {
+            enableHardwareAcceleration: true,
+        });
+    node.mount(element);
+    visualElementStore.set(element, node);
+}
+
+export { createVisualElement };

package/dist/es/animation/utils/is-dom-keyframes.mjs

@@ -0,0 +1,5 @@
+function isDOMKeyframes(keyframes) {
+    return typeof keyframes === "object" && !Array.isArray(keyframes);
+}
+
+export { isDOMKeyframes };

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -13,7 +13,7 @@ import { addDomEvent } from '../../events/add-dom-event.mjs';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { percent } from '../../value/types/numbers/units.mjs';
-import { createMotionValueAnimation } from '../../animation/index.mjs';
+import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
 import { sync } from '../../frameloop/index.mjs';
 
 const elementDragControls = new WeakMap();
@@ -278,7 +278,7 @@ class VisualElementDragControls {
     }
     startAxisValueAnimation(axis, transition) {
         const axisValue = this.getAxisMotionValue(axis);
-        return axisValue.start(createMotionValueAnimation(axis, axisValue, 0, transition));
+        return axisValue.start(animateMotionValue(axis, axisValue, 0, transition));
     }
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());

package/dist/es/index.mjs

@@ -24,7 +24,7 @@ export { useReducedMotionConfig } from './utils/reduced-motion/use-reduced-motio
 export { animationControls } from './animation/hooks/animation-controls.mjs';
 export { useAnimation, useAnimationControls } from './animation/hooks/use-animation.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';
-export { animateVisualElement } from './render/utils/animation.mjs';
+export { animateVisualElement } from './animation/interfaces/visual-element.mjs';
 export { useCycle } from './utils/use-cycle.mjs';
 export { isValidMotionProp } from './motion/utils/valid-prop.mjs';
 export { useIsPresent, usePresence } from './components/AnimatePresence/use-presence.mjs';
@@ -40,7 +40,7 @@ export { useInstantTransition } from './utils/use-instant-transition.mjs';
 export { useInstantLayoutTransition } from './projection/use-instant-layout-transition.mjs';
 export { useResetProjection } from './projection/use-reset-projection.mjs';
 export { buildTransform } from './render/html/utils/build-transform.mjs';
-export { animateValue } from './animation/js/index.mjs';
+export { animateValue } from './animation/animators/js/index.mjs';
 export { color } from './value/types/color/index.mjs';
 export { complex } from './value/types/complex/index.mjs';
 export { px } from './value/types/numbers/units.mjs';