framer-motion 10.2.3 → 10.2.4

package/dist/es/animation/{legacy-popmotion → generators}/keyframes.mjs

@@ -7,8 +7,7 @@ import { isEasingArray, easingDefinitionToFunction } from '../utils/easing.mjs';
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
 }
-function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
-    keyframeValues = [...keyframeValues];
+function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
     /**
      * Easing functions can be externally defined as strings. Here we convert them
      * into actual functions.
@@ -33,24 +32,18 @@ function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duratio
     times && times.length === keyframeValues.length
         ? times
         : defaultOffset(keyframeValues), duration);
-    function createInterpolator() {
-        return interpolate(absoluteTimes, keyframeValues, {
-            ease: Array.isArray(easingFunctions)
-                ? easingFunctions
-                : defaultEasing(keyframeValues, easingFunctions),
-        });
-    }
-    let interpolator = createInterpolator();
+    const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
+        ease: Array.isArray(easingFunctions)
+            ? easingFunctions
+            : defaultEasing(keyframeValues, easingFunctions),
+    });
     return {
+        calculatedDuration: duration,
         next: (t) => {
-            state.value = interpolator(t);
+            state.value = mapTimeToKeyframe(t);
             state.done = t >= duration;
             return state;
         },
-        flipTarget: () => {
-            keyframeValues.reverse();
-            interpolator = createInterpolator();
-        },
     };
 }
 

package/dist/es/animation/{legacy-popmotion/find-spring.mjs → generators/spring/find.mjs}

@@ -1,5 +1,6 @@
-import { warning } from '../../utils/errors.mjs';
-import { clamp } from '../../utils/clamp.mjs';
+import { warning } from '../../../utils/errors.mjs';
+import { clamp } from '../../../utils/clamp.mjs';
+import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
 
 const safeMin = 0.001;
 const minDuration = 0.01;
@@ -9,13 +10,13 @@ const maxDamping = 1;
 function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
     let envelope;
     let derivative;
-    warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+    warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less");
     let dampingRatio = 1 - bounce;
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
      */
     dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-    duration = clamp(minDuration, maxDuration, duration / 1000);
+    duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));
     if (dampingRatio < 1) {
         /**
          * Underdamped spring
@@ -56,7 +57,7 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
     }
     const initialGuess = 5 / duration;
     const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-    duration = duration * 1000;
+    duration = secondsToMilliseconds(duration);
     if (isNaN(undampedFreq)) {
         return {
             stiffness: 100,

package/dist/es/animation/generators/spring/index.mjs

@@ -0,0 +1,129 @@
+import { millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
+import { calcGeneratorVelocity } from '../utils/velocity.mjs';
+import { findSpring, calcAngularFreq } from './find.mjs';
+
+const durationKeys = ["duration", "bounce"];
+const physicsKeys = ["stiffness", "damping", "mass"];
+function isSpringType(options, keys) {
+    return keys.some((key) => options[key] !== undefined);
+}
+function getSpringOptions(options) {
+    let springOptions = {
+        velocity: 0.0,
+        stiffness: 100,
+        damping: 10,
+        mass: 1.0,
+        isResolvedFromDuration: false,
+        ...options,
+    };
+    // stiffness/damping/mass overrides duration/bounce
+    if (!isSpringType(options, physicsKeys) &&
+        isSpringType(options, durationKeys)) {
+        const derived = findSpring(options);
+        springOptions = {
+            ...springOptions,
+            ...derived,
+            velocity: 0.0,
+            mass: 1.0,
+        };
+        springOptions.isResolvedFromDuration = true;
+    }
+    return springOptions;
+}
+function spring({ keyframes, restDelta, restSpeed, ...options }) {
+    const origin = keyframes[0];
+    const target = keyframes[keyframes.length - 1];
+    /**
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
+     */
+    const state = { done: false, value: origin };
+    const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+    const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0;
+    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+    const initialDelta = target - origin;
+    const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
+    /**
+     * If we're working on a granular scale, use smaller defaults for determining
+     * when the spring is finished.
+     *
+     * These defaults have been selected emprically based on what strikes a good
+     * ratio between feeling good and finishing as soon as changes are imperceptible.
+     */
+    const isGranularScale = Math.abs(initialDelta) < 5;
+    restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
+    restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+    let resolveSpring;
+    if (dampingRatio < 1) {
+        const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+        // Underdamped spring
+        resolveSpring = (t) => {
+            const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+            return (target -
+                envelope *
+                    (((initialVelocity +
+                        dampingRatio * undampedAngularFreq * initialDelta) /
+                        angularFreq) *
+                        Math.sin(angularFreq * t) +
+                        initialDelta * Math.cos(angularFreq * t)));
+        };
+    }
+    else if (dampingRatio === 1) {
+        // Critically damped spring
+        resolveSpring = (t) => target -
+            Math.exp(-undampedAngularFreq * t) *
+                (initialDelta +
+                    (initialVelocity + undampedAngularFreq * initialDelta) * t);
+    }
+    else {
+        // Overdamped spring
+        const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
+        resolveSpring = (t) => {
+            const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+            // When performing sinh or cosh values can hit Infinity so we cap them here
+            const freqForT = Math.min(dampedAngularFreq * t, 300);
+            return (target -
+                (envelope *
+                    ((initialVelocity +
+                        dampingRatio * undampedAngularFreq * initialDelta) *
+                        Math.sinh(freqForT) +
+                        dampedAngularFreq *
+                            initialDelta *
+                            Math.cosh(freqForT))) /
+                    dampedAngularFreq);
+        };
+    }
+    return {
+        calculatedDuration: isResolvedFromDuration ? duration || null : null,
+        next: (t) => {
+            const current = resolveSpring(t);
+            if (!isResolvedFromDuration) {
+                let currentVelocity = initialVelocity;
+                if (t !== 0) {
+                    /**
+                     * We only need to calculate velocity for under-damped springs
+                     * as over- and critically-damped springs can't overshoot, so
+                     * checking only for displacement is enough.
+                     */
+                    if (dampingRatio < 1) {
+                        currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
+                    }
+                    else {
+                        currentVelocity = 0;
+                    }
+                }
+                const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
+                const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
+                state.done =
+                    isBelowVelocityThreshold && isBelowDisplacementThreshold;
+            }
+            else {
+                state.done = t >= duration;
+            }
+            state.value = state.done ? target : current;
+            return state;
+        },
+    };
+}
+
+export { spring };

package/dist/es/animation/generators/utils/velocity.mjs

@@ -0,0 +1,9 @@
+import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';
+
+const velocitySampleDuration = 5; // ms
+function calcGeneratorVelocity(resolveValue, t, current) {
+    const prevT = Math.max(t - velocitySampleDuration, 0);
+    return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+}
+
+export { calcGeneratorVelocity };

package/dist/es/animation/index.mjs

@@ -3,12 +3,11 @@ 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 { animateValue } from './legacy-popmotion/index.mjs';
-import { inertia } from './legacy-popmotion/inertia.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';
 
 const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
     return (onComplete) => {
@@ -40,7 +39,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
             keyframes,
             velocity: value.getVelocity(),
             ...valueTransition,
-            elapsed,
+            delay: -elapsed,
             onUpdate: (v) => {
                 value.set(v);
                 valueTransition.onUpdate && valueTransition.onUpdate(v);
@@ -60,13 +59,6 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
              */
             return createInstantAnimation(options);
         }
-        else if (valueTransition.type === "inertia") {
-            /**
-             * If this is an inertia animation, we currently don't support pre-generating
-             * keyframes for this as such it must always run on the main thread.
-             */
-            return inertia(options);
-        }
         /**
          * If there's no transition defined for this value, we can generate
          * unqiue transition settings for this value.

package/dist/es/animation/js/driver-frameloop.mjs

@@ -0,0 +1,12 @@
+import { sync, cancelSync } from '../../frameloop/index.mjs';
+
+const frameloopDriver = (update) => {
+    const passTimestamp = ({ timestamp }) => update(timestamp);
+    return {
+        start: () => sync.update(passTimestamp, true),
+        stop: () => cancelSync.update(passTimestamp),
+        now: () => performance.now(),
+    };
+};
+
+export { frameloopDriver };

package/dist/es/animation/js/index.mjs

@@ -0,0 +1,206 @@
+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';
+
+const types = {
+    decay: inertia,
+    inertia,
+    tween: keyframes,
+    keyframes: keyframes,
+    spring,
+};
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxDuration = 20000;
+function calculateDuration(generator) {
+    let duration = 0;
+    const timeStep = 50;
+    let state = generator.next(duration);
+    while (!state.done && duration < maxDuration) {
+        duration += timeStep;
+        state = generator.next(duration);
+    }
+    return duration;
+}
+function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) {
+    let animationDriver;
+    const generatorFactory = types[type] || keyframes;
+    /**
+     * If this isn't the keyframes generator and we've been provided
+     * strings as keyframes, we need to interpolate these.
+     * TODO: Support velocity for units and complex value types/
+     */
+    let mapNumbersToKeyframes;
+    if (generatorFactory !== keyframes &&
+        typeof keyframes$1[0] !== "number") {
+        mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {
+            clamp: false,
+        });
+        keyframes$1 = [0, 100];
+    }
+    const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
+    let mirroredGenerator;
+    if (repeatType === "mirror") {
+        mirroredGenerator = generatorFactory({
+            ...options,
+            keyframes: [...keyframes$1].reverse(),
+            velocity: -(options.velocity || 0),
+        });
+    }
+    let playState = "idle";
+    let holdTime = null;
+    let startTime = null;
+    /**
+     * If duration is undefined and we have repeat options,
+     * we need to calculate a duration from the generator.
+     *
+     * We set it to the generator itself to cache the duration.
+     * Any timeline resolver will need to have already precalculated
+     * the duration by this step.
+     */
+    if (generator.calculatedDuration === null && repeat) {
+        generator.calculatedDuration = calculateDuration(generator);
+    }
+    const { calculatedDuration } = generator;
+    let resolvedDuration = Infinity;
+    let totalDuration = Infinity;
+    if (calculatedDuration) {
+        resolvedDuration = calculatedDuration + repeatDelay;
+        totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
+    }
+    let currentTime = 0;
+    const tick = (timestamp) => {
+        if (startTime === null)
+            return;
+        if (holdTime !== null) {
+            currentTime = holdTime;
+        }
+        else {
+            currentTime = timestamp - startTime;
+        }
+        // Rebase on delay
+        currentTime = Math.max(currentTime - delay, 0);
+        /**
+         * If this animation has finished, set the current time
+         * to the total duration.
+         */
+        if (playState === "finished" && holdTime === null) {
+            currentTime = totalDuration;
+        }
+        let elapsed = currentTime;
+        let frameGenerator = generator;
+        if (repeat) {
+            /**
+             * Get the current progress (0-1) of the animation. If t is >
+             * than duration we'll get values like 2.5 (midway through the
+             * third iteration)
+             */
+            const progress = currentTime / resolvedDuration;
+            /**
+             * Get the current iteration (0 indexed). For instance the floor of
+             * 2.5 is 2.
+             */
+            let currentIteration = Math.floor(progress);
+            /**
+             * Get the current progress of the iteration by taking the remainder
+             * so 2.5 is 0.5 through iteration 2
+             */
+            let iterationProgress = progress % 1.0;
+            /**
+             * If iteration progress is 1 we count that as the end
+             * of the previous iteration.
+             */
+            if (!iterationProgress && progress >= 1) {
+                iterationProgress = 1;
+            }
+            iterationProgress === 1 && currentIteration--;
+            /**
+             * Reverse progress if we're not running in "normal" direction
+             */
+            const iterationIsOdd = currentIteration % 2;
+            if (iterationIsOdd) {
+                if (repeatType === "reverse") {
+                    iterationProgress = 1 - iterationProgress;
+                    if (repeatDelay) {
+                        iterationProgress -= repeatDelay / resolvedDuration;
+                    }
+                }
+                else if (repeatType === "mirror") {
+                    frameGenerator = mirroredGenerator;
+                }
+            }
+            const p = currentTime >= totalDuration
+                ? repeatType === "reverse" && iterationIsOdd
+                    ? 0
+                    : 1
+                : clamp(0, 1, iterationProgress);
+            elapsed = p * resolvedDuration;
+        }
+        const state = frameGenerator.next(elapsed);
+        let { value, done } = state;
+        if (onUpdate) {
+            onUpdate(mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value);
+        }
+        if (calculatedDuration !== null) {
+            done = currentTime >= totalDuration;
+        }
+        const isAnimationFinished = holdTime === null &&
+            (playState === "finished" || (playState === "running" && done));
+        if (isAnimationFinished) {
+            playState = "finished";
+            onComplete && onComplete();
+            animationDriver && animationDriver.stop();
+        }
+        return state;
+    };
+    const play = () => {
+        animationDriver = driver(tick);
+        const now = animationDriver.now();
+        onPlay && onPlay();
+        playState = "running";
+        if (holdTime !== null) {
+            startTime = now - holdTime;
+        }
+        else if (!startTime) {
+            // TODO When implementing play/pause, check WAAPI
+            // logic around finished animations
+            startTime = now;
+        }
+        holdTime = null;
+        animationDriver.start();
+    };
+    if (autoplay) {
+        play();
+    }
+    const controls = {
+        get currentTime() {
+            return millisecondsToSeconds(currentTime);
+        },
+        set currentTime(newTime) {
+            if (holdTime !== null || !animationDriver) {
+                holdTime = 0;
+            }
+            else {
+                startTime =
+                    animationDriver.now() - secondsToMilliseconds(newTime);
+            }
+        },
+        stop: () => {
+            onStop && onStop();
+            animationDriver && animationDriver.stop();
+        },
+        sample: (elapsed) => {
+            startTime = 0;
+            return tick(elapsed);
+        },
+    };
+    return controls;
+}
+
+export { animateValue };

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

@@ -1,4 +1,5 @@
 import { transformProps } from '../../render/html/utils/transform.mjs';
+import { millisecondsToSeconds } from '../../utils/time-conversion.mjs';
 import { appearAnimationStore } from './store.mjs';
 import { appearStoreId } from './store-id.mjs';
 
@@ -41,7 +42,8 @@ sync) {
          */
         sync.update(() => {
             if (value.animation) {
-                value.animation.currentTime = performance.now() - sampledTime;
+                value.animation.currentTime =
+                    performance.now() - millisecondsToSeconds(sampledTime);
             }
         });
         /**

package/dist/es/animation/waapi/create-accelerated-animation.mjs

@@ -1,9 +1,10 @@
 import { sync } from '../../frameloop/index.mjs';
-import { animateValue } from '../legacy-popmotion/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';
 
 /**
  * A list of values that can be hardware-accelerated.
@@ -21,6 +22,11 @@ const acceleratedValues = new Set([
  * keyframe quantity.
  */
 const sampleDelta = 10; //ms
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxDuration = 20000;
 const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" ||
     valueName === "backgroundColor" ||
     !isWaapiSupportedEasing(options.ease);
@@ -29,10 +35,11 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         acceleratedValues.has(valueName) &&
         !options.repeatDelay &&
         options.repeatType !== "mirror" &&
-        options.damping !== 0;
+        options.damping !== 0 &&
+        options.type !== "inertia";
     if (!canAccelerateAnimation)
         return false;
-    let { keyframes, duration = 300, elapsed = 0, ease } = options;
+    let { keyframes, duration = 300, ease } = options;
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
@@ -40,7 +47,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         const sampleAnimation = animateValue({
             ...options,
             repeat: 0,
-            elapsed: 0,
+            delay: 0,
         });
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
@@ -49,8 +56,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
          * we're heading for an infinite loop.
          */
         let t = 0;
-        while (!state.done && t < 20000) {
-            state = sampleAnimation.sample(t, true);
+        while (!state.done && t < maxDuration) {
+            state = sampleAnimation.sample(t);
             pregeneratedKeyframes.push(state.value);
             t += sampleDelta;
         }
@@ -60,7 +67,6 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     }
     const animation = animateStyle(value.owner.current, valueName, keyframes, {
         ...options,
-        delay: -elapsed,
         duration,
         /**
          * This function is currently not called if ease is provided
@@ -90,10 +96,10 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
      */
     return {
         get currentTime() {
-            return animation.currentTime || 0;
+            return millisecondsToSeconds(animation.currentTime || 0);
         },
-        set currentTime(t) {
-            animation.currentTime = t;
+        set currentTime(newTime) {
+            animation.currentTime = secondsToMilliseconds(newTime);
         },
         stop: () => {
             /**

package/dist/es/frameloop/index.mjs

@@ -1,4 +1,3 @@
-import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';
 import { createRenderStep } from './create-render-step.mjs';
 import { frameData } from './data.mjs';
 
@@ -38,7 +37,7 @@ const processStep = (stepId) => steps[stepId].process(frameData);
 const processFrame = (timestamp) => {
     runNextFrame = false;
     frameData.delta = useDefaultElapsed
-        ? defaultTimestep
+        ? 1000 / 60
         : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);
     frameData.timestamp = timestamp;
     isProcessing = true;
@@ -46,14 +45,14 @@ const processFrame = (timestamp) => {
     isProcessing = false;
     if (runNextFrame) {
         useDefaultElapsed = false;
-        onNextFrame(processFrame);
+        requestAnimationFrame(processFrame);
     }
 };
 const startLoop = () => {
     runNextFrame = true;
     useDefaultElapsed = true;
     if (!isProcessing)
-        onNextFrame(processFrame);
+        requestAnimationFrame(processFrame);
 };
 
 export { cancelSync, flushSync, sync };

package/dist/es/gestures/pan/PanSession.mjs

@@ -1,6 +1,6 @@
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { sync, cancelSync } from '../../frameloop/index.mjs';
-import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
+import { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { pipe } from '../../utils/pipe.mjs';
 import { distance2D } from '../../utils/distance.mjs';
@@ -129,7 +129,7 @@ function getVelocity(history, timeDelta) {
     if (!timestampedPoint) {
         return { x: 0, y: 0 };
     }
-    const time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+    const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
     if (time === 0) {
         return { x: 0, y: 0 };
     }

package/dist/es/index.mjs

@@ -40,14 +40,13 @@ 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/legacy-popmotion/index.mjs';
-export { inertia } from './animation/legacy-popmotion/inertia.mjs';
+export { animateValue } from './animation/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';
 export { startOptimizedAppearAnimation } from './animation/optimized-appear/start.mjs';
 export { optimizedAppearDataAttribute } from './animation/optimized-appear/data-id.mjs';
-export { spring } from './animation/legacy-popmotion/spring.mjs';
+export { spring } from './animation/generators/spring/index.mjs';
 export { MotionContext } from './context/MotionContext/index.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';
 export { PresenceContext } from './context/PresenceContext.mjs';

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

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.2.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.3 may not work as expected.`);
+                warnOnce(nextValue.version === "10.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/time-conversion.mjs

@@ -5,5 +5,6 @@
  * @return milliseconds - Converted time in milliseconds.
  */
 const secondsToMilliseconds = (seconds) => seconds * 1000;
+const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
 
-export { secondsToMilliseconds };
+export { millisecondsToSeconds, secondsToMilliseconds };