motion 12.3.0 → 12.4.0

package/dist/cjs/react-m.js

@@ -187,7 +187,21 @@ const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCas
 const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
-function createRenderStep(runNextFrame) {
+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.
@@ -209,11 +223,13 @@ function createRenderStep(runNextFrame) {
         timestamp: 0.0,
         isProcessing: false,
     };
+    let numCalls = 0;
     function triggerCallback(callback) {
         if (toKeepAlive.has(callback)) {
             step.schedule(callback);
             runNextFrame();
         }
+        numCalls++;
         callback(latestFrameData);
     }
     const step = {
@@ -254,6 +270,13 @@ function createRenderStep(runNextFrame) {
             [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();
@@ -267,14 +290,6 @@ function createRenderStep(runNextFrame) {
     return step;
 }
 
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
 const maxElapsed = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
@@ -286,16 +301,18 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     };
     const flagRunNextFrame = () => (runNextFrame = true);
     const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame);
+        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.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

package/dist/cjs/react-mini.js

@@ -392,7 +392,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    return element.animate(keyframeOptions, {
+    const animation = element.animate(keyframeOptions, {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
@@ -400,6 +400,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    return animation;
 }
 
 const createUnitType = (unit) => ({
@@ -459,7 +460,7 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyfr
 }
 
 function setCSSVar(element, name, value) {
-    element.style.setProperty(`--${name}`, value);
+    element.style.setProperty(name, value);
 }
 function setStyle(element, name, value) {
     element.style[name] = value;

package/dist/debug.d.ts

@@ -0,0 +1 @@
+export * from 'framer-motion/debug';

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

@@ -3,6 +3,7 @@ import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../mot
 import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
+import { activeAnimations } from '../../stats/animation-count.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 import { mix } from '../../utils/mix/index.mjs';
 import { pipe } from '../../utils/pipe.mjs';
@@ -140,6 +141,7 @@ class MainThreadAnimation extends BaseAnimation {
     }
     onPostResolved() {
         const { autoplay = true } = this.options;
+        activeAnimations.mainThread++;
         this.play();
         if (this.pendingPlayState === "paused" || !autoplay) {
             this.pause();
@@ -371,6 +373,7 @@ class MainThreadAnimation extends BaseAnimation {
         this.updateFinishedPromise();
         this.startTime = this.cancelTime = null;
         this.resolver.cancel();
+        activeAnimations.mainThread--;
     }
     stopDriver() {
         if (!this.driver)

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

@@ -1,5 +1,7 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { mapEasingToNativeEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/easing.mjs';
+import { activeAnimations } from '../../../stats/animation-count.mjs';
+import { statsBuffer } from '../../../stats/buffer.mjs';
 
 function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
     const keyframeOptions = { [valueName]: keyframes };
@@ -11,7 +13,10 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    return element.animate(keyframeOptions, {
+    if (statsBuffer.value) {
+        activeAnimations.waapi++;
+    }
+    const animation = element.animate(keyframeOptions, {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
@@ -19,6 +24,12 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    if (statsBuffer.value) {
+        animation.finished.finally(() => {
+            activeAnimations.waapi--;
+        });
+    }
+    return animation;
 }
 
 export { startWaapiAnimation };

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

@@ -1,5 +1,5 @@
 function setCSSVar(element, name, value) {
-    element.style.setProperty(`--${name}`, value);
+    element.style.setProperty(name, value);
 }
 function setStyle(element, name, value) {
     element.style[name] = value;

package/dist/es/framer-motion/dist/es/frameloop/batcher.mjs

@@ -1,14 +1,7 @@
 import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';
+import { stepsOrder } from './order.mjs';
 import { createRenderStep } from './render-step.mjs';
 
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
 const maxElapsed = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
@@ -20,7 +13,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     };
     const flagRunNextFrame = () => (runNextFrame = true);
     const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame);
+        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
@@ -29,9 +22,11 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
             ? state.timestamp
             : performance.now();
         runNextFrame = false;
-        state.delta = useDefaultElapsed
-            ? 1000 / 60
-            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        if (!MotionGlobalConfig.useManualTiming) {
+            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
@@ -71,4 +66,4 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-export { createRenderBatcher, stepsOrder };
+export { createRenderBatcher };

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

@@ -1,4 +1,4 @@
-import { stepsOrder } from './batcher.mjs';
+import { stepsOrder } from './order.mjs';
 import { frame, cancelFrame } from './frame.mjs';
 
 /**

package/dist/es/framer-motion/dist/es/frameloop/order.mjs

@@ -0,0 +1,10 @@
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+
+export { stepsOrder };

package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs

@@ -1,4 +1,6 @@
-function createRenderStep(runNextFrame) {
+import { statsBuffer } from '../stats/buffer.mjs';
+
+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.
@@ -20,11 +22,13 @@ function createRenderStep(runNextFrame) {
         timestamp: 0.0,
         isProcessing: false,
     };
+    let numCalls = 0;
     function triggerCallback(callback) {
         if (toKeepAlive.has(callback)) {
             step.schedule(callback);
             runNextFrame();
         }
+        numCalls++;
         callback(latestFrameData);
     }
     const step = {
@@ -65,6 +69,13 @@ function createRenderStep(runNextFrame) {
             [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();

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

@@ -8,6 +8,8 @@ import { microtask } from '../../frameloop/microtask.mjs';
 import { time } from '../../frameloop/sync-time.mjs';
 import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
+import { activeAnimations } from '../../stats/animation-count.mjs';
+import { statsBuffer } from '../../stats/buffer.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 import { delay } from '../../utils/delay.mjs';
 import { mixNumber } from '../../utils/mix/number.mjs';
@@ -28,12 +30,10 @@ import { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.m
 import { globalProjectionState } from './state.mjs';
 
 const metrics = {
-    type: "projectionFrame",
-    totalNodes: 0,
-    resolvedTargetDeltas: 0,
-    recalculatedProjection: 0,
+    nodes: 0,
+    calculatedTargetDeltas: 0,
+    calculatedProjections: 0,
 };
-const isDebug = typeof window !== "undefined" && window.MotionDebug !== undefined;
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 /**
@@ -187,18 +187,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  * Reset debug counts. Manually resetting rather than creating a new
                  * object each frame.
                  */
-                if (isDebug) {
-                    metrics.totalNodes =
-                        metrics.resolvedTargetDeltas =
-                            metrics.recalculatedProjection =
+                if (statsBuffer.value) {
+                    metrics.nodes =
+                        metrics.calculatedTargetDeltas =
+                            metrics.calculatedProjections =
                                 0;
                 }
                 this.nodes.forEach(propagateDirtyNodes);
                 this.nodes.forEach(resolveTargetDelta);
                 this.nodes.forEach(calcProjection);
                 this.nodes.forEach(cleanDirtyNodes);
-                if (isDebug) {
-                    window.MotionDebug.record(metrics);
+                if (statsBuffer.addProjectionMetrics) {
+                    statsBuffer.addProjectionMetrics(metrics);
                 }
             };
             /**
@@ -845,8 +845,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Increase debug counter for resolved target deltas
              */
-            if (isDebug) {
-                metrics.resolvedTargetDeltas++;
+            if (statsBuffer.value) {
+                metrics.calculatedTargetDeltas++;
             }
         }
         getClosestProjectingParent() {
@@ -976,8 +976,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Increase debug counter for recalculated projections
              */
-            if (isDebug) {
-                metrics.recalculatedProjection++;
+            if (statsBuffer.value) {
+                metrics.calculatedProjections++;
             }
         }
         hide() {
@@ -1079,13 +1079,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             this.pendingAnimation = frame.update(() => {
                 globalProjectionState.hasAnimatedSinceResize = true;
+                activeAnimations.layout++;
                 this.currentAnimation = animateSingleValue(0, animationTarget, {
                     ...options,
                     onUpdate: (latest) => {
                         this.mixTargetDelta(latest);
                         options.onUpdate && options.onUpdate(latest);
                     },
+                    onStop: () => {
+                        activeAnimations.layout--;
+                    },
                     onComplete: () => {
+                        activeAnimations.layout--;
                         options.onComplete && options.onComplete();
                         this.completeAnimation();
                     },
@@ -1485,8 +1490,8 @@ function propagateDirtyNodes(node) {
     /**
      * Increase debug counter for nodes encountered this frame
      */
-    if (isDebug) {
-        metrics.totalNodes++;
+    if (statsBuffer.value) {
+        metrics.nodes++;
     }
     if (!node.parent)
         return;

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

@@ -17,7 +17,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.3.0", `Attempting to mix Motion versions ${nextValue.version} with 12.3.0 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.0", `Attempting to mix Motion versions ${nextValue.version} with 12.4.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/framer-motion/dist/es/stats/animation-count.mjs

@@ -0,0 +1,7 @@
+const activeAnimations = {
+    layout: 0,
+    mainThread: 0,
+    waapi: 0,
+};
+
+export { activeAnimations };

package/dist/es/framer-motion/dist/es/stats/buffer.mjs

@@ -0,0 +1,6 @@
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
+export { statsBuffer };

package/dist/es/framer-motion/dist/es/stats/index.mjs

@@ -0,0 +1,113 @@
+import { activeAnimations } from './animation-count.mjs';
+import { statsBuffer } from './buffer.mjs';
+import { frame, cancelFrame, frameData } from '../frameloop/frame.mjs';
+
+function record() {
+    const { value } = statsBuffer;
+    if (value === null) {
+        cancelFrame(record);
+        return;
+    }
+    value.frameloop.rate.push(frameData.delta);
+    value.animations.mainThread.push(activeAnimations.mainThread);
+    value.animations.waapi.push(activeAnimations.waapi);
+    value.animations.layout.push(activeAnimations.layout);
+}
+function mean(values) {
+    return values.reduce((acc, value) => acc + value, 0) / values.length;
+}
+function summarise(values, calcAverage = mean) {
+    if (values.length === 0) {
+        return {
+            min: 0,
+            max: 0,
+            avg: 0,
+        };
+    }
+    return {
+        min: Math.min(...values),
+        max: Math.max(...values),
+        avg: calcAverage(values),
+    };
+}
+const msToFps = (ms) => Math.round(1000 / ms);
+function clearStatsBuffer() {
+    statsBuffer.value = null;
+    statsBuffer.addProjectionMetrics = null;
+}
+function reportStats() {
+    const { value } = statsBuffer;
+    if (!value) {
+        throw new Error("Stats are not being measured");
+    }
+    clearStatsBuffer();
+    cancelFrame(record);
+    const summary = {
+        frameloop: {
+            rate: summarise(value.frameloop.rate),
+            read: summarise(value.frameloop.read),
+            resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
+            update: summarise(value.frameloop.update),
+            preRender: summarise(value.frameloop.preRender),
+            render: summarise(value.frameloop.render),
+            postRender: summarise(value.frameloop.postRender),
+        },
+        animations: {
+            mainThread: summarise(value.animations.mainThread),
+            waapi: summarise(value.animations.waapi),
+            layout: summarise(value.animations.layout),
+        },
+        layoutProjection: {
+            nodes: summarise(value.layoutProjection.nodes),
+            calculatedTargetDeltas: summarise(value.layoutProjection.calculatedTargetDeltas),
+            calculatedProjections: summarise(value.layoutProjection.calculatedProjections),
+        },
+    };
+    /**
+     * Convert the rate to FPS
+     */
+    const { rate } = summary.frameloop;
+    rate.min = msToFps(rate.min);
+    rate.max = msToFps(rate.max);
+    rate.avg = msToFps(rate.avg);
+    [rate.min, rate.max] = [rate.max, rate.min];
+    return summary;
+}
+function recordStats() {
+    if (statsBuffer.value) {
+        clearStatsBuffer();
+        throw new Error("Stats are already being measured");
+    }
+    const newStatsBuffer = statsBuffer;
+    newStatsBuffer.value = {
+        frameloop: {
+            rate: [],
+            read: [],
+            resolveKeyframes: [],
+            update: [],
+            preRender: [],
+            render: [],
+            postRender: [],
+        },
+        animations: {
+            mainThread: [],
+            waapi: [],
+            layout: [],
+        },
+        layoutProjection: {
+            nodes: [],
+            calculatedTargetDeltas: [],
+            calculatedProjections: [],
+        },
+    };
+    newStatsBuffer.addProjectionMetrics = (metrics) => {
+        const { layoutProjection } = newStatsBuffer.value;
+        layoutProjection.nodes.push(metrics.nodes);
+        layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
+        layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
+    };
+    frame.postRender(record, true);
+    return reportStats;
+}
+
+export { recordStats };

package/dist/es/framer-motion/dist/es/utils/use-in-view.mjs

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { inView } from '../render/dom/viewport/index.mjs';
 
-function useInView(ref, { root, margin, amount, once = false } = {}) {
-    const [isInView, setInView] = useState(false);
+function useInView(ref, { root, margin, amount, once = false, initial = false, } = {}) {
+    const [isInView, setInView] = useState(initial);
     useEffect(() => {
         if (!ref.current || (once && isInView))
             return;

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

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

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

@@ -0,0 +1 @@
+export { recordStats } from '../../framer-motion/dist/es/stats/index.mjs';