framer-motion 10.2.2 → 10.2.4

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.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.2 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 };

package/dist/es/value/index.mjs

@@ -26,7 +26,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.2.2";
+        this.version = "10.2.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -272,7 +272,7 @@ class MotionValue {
         this.stop();
         return new Promise((resolve) => {
             this.hasAnimated = true;
-            this.animation = startAnimation(resolve) || null;
+            this.animation = startAnimation(resolve);
             if (this.events.animationStart) {
                 this.events.animationStart.notify();
             }
@@ -306,7 +306,7 @@ class MotionValue {
         return !!this.animation;
     }
     clearAnimation() {
-        this.animation = null;
+        delete this.animation;
     }
     /**
      * Destroy and clean up subscribers to this `MotionValue`.

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

@@ -2,8 +2,8 @@ import { useContext, useRef, useInsertionEffect } from 'react';
 import { isMotionValue } from './utils/is-motion-value.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { animateValue } from '../animation/legacy-popmotion/index.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
+import { animateValue } from '../animation/js/index.mjs';
 
 /**
  * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.

package/dist/es/value/use-velocity.mjs

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useMotionValueEvent } from '../utils/use-motion-value-event.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 
 /**
@@ -14,11 +14,9 @@ import { useMotionValue } from './use-motion-value.mjs';
  */
 function useVelocity(value) {
     const velocity = useMotionValue(value.getVelocity());
-    useEffect(() => {
-        return value.on("velocityChange", (newVelocity) => {
-            velocity.set(newVelocity);
-        });
-    }, [value]);
+    useMotionValueEvent(value, "velocityChange", (newVelocity) => {
+        velocity.set(newVelocity);
+    });
     return velocity;
 }