motion 12.6.3 → 12.6.4

package/dist/cjs/index.js

@@ -1065,7 +1065,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
@@ -1340,6 +1340,16 @@ function motionValue(init, options) {
     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;
@@ -2135,6 +2145,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);
+    }
 }
 
 /**
@@ -4767,7 +4782,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/cjs/mini.js

@@ -239,6 +239,11 @@ function hydrateKeyframes(element, name, keyframes, pseudoElement) {
     return keyframes;
 }
 
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
 /**
@@ -535,6 +540,168 @@ function createGeneratorEasing(options, scale = 100, createGenerator) {
     };
 }
 
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+
+function createRenderStep(runNextFrame, stepName) {
+    /**
+     * We create and reuse two queues, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let thisFrame = new Set();
+    let nextFrame = new Set();
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    let latestFrameData = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    let numCalls = 0;
+    function triggerCallback(callback) {
+        if (toKeepAlive.has(callback)) {
+            step.schedule(callback);
+            runNextFrame();
+        }
+        numCalls++;
+        callback(latestFrameData);
+    }
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            if (!queue.has(callback))
+                queue.add(callback);
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            nextFrame.delete(callback);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            latestFrameData = frameData;
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Execute this frame
+            thisFrame.forEach(triggerCallback);
+            /**
+             * If we're recording stats then
+             */
+            if (stepName && statsBuffer.value) {
+                statsBuffer.value.frameloop[stepName].push(numCalls);
+            }
+            numCalls = 0;
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+const maxElapsed = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+    let runNextFrame = false;
+    let useDefaultElapsed = true;
+    const state = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    const flagRunNextFrame = () => (runNextFrame = true);
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
+        return acc;
+    }, {});
+    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const processBatch = () => {
+        const timestamp = performance.now();
+        runNextFrame = false;
+        {
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        }
+        state.timestamp = timestamp;
+        state.isProcessing = true;
+        // Unrolled render loop for better per-frame performance
+        read.process(state);
+        resolveKeyframes.process(state);
+        update.process(state);
+        preRender.process(state);
+        render.process(state);
+        postRender.process(state);
+        state.isProcessing = false;
+        if (runNextFrame && allowKeepAlive) {
+            useDefaultElapsed = false;
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const wake = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!state.isProcessing) {
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const schedule = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                wake();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancel = (process) => {
+        for (let i = 0; i < stepsOrder.length; i++) {
+            steps[stepsOrder[i]].cancel(process);
+        }
+    };
+    return { schedule, cancel, state, steps };
+}
+
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
 function resolveElements(elementOrSelector, scope, selectorCache) {
     if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
@@ -551,6 +718,16 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     return Array.from(elementOrSelector);
 }
 
+/**
+ * @deprecated
+ *
+ * Use cancelFrame(callback) instead.
+ */
+stepsOrder.reduce((acc, key) => {
+    acc[key] = (process) => cancelFrame(process);
+    return acc;
+}, {});
+
 const wrap = (min, max, v) => {
     const rangeSize = max - min;
     return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;

package/dist/cjs/react-client.js

@@ -886,7 +886,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
@@ -1161,6 +1161,16 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 
+/**
+ * @deprecated
+ *
+ * Use cancelFrame(callback) instead.
+ */
+stepsOrder.reduce((acc, key) => {
+    acc[key] = (process) => cancelFrame(process);
+    return acc;
+}, {});
+
 /**
  * Generate a list of every possible transform key.
  */
@@ -1247,6 +1257,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);
+    }
 }
 
 /**
@@ -9330,7 +9345,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/cjs/react-m.js

@@ -341,6 +341,16 @@ const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameStep
 const { schedule: microtask, cancel: cancelMicrotask } = 
 /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
+/**
+ * @deprecated
+ *
+ * Use cancelFrame(callback) instead.
+ */
+stepsOrder.reduce((acc, key) => {
+    acc[key] = (process) => cancelFrame(process);
+    return acc;
+}, {});
+
 /**
  * Convert camelCase to dash-case properties.
  */

package/dist/cjs/react-mini.js

@@ -236,6 +236,11 @@ function hydrateKeyframes(element, name, keyframes, pseudoElement) {
     return keyframes;
 }
 
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
 /**
@@ -501,6 +506,168 @@ function getValueTransition(transition, key) {
         transition);
 }
 
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+
+function createRenderStep(runNextFrame, stepName) {
+    /**
+     * We create and reuse two queues, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let thisFrame = new Set();
+    let nextFrame = new Set();
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    let latestFrameData = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    let numCalls = 0;
+    function triggerCallback(callback) {
+        if (toKeepAlive.has(callback)) {
+            step.schedule(callback);
+            runNextFrame();
+        }
+        numCalls++;
+        callback(latestFrameData);
+    }
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            if (!queue.has(callback))
+                queue.add(callback);
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            nextFrame.delete(callback);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            latestFrameData = frameData;
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Execute this frame
+            thisFrame.forEach(triggerCallback);
+            /**
+             * If we're recording stats then
+             */
+            if (stepName && statsBuffer.value) {
+                statsBuffer.value.frameloop[stepName].push(numCalls);
+            }
+            numCalls = 0;
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+const maxElapsed = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+    let runNextFrame = false;
+    let useDefaultElapsed = true;
+    const state = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    const flagRunNextFrame = () => (runNextFrame = true);
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
+        return acc;
+    }, {});
+    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const processBatch = () => {
+        const timestamp = performance.now();
+        runNextFrame = false;
+        {
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        }
+        state.timestamp = timestamp;
+        state.isProcessing = true;
+        // Unrolled render loop for better per-frame performance
+        read.process(state);
+        resolveKeyframes.process(state);
+        update.process(state);
+        preRender.process(state);
+        render.process(state);
+        postRender.process(state);
+        state.isProcessing = false;
+        if (runNextFrame && allowKeepAlive) {
+            useDefaultElapsed = false;
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const wake = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!state.isProcessing) {
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const schedule = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                wake();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancel = (process) => {
+        for (let i = 0; i < stepsOrder.length; i++) {
+            steps[stepsOrder[i]].cancel(process);
+        }
+    };
+    return { schedule, cancel, state, steps };
+}
+
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
 function resolveElements(elementOrSelector, scope, selectorCache) {
     if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
@@ -517,6 +684,16 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     return Array.from(elementOrSelector);
 }
 
+/**
+ * @deprecated
+ *
+ * Use cancelFrame(callback) instead.
+ */
+stepsOrder.reduce((acc, key) => {
+    acc[key] = (process) => cancelFrame(process);
+    return acc;
+}, {});
+
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;

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

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { animateSequence } from './sequence.mjs';
 import { animateSubject } from './subject.mjs';
 

package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.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';
 import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
 
 function resolveSubjects(subject, keyframes, scope, selectorCache) {

package/dist/es/framer-motion/dist/es/animation/animate/single-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 { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { animateMotionValue } from '../interfaces/motion-value.mjs';
 

package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs

@@ -6,6 +6,7 @@ import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generat
 import { isWaapiSupportedEasing } from '../../../../../motion-dom/dist/es/animation/waapi/easing/is-supported.mjs';
 import { supportsLinearEasing } from '../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 import { attachTimeline } from '../../../../../motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { anticipate } from '../../easing/anticipate.mjs';
 import { backInOut } from '../../easing/back.mjs';
 import { circInOut } from '../../easing/circ.mjs';

package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs

@@ -1,5 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { canAnimate } from './utils/can-animate.mjs';

package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -3,6 +3,7 @@ import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../mot
 import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 import { mix } from '../../utils/mix/index.mjs';

package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs

@@ -1,6 +1,7 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { frame, cancelFrame, frameData } 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';
 
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);

package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs

@@ -1,5 +1,6 @@
 import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
 import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { isAnimatable } from '../../utils/is-animatable.mjs';
 
 function hasKeyframesChanged(keyframes) {

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -3,6 +3,7 @@ import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/ti
 import { NativeAnimation } from '../../../../../../motion-dom/dist/es/animation/NativeAnimation.mjs';
 import { getValueTransition } from '../../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs

@@ -1,5 +1,6 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { createAnimationsFromSequence } from '../../sequence/create.mjs';
 import { animateElements } from './animate-elements.mjs';
 

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,5 +1,6 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { animateElements } from './animate-elements.mjs';
 
 const createScopedWaapiAnimate = (scope) => {

package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs

@@ -4,6 +4,7 @@ import { supportsLinearEasing } from '../../../../../../motion-dom/dist/es/utils
 import { generateLinearEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
 import { calcGeneratorDuration, maxGeneratorDuration } from '../../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
 import { createGeneratorEasing } from '../../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
+import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { clamp } from '../../../utils/clamp.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
 import { springDefaults } from './defaults.mjs';

package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs

@@ -4,6 +4,7 @@ import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-
 import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
 import { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';

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

@@ -1,6 +1,7 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { positionalKeys } from '../../render/html/utils/keys-position.mjs';
 import { setTarget } from '../../render/utils/setters.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';

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

@@ -1,6 +1,7 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { startWaapiAnimation } from '../../../../../motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 import { getOptimisedAppearId } from './get-appear-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';

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

@@ -3,6 +3,7 @@ import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
 import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.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';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { getEasingForSegment } from '../../easing/utils/get-easing-for-segment.mjs';
 import { defaultOffset } from '../../utils/offsets/default.mjs';
 import { fillOffset } from '../../utils/offsets/fill.mjs';

package/dist/es/framer-motion/dist/es/easing/utils/map.mjs

@@ -1,6 +1,7 @@
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { isBezierDefinition } from '../../../../../motion-dom/dist/es/utils/is-bezier-definition.mjs';
+import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 import { anticipate } from '../anticipate.mjs';
 import { backIn, backInOut, backOut } from '../back.mjs';
 import { circIn, circInOut, circOut } from '../circ.mjs';

package/dist/es/framer-motion/dist/es/events/event-info.mjs

@@ -1,5 +1,6 @@
 import '../../../../motion-utils/dist/es/errors.mjs';
 import { isPrimaryPointer } from '../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs';
+import '../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
 
 function extractEventInfo(event) {
     return {