framer-motion 12.4.12 → 12.5.0

package/dist/cjs/dom.js

@@ -13,20 +13,10 @@ const clamp = (min, max, v) => {
     return v;
 };
 
-/*
-  Convert velocity into velocity per second
-
-  @param [number]: Unit per frame
-  @param [number]: Frame duration in ms
-*/
-function velocityPerSecond(velocity, frameDuration) {
-    return frameDuration ? velocity * (1000 / frameDuration) : 0;
-}
-
 const velocitySampleDuration = 5; // ms
 function calcGeneratorVelocity(resolveValue, t, current) {
     const prevT = Math.max(t - velocitySampleDuration, 0);
-    return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+    return motionUtils.velocityPerSecond(current - resolveValue(prevT), t - prevT);
 }
 
 const springDefaults = {
@@ -390,21 +380,11 @@ function calcNextTime(current, next, prev, labels) {
     }
 }
 
-function addUniqueItem(arr, item) {
-    if (arr.indexOf(item) === -1)
-        arr.push(item);
-}
-function removeItem(arr, item) {
-    const index = arr.indexOf(item);
-    if (index > -1)
-        arr.splice(index, 1);
-}
-
 function eraseKeyframes(sequence, startTime, endTime) {
     for (let i = 0; i < sequence.length; i++) {
         const keyframe = sequence[i];
         if (keyframe.at > startTime && keyframe.at < endTime) {
-            removeItem(sequence, keyframe);
+            motionUtils.removeItem(sequence, keyframe);
             // If we remove this item we have to push the pointer back one
             i--;
         }
@@ -692,178 +672,6 @@ const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 
 const visualElementStore = new WeakMap();
 
-const MotionGlobalConfig = {
-    skipAnimations: false,
-    useManualTiming: false,
-};
-
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
-
-const statsBuffer = {
-    value: null,
-    addProjectionMetrics: null,
-};
-
-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$1 = 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), 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, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motionUtils.noop, true);
-
 /**
  * Generate a list of every possible transform key.
  */
@@ -910,386 +718,6 @@ const resolveFinalValueInKeyframes = (v) => {
     return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
 };
 
-let now;
-function clearTime() {
-    now = undefined;
-}
-/**
- * An eventloop-synchronous alternative to performance.now().
- *
- * Ensures that time measurements remain consistent within a synchronous context.
- * Usually calling performance.now() twice within the same synchronous context
- * will return different values which isn't useful for animations when we're usually
- * trying to sync animations to the same frame.
- */
-const time = {
-    now: () => {
-        if (now === undefined) {
-            time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming
-                ? frameData.timestamp
-                : performance.now());
-        }
-        return now;
-    },
-    set: (newTime) => {
-        now = newTime;
-        queueMicrotask(clearTime);
-    },
-};
-
-class SubscriptionManager {
-    constructor() {
-        this.subscriptions = [];
-    }
-    add(handler) {
-        addUniqueItem(this.subscriptions, handler);
-        return () => removeItem(this.subscriptions, handler);
-    }
-    notify(a, b, c) {
-        const numSubscriptions = this.subscriptions.length;
-        if (!numSubscriptions)
-            return;
-        if (numSubscriptions === 1) {
-            /**
-             * If there's only a single handler we can just call it without invoking a loop.
-             */
-            this.subscriptions[0](a, b, c);
-        }
-        else {
-            for (let i = 0; i < numSubscriptions; i++) {
-                /**
-                 * Check whether the handler exists before firing as it's possible
-                 * the subscriptions were modified during this loop running.
-                 */
-                const handler = this.subscriptions[i];
-                handler && handler(a, b, c);
-            }
-        }
-    }
-    getSize() {
-        return this.subscriptions.length;
-    }
-    clear() {
-        this.subscriptions.length = 0;
-    }
-}
-
-const warned = new Set();
-function warnOnce(condition, message, element) {
-    if (condition || warned.has(message))
-        return;
-    console.warn(message);
-    if (element)
-        console.warn(element);
-    warned.add(message);
-}
-
-/**
- * Maximum time between the value of two frames, beyond which we
- * assume the velocity has since been 0.
- */
-const MAX_VELOCITY_DELTA = 30;
-const isFloat = (value) => {
-    return !isNaN(parseFloat(value));
-};
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-class MotionValue {
-    /**
-     * @param init - The initiating value
-     * @param config - Optional configuration options
-     *
-     * -  `transformer`: A function to transform incoming values with.
-     *
-     * @internal
-     */
-    constructor(init, options = {}) {
-        /**
-         * 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.4.12";
-        /**
-         * 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
-         * other value types.
-         *
-         * @internal
-         */
-        this.canTrackVelocity = null;
-        /**
-         * An object containing a SubscriptionManager for each active event.
-         */
-        this.events = {};
-        this.updateAndNotify = (v, render = true) => {
-            const currentTime = time.now();
-            /**
-             * If we're updating the value during another frame or eventloop
-             * than the previous frame, then the we set the previous frame value
-             * to current.
-             */
-            if (this.updatedAt !== currentTime) {
-                this.setPrevFrameValue();
-            }
-            this.prev = this.current;
-            this.setCurrent(v);
-            // Update update subscribers
-            if (this.current !== this.prev && this.events.change) {
-                this.events.change.notify(this.current);
-            }
-            // Update render subscribers
-            if (render && this.events.renderRequest) {
-                this.events.renderRequest.notify(this.current);
-            }
-        };
-        this.hasAnimated = false;
-        this.setCurrent(init);
-        this.owner = options.owner;
-    }
-    setCurrent(current) {
-        this.current = current;
-        this.updatedAt = time.now();
-        if (this.canTrackVelocity === null && current !== undefined) {
-            this.canTrackVelocity = isFloat(this.current);
-        }
-    }
-    setPrevFrameValue(prevFrameValue = this.current) {
-        this.prevFrameValue = prevFrameValue;
-        this.prevUpdatedAt = this.updatedAt;
-    }
-    /**
-     * Adds a function that will be notified when the `MotionValue` is updated.
-     *
-     * It returns a function that, when called, will cancel the subscription.
-     *
-     * When calling `onChange` inside a React component, it should be wrapped with the
-     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-     * from the `useEffect` function to ensure you don't add duplicate subscribers..
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const x = useMotionValue(0)
-     *   const y = useMotionValue(0)
-     *   const opacity = useMotionValue(1)
-     *
-     *   useEffect(() => {
-     *     function updateOpacity() {
-     *       const maxXY = Math.max(x.get(), y.get())
-     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-     *       opacity.set(newOpacity)
-     *     }
-     *
-     *     const unsubscribeX = x.on("change", updateOpacity)
-     *     const unsubscribeY = y.on("change", updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
-     * }
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @deprecated
-     */
-    onChange(subscription) {
-        if (process.env.NODE_ENV !== "production") {
-            warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
-        }
-        return this.on("change", subscription);
-    }
-    on(eventName, callback) {
-        if (!this.events[eventName]) {
-            this.events[eventName] = new SubscriptionManager();
-        }
-        const unsubscribe = this.events[eventName].add(callback);
-        if (eventName === "change") {
-            return () => {
-                unsubscribe();
-                /**
-                 * If we have no more change listeners by the start
-                 * of the next frame, stop active animations.
-                 */
-                frame.read(() => {
-                    if (!this.events.change.getSize()) {
-                        this.stop();
-                    }
-                });
-            };
-        }
-        return unsubscribe;
-    }
-    clearListeners() {
-        for (const eventManagers in this.events) {
-            this.events[eventManagers].clear();
-        }
-    }
-    /**
-     * Attaches a passive effect to the `MotionValue`.
-     *
-     * @internal
-     */
-    attach(passiveEffect, stopPassiveEffect) {
-        this.passiveEffect = passiveEffect;
-        this.stopPassiveEffect = stopPassiveEffect;
-    }
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
-     * ```
-     *
-     * @param latest - Latest value to set.
-     * @param render - Whether to notify render subscribers. Defaults to `true`
-     *
-     * @public
-     */
-    set(v, render = true) {
-        if (!render || !this.passiveEffect) {
-            this.updateAndNotify(v, render);
-        }
-        else {
-            this.passiveEffect(v, this.updateAndNotify);
-        }
-    }
-    setWithVelocity(prev, current, delta) {
-        this.set(current);
-        this.prev = undefined;
-        this.prevFrameValue = prev;
-        this.prevUpdatedAt = this.updatedAt - delta;
-    }
-    /**
-     * Set the state of the `MotionValue`, stopping any active animations,
-     * effects, and resets velocity to `0`.
-     */
-    jump(v, endAnimation = true) {
-        this.updateAndNotify(v);
-        this.prev = v;
-        this.prevUpdatedAt = this.prevFrameValue = undefined;
-        endAnimation && this.stop();
-        if (this.stopPassiveEffect)
-            this.stopPassiveEffect();
-    }
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get() {
-        return this.current;
-    }
-    /**
-     * @public
-     */
-    getPrevious() {
-        return this.prev;
-    }
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity() {
-        const currentTime = time.now();
-        if (!this.canTrackVelocity ||
-            this.prevFrameValue === undefined ||
-            currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
-            return 0;
-        }
-        const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-        // Casts because of parseFloat's poor typing
-        return velocityPerSecond(parseFloat(this.current) -
-            parseFloat(this.prevFrameValue), delta);
-    }
-    /**
-     * Registers a new animation to control this `MotionValue`. Only one
-     * animation can drive a `MotionValue` at one time.
-     *
-     * ```jsx
-     * value.start()
-     * ```
-     *
-     * @param animation - A function that starts the provided animation
-     *
-     * @internal
-     */
-    start(startAnimation) {
-        this.stop();
-        return new Promise((resolve) => {
-            this.hasAnimated = true;
-            this.animation = startAnimation(resolve);
-            if (this.events.animationStart) {
-                this.events.animationStart.notify();
-            }
-        }).then(() => {
-            if (this.events.animationComplete) {
-                this.events.animationComplete.notify();
-            }
-            this.clearAnimation();
-        });
-    }
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop() {
-        if (this.animation) {
-            this.animation.stop();
-            if (this.events.animationCancel) {
-                this.events.animationCancel.notify();
-            }
-        }
-        this.clearAnimation();
-    }
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating() {
-        return !!this.animation;
-    }
-    clearAnimation() {
-        delete this.animation;
-    }
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
-     *
-     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-     * created a `MotionValue` via the `motionValue` function.
-     *
-     * @public
-     */
-    destroy() {
-        this.clearListeners();
-        this.stop();
-        if (this.stopPassiveEffect) {
-            this.stopPassiveEffect();
-        }
-    }
-}
-function motionValue(init, options) {
-    return new MotionValue(init, options);
-}
-
 function getValueState(visualElement) {
     const state = [{}, {}];
     visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
@@ -1339,7 +767,7 @@ function setMotionValue(visualElement, key, value) {
         visualElement.getValue(key).set(value);
     }
     else {
-        visualElement.addValue(key, motionValue(value));
+        visualElement.addValue(key, motionDom.motionValue(value));
     }
 }
 function setTarget(visualElement, definition) {
@@ -1877,25 +1305,89 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
     }
 }
 
-const isNumOrPxType = (v) => v === number || v === px;
-const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-    if (transform === "none" || !transform)
-        return 0;
-    const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
-    if (matrix3d) {
-        return getPosFromMatrix(matrix3d[1], pos3);
+const radToDeg = (rad) => (rad * 180) / Math.PI;
+const rotate = (v) => {
+    const angle = radToDeg(Math.atan2(v[1], v[0]));
+    return rebaseAngle(angle);
+};
+const matrix2dParsers = {
+    x: 4,
+    y: 5,
+    translateX: 4,
+    translateY: 5,
+    scaleX: 0,
+    scaleY: 3,
+    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+    rotate,
+    rotateZ: rotate,
+    skewX: (v) => radToDeg(Math.atan(v[1])),
+    skewY: (v) => radToDeg(Math.atan(v[2])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+};
+const rebaseAngle = (angle) => {
+    angle = angle % 360;
+    if (angle < 0)
+        angle += 360;
+    return angle;
+};
+const rotateZ = rotate;
+const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+const matrix3dParsers = {
+    x: 12,
+    y: 13,
+    z: 14,
+    translateX: 12,
+    translateY: 13,
+    translateZ: 14,
+    scaleX,
+    scaleY,
+    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+    rotateZ,
+    rotate: rotateZ,
+    skewX: (v) => radToDeg(Math.atan(v[4])),
+    skewY: (v) => radToDeg(Math.atan(v[1])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+};
+function defaultTransformValue(name) {
+    return name.includes("scale") ? 1 : 0;
+}
+function parseValueFromTransform(transform, name) {
+    if (!transform || transform === "none") {
+        return defaultTransformValue(name);
     }
-    else {
-        const matrix = transform.match(/^matrix\((.+)\)$/u);
-        if (matrix) {
-            return getPosFromMatrix(matrix[1], pos2);
-        }
-        else {
-            return 0;
-        }
+    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+    let parsers;
+    let match;
+    if (matrix3dMatch) {
+        parsers = matrix3dParsers;
+        match = matrix3dMatch;
     }
+    else {
+        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+        parsers = matrix2dParsers;
+        match = matrix2dMatch;
+    }
+    if (!match) {
+        return defaultTransformValue(name);
+    }
+    const valueParser = parsers[name];
+    const values = match[1].split(",").map(convertTransformToNumber);
+    return typeof valueParser === "function"
+        ? valueParser(values)
+        : values[valueParser];
+}
+const readTransformValue = (instance, name) => {
+    const { transform = "none" } = getComputedStyle(instance);
+    return parseValueFromTransform(transform, name);
 };
+function convertTransformToNumber(value) {
+    return parseFloat(value.trim());
+}
+
+const isNumOrPxType = (v) => v === number || v === px;
 const transformKeys = new Set(["x", "y", "z"]);
 const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
@@ -1918,8 +1410,8 @@ const positionalValues = {
     bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
     right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
     // Transform
-    x: getTranslateFromMatrix(4, 13),
-    y: getTranslateFromMatrix(5, 14),
+    x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
+    y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
 };
 // Alias translate longform names
 positionalValues.translateX = positionalValues.x;
@@ -2019,8 +1511,8 @@ class KeyframeResolver {
             toResolve.add(this);
             if (!isScheduled) {
                 isScheduled = true;
-                frame.read(readAllKeyframes);
-                frame.resolveKeyframes(measureAllKeyframes);
+                motionDom.frame.read(readAllKeyframes);
+                motionDom.frame.resolveKeyframes(measureAllKeyframes);
             }
         }
         else {
@@ -2373,7 +1865,7 @@ class BaseAnimation {
         // Track whether the animation has been stopped. Stopped animations won't restart.
         this.isStopped = false;
         this.hasAttemptedResolve = false;
-        this.createdAt = time.now();
+        this.createdAt = motionDom.time.now();
         this.options = {
             autoplay,
             delay,
@@ -2419,7 +1911,7 @@ class BaseAnimation {
      * Otherwise, it will call initPlayback on the implementing class.
      */
     onKeyframesResolved(keyframes, finalKeyframe) {
-        this.resolvedAt = time.now();
+        this.resolvedAt = motionDom.time.now();
         this.hasAttemptedResolve = true;
         const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options;
         /**
@@ -2908,13 +2400,13 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "e
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);
     return {
-        start: () => frame.update(passTimestamp, true),
-        stop: () => cancelFrame(passTimestamp),
+        start: () => motionDom.frame.update(passTimestamp, true),
+        stop: () => motionDom.cancelFrame(passTimestamp),
         /**
          * If we're processing this frame we can use the
          * framelocked timestamp to keep things in sync.
          */
-        now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
+        now: () => (motionDom.frameData.isProcessing ? motionDom.frameData.timestamp : motionDom.time.now()),
     };
 };
 
@@ -3046,6 +2538,7 @@ class MainThreadAnimation extends BaseAnimation {
     }
     onPostResolved() {
         const { autoplay = true } = this.options;
+        motionDom.activeAnimations.mainThread++;
         this.play();
         if (this.pendingPlayState === "paused" || !autoplay) {
             this.pause();
@@ -3277,6 +2770,7 @@ class MainThreadAnimation extends BaseAnimation {
         this.updateFinishedPromise();
         this.startTime = this.cancelTime = null;
         this.resolver.cancel();
+        motionDom.activeAnimations.mainThread--;
     }
     stopDriver() {
         if (!this.driver)
@@ -3313,6 +2807,9 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
+    if (motionDom.statsBuffer.value) {
+        motionDom.activeAnimations.waapi++;
+    }
     const animation = element.animate(keyframeOptions, {
         delay,
         duration,
@@ -3321,6 +2818,11 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    if (motionDom.statsBuffer.value) {
+        animation.finished.finally(() => {
+            motionDom.activeAnimations.waapi--;
+        });
+    }
     return animation;
 }
 
@@ -3739,6 +3241,11 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
+    if (motionUtils.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.
@@ -3752,7 +3259,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     if (shouldSkip && !isHandoff && value.get() !== undefined) {
         const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
         if (finalKeyframe !== undefined) {
-            frame.update(() => {
+            motionDom.frame.update(() => {
                 options.onUpdate(finalKeyframe);
                 options.onComplete();
             });
@@ -3814,7 +3321,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
         if (window.MotionHandoffAnimation) {
             const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
-                const startTime = window.MotionHandoffAnimation(appearId, key, frame);
+                const startTime = window.MotionHandoffAnimation(appearId, key, motionDom.frame);
                 if (startTime !== null) {
                     valueTransition.startTime = startTime;
                     isHandoff = true;
@@ -3832,7 +3339,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     }
     if (transitionEnd) {
         Promise.all(animations).then(() => {
-            frame.update(() => {
+            motionDom.frame.update(() => {
                 transitionEnd && setTarget(visualElement, transitionEnd);
             });
         });
@@ -3954,7 +3461,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.4.12", `Attempting to mix Motion versions ${nextValue.version} with 12.4.12 may not work as expected.`);
+                motionUtils.warnOnce(nextValue.version === "12.5.0", `Attempting to mix Motion versions ${nextValue.version} with 12.5.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3962,7 +3469,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * If we're swapping from a motion value to a static value,
              * create a new motion value from that
              */
-            element.addValue(key, motionValue(nextValue, { owner: element }));
+            element.addValue(key, motionDom.motionValue(nextValue, { owner: element }));
         }
         else if (prevValue !== nextValue) {
             /**
@@ -3981,7 +3488,7 @@ function updateMotionValuesFromProps(element, next, prev) {
             }
             else {
                 const latestValue = element.getStaticValue(key);
-                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
+                element.addValue(key, motionDom.motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
             }
         }
     }
@@ -4081,10 +3588,10 @@ class VisualElement {
         };
         this.renderScheduledAt = 0.0;
         this.scheduleRender = () => {
-            const now = time.now();
+            const now = motionDom.time.now();
             if (this.renderScheduledAt < now) {
                 this.renderScheduledAt = now;
-                frame.render(this.render, false, true);
+                motionDom.frame.render(this.render, false, true);
             }
         };
         const { latestValues, renderState, onUpdate } = visualState;
@@ -4144,7 +3651,7 @@ class VisualElement {
                     ? true
                     : prefersReducedMotion.current;
         if (process.env.NODE_ENV !== "production") {
-            warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+            motionUtils.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
         }
         if (this.parent)
             this.parent.children.add(this);
@@ -4152,8 +3659,8 @@ class VisualElement {
     }
     unmount() {
         this.projection && this.projection.unmount();
-        cancelFrame(this.notifyUpdate);
-        cancelFrame(this.render);
+        motionDom.cancelFrame(this.notifyUpdate);
+        motionDom.cancelFrame(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
         this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
@@ -4180,7 +3687,7 @@ class VisualElement {
         }
         const removeOnChange = value.on("change", (latestValue) => {
             this.latestValues[key] = latestValue;
-            this.props.onUpdate && frame.preRender(this.notifyUpdate);
+            this.props.onUpdate && motionDom.frame.preRender(this.notifyUpdate);
             if (valueIsTransform && this.projection) {
                 this.projection.isTransformDirty = true;
             }
@@ -4367,7 +3874,7 @@ class VisualElement {
         }
         let value = this.values.get(key);
         if (value === undefined && defaultValue !== undefined) {
-            value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });
+            value = motionDom.motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });
             this.addValue(key, value);
         }
         return value;
@@ -4440,7 +3947,7 @@ class VisualElement {
     }
     on(eventName, callback) {
         if (!this.events[eventName]) {
-            this.events[eventName] = new SubscriptionManager();
+            this.events[eventName] = new motionUtils.SubscriptionManager();
         }
         return this.events[eventName].add(callback);
     }
@@ -4835,7 +4342,7 @@ class SVGVisualElement extends DOMVisualElement {
     }
     onBindTransform() {
         if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
+            motionDom.frame.postRender(this.updateDimensions);
         }
     }
     build(renderState, latestValues, props) {
@@ -4894,8 +4401,7 @@ class HTMLVisualElement extends DOMVisualElement {
     }
     readValueFromInstance(instance, key) {
         if (transformProps.has(key)) {
-            const defaultType = getDefaultValueType(key);
-            return defaultType ? defaultType.default || 0 : 0;
+            return readTransformValue(instance, key);
         }
         else {
             const computedStyle = getComputedStyle$1(instance);
@@ -4991,9 +4497,9 @@ function createObjectVisualElement(subject) {
 }
 
 function animateSingleValue(value, keyframes, options) {
-    const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
-    motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
-    return motionValue$1.animation;
+    const motionValue = isMotionValue(value) ? value : motionDom.motionValue(value);
+    motionValue.start(animateMotionValue("", motionValue, keyframes, options));
+    return motionValue.animation;
 }
 
 function isSingleValue(subject, keyframes) {
@@ -5245,8 +4751,8 @@ function observeTimeline(update, timeline) {
         }
         prevProgress = progress;
     };
-    frame.update(onFrame, true);
-    return () => cancelFrame(onFrame);
+    motionDom.frame.update(onFrame, true);
+    return () => motionDom.cancelFrame(onFrame);
 }
 
 const resizeHandlers = new WeakMap();
@@ -5387,7 +4893,7 @@ function updateAxisInfo(element, axisName, info, time) {
     axis.velocity =
         elapsed > maxElapsed
             ? 0
-            : velocityPerSecond(axis.current - prev, elapsed);
+            : motionUtils.velocityPerSecond(axis.current - prev, elapsed);
 }
 function updateScrollInfo(element, info, time) {
     updateAxisInfo(element, "x", info, time);
@@ -5612,7 +5118,7 @@ function measure(container, target = container, info) {
      */
     if (process.env.NODE_ENV !== "production") {
         if (container && target && target !== container) {
-            warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
+            motionUtils.warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
         }
     }
 }
@@ -5660,7 +5166,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         };
         const updateAll = () => {
             for (const handler of containerHandlers) {
-                handler.update(frameData.timestamp);
+                handler.update(motionDom.frameData.timestamp);
             }
         };
         const notifyAll = () => {
@@ -5668,9 +5174,9 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
                 handler.notify();
         };
         const listener = () => {
-            frame.read(measureAll, false, true);
-            frame.read(updateAll, false, true);
-            frame.update(notifyAll, false, true);
+            motionDom.frame.read(measureAll, false, true);
+            motionDom.frame.read(updateAll, false, true);
+            motionDom.frame.update(notifyAll, false, true);
         };
         scrollListeners.set(container, listener);
         const target = getEventTarget(container);
@@ -5681,10 +5187,10 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         target.addEventListener("scroll", listener, { passive: true });
     }
     const listener = scrollListeners.get(container);
-    frame.read(listener, false, true);
+    motionDom.frame.read(listener, false, true);
     return () => {
         var _a;
-        cancelFrame(listener);
+        motionDom.cancelFrame(listener);
         /**
          * Check if we even have any handlers for this container.
          */
@@ -5867,16 +5373,16 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
  * Timeout defined in ms
  */
 function delay(callback, timeout) {
-    const start = time.now();
+    const start = motionDom.time.now();
     const checkElapsed = ({ timestamp }) => {
         const elapsed = timestamp - start;
         if (elapsed >= timeout) {
-            cancelFrame(checkElapsed);
+            motionDom.cancelFrame(checkElapsed);
             callback(elapsed - timeout);
         }
     };
-    frame.read(checkElapsed, true);
-    return () => cancelFrame(checkElapsed);
+    motionDom.frame.read(checkElapsed, true);
+    return () => motionDom.cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
     return delay(callback, motionUtils.secondsToMilliseconds(timeout));
@@ -5908,22 +5414,22 @@ function transform(...args) {
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 
-/**
- * @deprecated
- *
- * Import as `frame` instead.
- */
-const sync = frame;
-/**
- * @deprecated
- *
- * Use cancelFrame(callback) instead.
- */
-const cancelSync = stepsOrder.reduce((acc, key) => {
-    acc[key] = (process) => cancelFrame(process);
-    return acc;
-}, {});
-
+Object.defineProperty(exports, "MotionValue", {
+    enumerable: true,
+    get: function () { return motionDom.MotionValue; }
+});
+Object.defineProperty(exports, "cancelFrame", {
+    enumerable: true,
+    get: function () { return motionDom.cancelFrame; }
+});
+Object.defineProperty(exports, "frame", {
+    enumerable: true,
+    get: function () { return motionDom.frame; }
+});
+Object.defineProperty(exports, "frameData", {
+    enumerable: true,
+    get: function () { return motionDom.frameData; }
+});
 Object.defineProperty(exports, "hover", {
     enumerable: true,
     get: function () { return motionDom.hover; }
@@ -5932,10 +5438,18 @@ Object.defineProperty(exports, "isDragActive", {
     enumerable: true,
     get: function () { return motionDom.isDragActive; }
 });
+Object.defineProperty(exports, "motionValue", {
+    enumerable: true,
+    get: function () { return motionDom.motionValue; }
+});
 Object.defineProperty(exports, "press", {
     enumerable: true,
     get: function () { return motionDom.press; }
 });
+Object.defineProperty(exports, "time", {
+    enumerable: true,
+    get: function () { return motionDom.time; }
+});
 Object.defineProperty(exports, "invariant", {
     enumerable: true,
     get: function () { return motionUtils.invariant; }
@@ -5948,15 +5462,12 @@ Object.defineProperty(exports, "progress", {
     enumerable: true,
     get: function () { return motionUtils.progress; }
 });
-exports.MotionValue = MotionValue;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.anticipate = anticipate;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
-exports.cancelFrame = cancelFrame;
-exports.cancelSync = cancelSync;
 exports.circIn = circIn;
 exports.circInOut = circInOut;
 exports.circOut = circOut;
@@ -5969,16 +5480,12 @@ exports.distance2D = distance2D;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
-exports.frame = frame;
-exports.frameData = frameData;
-exports.frameSteps = frameSteps;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.interpolate = interpolate;
 exports.keyframes = keyframes;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
-exports.motionValue = motionValue;
 exports.pipe = pipe;
 exports.reverseEasing = reverseEasing;
 exports.scroll = scroll;
@@ -5986,7 +5493,5 @@ exports.scrollInfo = scrollInfo;
 exports.spring = spring;
 exports.stagger = stagger;
 exports.steps = steps;
-exports.sync = sync;
-exports.time = time;
 exports.transform = transform;
 exports.wrap = wrap;