motion 12.7.4 → 12.7.5-alpha.1

package/README.md

@@ -100,7 +100,7 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 ### Silver
 
-<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a> <a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a>
 
 ### Personal
 

package/dist/cjs/debug.js

@@ -2,21 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const MotionGlobalConfig = {};
+
 /*#__NO_SIDE_EFFECTS__*/
 const noop = (any) => any;
 
-const activeAnimations = {
-    layout: 0,
-    mainThread: 0,
-    waapi: 0,
-};
-
-const statsBuffer = {
-    value: null,
-    addProjectionMetrics: null,
-};
-
 const stepsOrder = [
+    "setup", // Compute
     "read", // Read
     "resolveKeyframes", // Write/Read/Write/Read
     "update", // Compute
@@ -25,6 +17,11 @@ const stepsOrder = [
     "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
@@ -128,11 +125,13 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const { setup, read, resolveKeyframes, update, preRender, render, postRender, } = steps;
     const processBatch = () => {
-        const timestamp = performance.now();
+        const timestamp = MotionGlobalConfig.useManualTiming
+            ? state.timestamp
+            : performance.now();
         runNextFrame = false;
-        {
+        if (!MotionGlobalConfig.useManualTiming) {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
@@ -140,6 +139,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
+        setup.process(state);
         read.process(state);
         resolveKeyframes.process(state);
         update.process(state);
@@ -178,6 +178,12 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
 
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
+const activeAnimations = {
+    layout: 0,
+    mainThread: 0,
+    waapi: 0,
+};
+
 function record() {
     const { value } = statsBuffer;
     if (value === null) {
@@ -220,6 +226,7 @@ function reportStats() {
     cancelFrame(record);
     const summary = {
         frameloop: {
+            setup: summarise(value.frameloop.setup),
             rate: summarise(value.frameloop.rate),
             read: summarise(value.frameloop.read),
             resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
@@ -257,6 +264,7 @@ function recordStats() {
     const newStatsBuffer = statsBuffer;
     newStatsBuffer.value = {
         frameloop: {
+            setup: [],
             rate: [],
             read: [],
             resolveKeyframes: [],