motion 12.6.3 → 12.6.4

package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,6 +1,7 @@
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { setDragLock } from '../../../../../motion-dom/dist/es/gestures/drag/state/set-active.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
 import { addDomEvent } from '../../events/add-dom-event.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';

package/dist/es/framer-motion/dist/es/gestures/hover.mjs

@@ -1,6 +1,7 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { hover } from '../../../../motion-dom/dist/es/gestures/hover.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { extractEventInfo } from '../events/event-info.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
 

package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs

@@ -2,6 +2,7 @@ import '../../../../../motion-utils/dist/es/errors.mjs';
 import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
 import { frame, cancelFrame, frameData } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { isPrimaryPointer } from '../../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { distance2D } from '../../utils/distance.mjs';

package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs

@@ -1,6 +1,7 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { Feature } from '../../motion/features/Feature.mjs';
 import { getContextWindow } from '../../utils/get-context-window.mjs';

package/dist/es/framer-motion/dist/es/gestures/press.mjs

@@ -1,6 +1,7 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { press } from '../../../../motion-dom/dist/es/gestures/press/index.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { extractEventInfo } from '../events/event-info.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
 

package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { microtask } from '../../../../../../motion-dom/dist/es/frameloop/microtask.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useContext, Component } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';

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

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { microtask } from '../../../../../motion-dom/dist/es/frameloop/microtask.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useContext, useRef, useInsertionEffect, useEffect } from 'react';
 import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';

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

@@ -7,6 +7,7 @@ import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/
 import { cancelFrame, frameData, frameSteps, frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { microtask } from '../../../../../motion-dom/dist/es/frameloop/microtask.mjs';
 import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 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';

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

@@ -4,6 +4,7 @@ import { warnOnce } from '../../../../motion-utils/dist/es/warn-once.mjs';
 import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { time } from '../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
 import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { isNumericalString } from '../utils/is-numerical-string.mjs';

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

@@ -1,5 +1,6 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 
 const resizeHandlers = new WeakMap();
 let observer;

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

@@ -1,6 +1,7 @@
 import { supportsScrollTimeline } from '../../../../../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs';
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../../motion-utils/dist/es/noop.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { observeTimeline } from './observe.mjs';
 import { scrollInfo } from './track.mjs';
 

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

@@ -1,5 +1,6 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { frame, cancelFrame } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 
 function observeTimeline(update, timeline) {
     let prevProgress;

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

@@ -1,5 +1,6 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { frame, cancelFrame, frameData } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { resize } from '../resize/index.mjs';
 import { createScrollInfo } from './info.mjs';
 import { createOnScrollHandler } from './on-scroll-handler.mjs';

package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs

@@ -1,5 +1,6 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 
 const thresholds = {
     some: 0,

package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
 import { camelToDash } from '../dom/utils/camel-to-dash.mjs';

package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { transformProps } from '../html/utils/keys-transform.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';

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

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';
 
 const toResolve = new Set();

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

@@ -1,6 +1,7 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { warnOnce } from '../../../../../motion-utils/dist/es/warn-once.mjs';
 import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 function updateMotionValuesFromProps(element, next, prev) {
@@ -18,7 +19,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.6.3", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3 may not work as expected.`);
+                warnOnce(nextValue.version === "12.6.4", `Attempting to mix Motion versions ${nextValue.version} with 12.6.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';
 

package/dist/es/framer-motion/dist/es/utils/delay.mjs

@@ -2,6 +2,7 @@ import '../../../../motion-utils/dist/es/errors.mjs';
 import { secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
 import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { time } from '../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 
 /**
  * Timeout defined in ms

package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 

package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useState, useCallback } from 'react';
 import { useIsMounted } from './use-is-mounted.mjs';
 

package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useRef, useEffect } from 'react';
 import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
 import { useForceUpdate } from './use-force-update.mjs';

package/dist/es/framer-motion/dist/es/value/use-combine-values.mjs

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { cancelFrame, frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 

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

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { collectMotionValues } from '../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useCombineMotionValues } from './use-combine-values.mjs';
 
 function useComputed(compute) {

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

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useContext, useState, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { useConstant } from '../utils/use-constant.mjs';

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

@@ -1,5 +1,6 @@
 import { warning } from '../../../../motion-utils/dist/es/errors.mjs';
 import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useEffect } from 'react';
 import { scroll } from '../render/dom/scroll/index.mjs';
 import { useConstant } from '../utils/use-constant.mjs';

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

@@ -1,6 +1,7 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
 import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useContext, useRef, useInsertionEffect } from 'react';
 import { animateValue } from '../animation/animators/MainThreadAnimation.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';

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

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { useMotionValueEvent } from '../utils/use-motion-value-event.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 

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

@@ -1,6 +1,7 @@
 import { addUniqueItem } from '../../../../../motion-utils/dist/es/array.mjs';
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { MotionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { getWillChangeName } from './get-will-change-name.mjs';
 
 class WillChangeMotionValue extends MotionValue {

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

@@ -1,3 +1,5 @@
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { MotionGlobalConfig } from '../../../../../motion-utils/dist/es/global-config.mjs';
 import { isWillChangeMotionValue } from './is.mjs';
 
 function addValueToWillChange(visualElement, key) {
@@ -9,6 +11,11 @@ function addValueToWillChange(visualElement, key) {
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key);
     }
+    else if (!willChange && MotionGlobalConfig.WillChange) {
+        const newWillChange = new MotionGlobalConfig.WillChange("auto");
+        visualElement.addValue("willChange", newWillChange);
+        newWillChange.add(key);
+    }
 }
 
 export { addValueToWillChange };

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

@@ -31,6 +31,7 @@ export { useTime } from '../../framer-motion/dist/es/value/use-time.mjs';
 export { useTransform } from '../../framer-motion/dist/es/value/use-transform.mjs';
 export { useVelocity } from '../../framer-motion/dist/es/value/use-velocity.mjs';
 export { useWillChange } from '../../framer-motion/dist/es/value/use-will-change/index.mjs';
+export { WillChangeMotionValue } from '../../framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs';
 export { resolveMotionValue } from '../../framer-motion/dist/es/value/utils/resolve-motion-value.mjs';
 export { useReducedMotion } from '../../framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs';
 export { useReducedMotionConfig } from '../../framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs';

package/dist/es/motion-dom/dist/es/frameloop/index-legacy.mjs

@@ -0,0 +1,12 @@
+import { cancelFrame } from './frame.mjs';
+import { stepsOrder } from './order.mjs';
+
+/**
+ * @deprecated
+ *
+ * Use cancelFrame(callback) instead.
+ */
+stepsOrder.reduce((acc, key) => {
+    acc[key] = (process) => cancelFrame(process);
+    return acc;
+}, {});

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

@@ -33,7 +33,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 = "12.6.3";
+        this.version = "12.6.4";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support

package/dist/motion.dev.js

@@ -1067,7 +1067,7 @@
              * 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 = "12.6.3";
+            this.version = "12.6.4";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -1342,6 +1342,16 @@
         return new MotionValue(init, options);
     }
 
+    /**
+     * @deprecated
+     *
+     * Use cancelFrame(callback) instead.
+     */
+    stepsOrder.reduce((acc, key) => {
+        acc[key] = (process) => cancelFrame(process);
+        return acc;
+    }, {});
+
     const clamp = (min, max, v) => {
         if (v > max)
             return max;
@@ -2137,6 +2147,11 @@
         if (isWillChangeMotionValue(willChange)) {
             return willChange.add(key);
         }
+        else if (!willChange && MotionGlobalConfig.WillChange) {
+            const newWillChange = new MotionGlobalConfig.WillChange("auto");
+            visualElement.addValue("willChange", newWillChange);
+            newWillChange.add(key);
+        }
     }
 
     /**
@@ -4768,7 +4783,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.6.3", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.6.4", `Attempting to mix Motion versions ${nextValue.version} with 12.6.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {