motion 12.6.4-alpha.0 → 12.6.4

package/dist/cjs/debug.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 if (process.env.NODE_ENV !== "production") ;
 
-const MotionGlobalConfig = {};
-
 /*#__NO_SIDE_EFFECTS__*/
 const noop = (any) => any;
 
@@ -134,11 +132,9 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
     const processBatch = () => {
-        const timestamp = MotionGlobalConfig.useManualTiming
-            ? state.timestamp
-            : performance.now();
+        const timestamp = performance.now();
         runNextFrame = false;
-        if (!MotionGlobalConfig.useManualTiming) {
+        {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);

package/dist/cjs/index.js

@@ -27,7 +27,10 @@ if (process.env.NODE_ENV !== "production") {
     };
 }
 
-const MotionGlobalConfig = {};
+const MotionGlobalConfig = {
+    skipAnimations: false,
+    useManualTiming: false,
+};
 
 /*#__NO_SIDE_EFFECTS__*/
 function memo(callback) {
@@ -737,11 +740,9 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
     const processBatch = () => {
-        const timestamp = MotionGlobalConfig.useManualTiming
-            ? state.timestamp
-            : performance.now();
+        const timestamp = performance.now();
         runNextFrame = false;
-        if (!MotionGlobalConfig.useManualTiming) {
+        {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
@@ -1064,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.4-alpha.0";
+        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
@@ -1339,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;
@@ -2134,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);
+    }
 }
 
 /**
@@ -3619,7 +3635,7 @@ const easingDefinitionToFunction = (definition) => {
 
 function createMixers(output, ease, customMixer) {
     const mixers = [];
-    const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
+    const mixerFactory = customMixer || mix;
     const numMixers = output.length - 1;
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
@@ -4552,11 +4568,6 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
-    if (MotionGlobalConfig.skipAnimations) {
-        shouldSkip = true;
-        options.duration = 0;
-        options.delay = 0;
-    }
     /**
      * If the transition type or easing has been explicitly set by the user
      * then we don't want to allow flattening the animation.
@@ -4771,7 +4782,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.6.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.6.4-alpha.0 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)) {
@@ -6626,7 +6637,6 @@ exports.easeOut = easeOut;
 exports.frame = frame;
 exports.frameData = frameData;
 exports.hover = hover;
-exports.hslaToRgba = hslaToRgba;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.interpolate = interpolate;

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

@@ -76,7 +76,10 @@ if (process.env.NODE_ENV !== "production") {
     };
 }
 
-const MotionGlobalConfig = {};
+const MotionGlobalConfig = {
+    skipAnimations: false,
+    useManualTiming: false,
+};
 
 /*#__NO_SIDE_EFFECTS__*/
 function memo(callback) {
@@ -530,11 +533,9 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
     const processBatch = () => {
-        const timestamp = MotionGlobalConfig.useManualTiming
-            ? state.timestamp
-            : performance.now();
+        const timestamp = performance.now();
         runNextFrame = false;
-        if (!MotionGlobalConfig.useManualTiming) {
+        {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
@@ -885,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.4-alpha.0";
+        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
@@ -1160,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.
  */
@@ -1246,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);
+    }
 }
 
 /**
@@ -3046,7 +3062,7 @@ const easingDefinitionToFunction = (definition) => {
 
 function createMixers(output, ease, customMixer) {
     const mixers = [];
-    const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
+    const mixerFactory = customMixer || mix;
     const numMixers = output.length - 1;
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
@@ -3993,11 +4009,6 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
-    if (MotionGlobalConfig.skipAnimations) {
-        shouldSkip = true;
-        options.duration = 0;
-        options.delay = 0;
-    }
     /**
      * If the transition type or easing has been explicitly set by the user
      * then we don't want to allow flattening the animation.
@@ -9334,7 +9345,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.6.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.6.4-alpha.0 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

@@ -20,8 +20,6 @@ if (process.env.NODE_ENV !== "production") {
     };
 }
 
-const MotionGlobalConfig = {};
-
 /*#__NO_SIDE_EFFECTS__*/
 const noop = (any) => any;
 
@@ -292,11 +290,9 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
     const processBatch = () => {
-        const timestamp = MotionGlobalConfig.useManualTiming
-            ? state.timestamp
-            : performance.now();
+        const timestamp = performance.now();
         runNextFrame = false;
-        if (!MotionGlobalConfig.useManualTiming) {
+        {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
@@ -345,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';