motion 12.7.0 → 12.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist/cjs/debug.js +0 -2
  2. package/dist/cjs/index.js +4 -7
  3. package/dist/cjs/mini.js +1 -181
  4. package/dist/cjs/react-client.js +4 -14
  5. package/dist/cjs/react-m.js +1 -11
  6. package/dist/cjs/react-mini.js +1 -181
  7. package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +1 -3
  8. package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +1 -3
  9. package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs +1 -3
  10. package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +1 -1
  11. package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +7 -9
  12. package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs +1 -3
  13. package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +5 -6
  14. package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs +0 -2
  15. package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +1 -2
  16. package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +3 -4
  17. package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs +1 -3
  18. package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +1 -3
  19. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs +0 -1
  20. package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +2 -2
  21. package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +5 -7
  22. package/dist/es/framer-motion/dist/es/animation/generators/utils/velocity.mjs +0 -1
  23. package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs +1 -1
  24. package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +5 -7
  25. package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +2 -4
  26. package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs +2 -4
  27. package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +5 -6
  28. package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs +1 -2
  29. package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs +1 -1
  30. package/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs +1 -1
  31. package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs +1 -1
  32. package/dist/es/framer-motion/dist/es/components/Reorder/utils/check-reorder.mjs +1 -2
  33. package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +0 -1
  34. package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +3 -4
  35. package/dist/es/framer-motion/dist/es/events/event-info.mjs +0 -2
  36. package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +3 -4
  37. package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +1 -2
  38. package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs +1 -2
  39. package/dist/es/framer-motion/dist/es/gestures/hover.mjs +2 -4
  40. package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs +3 -5
  41. package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +2 -4
  42. package/dist/es/framer-motion/dist/es/gestures/press.mjs +2 -4
  43. package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs +2 -4
  44. package/dist/es/framer-motion/dist/es/motion/index.mjs +1 -1
  45. package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +1 -3
  46. package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +2 -3
  47. package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +8 -10
  48. package/dist/es/framer-motion/dist/es/projection/shared/stack.mjs +0 -1
  49. package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +5 -7
  50. package/dist/es/framer-motion/dist/es/render/components/create-proxy.mjs +0 -1
  51. package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +0 -2
  52. package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +2 -4
  53. package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs +0 -1
  54. package/dist/es/framer-motion/dist/es/render/dom/scroll/observe.mjs +0 -2
  55. package/dist/es/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs +1 -2
  56. package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +1 -3
  57. package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +1 -1
  58. package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +0 -2
  59. package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs +1 -3
  60. package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs +1 -3
  61. package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +1 -3
  62. package/dist/es/framer-motion/dist/es/render/utils/flat-tree.mjs +1 -2
  63. package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +2 -4
  64. package/dist/es/framer-motion/dist/es/render/utils/setters.mjs +1 -3
  65. package/dist/es/framer-motion/dist/es/utils/delay.mjs +2 -4
  66. package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +3 -3
  67. package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +1 -1
  68. package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +1 -1
  69. package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs +1 -2
  70. package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs +1 -2
  71. package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs +1 -3
  72. package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs +1 -3
  73. package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs +1 -3
  74. package/dist/es/framer-motion/dist/es/value/scroll/use-element-scroll.mjs +1 -2
  75. package/dist/es/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs +1 -2
  76. package/dist/es/framer-motion/dist/es/value/use-combine-values.mjs +1 -3
  77. package/dist/es/framer-motion/dist/es/value/use-computed.mjs +1 -3
  78. package/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs +1 -1
  79. package/dist/es/framer-motion/dist/es/value/use-motion-value.mjs +1 -3
  80. package/dist/es/framer-motion/dist/es/value/use-scroll.mjs +2 -3
  81. package/dist/es/framer-motion/dist/es/value/use-spring.mjs +2 -4
  82. package/dist/es/framer-motion/dist/es/value/use-velocity.mjs +1 -3
  83. package/dist/es/framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs +2 -4
  84. package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +1 -2
  85. package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs +4 -7
  86. package/dist/es/motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs +1 -2
  87. package/dist/es/motion-dom/dist/es/animation/waapi/supports/partial-keyframes.mjs +0 -1
  88. package/dist/es/motion-dom/dist/es/frameloop/batcher.mjs +1 -2
  89. package/dist/es/motion-dom/dist/es/frameloop/frame.mjs +1 -2
  90. package/dist/es/motion-dom/dist/es/frameloop/index-legacy.mjs +1 -1
  91. package/dist/es/motion-dom/dist/es/frameloop/sync-time.mjs +1 -2
  92. package/dist/es/motion-dom/dist/es/stats/index.mjs +1 -1
  93. package/dist/es/motion-dom/dist/es/utils/supports/memo.mjs +1 -2
  94. package/dist/es/motion-dom/dist/es/utils/supports/scroll-timeline.mjs +0 -1
  95. package/dist/es/motion-dom/dist/es/value/index.mjs +4 -5
  96. package/dist/motion.dev.js +4 -7
  97. package/dist/motion.js +1 -1
  98. package/package.json +3 -3
package/dist/cjs/debug.js CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- if (process.env.NODE_ENV !== "production") ;
6
-
7
5
  /*#__NO_SIDE_EFFECTS__*/
8
6
  const noop = (any) => any;
9
7
 
package/dist/cjs/index.js CHANGED
@@ -472,11 +472,8 @@ class NativeAnimation {
472
472
  this.animation.onfinish = () => {
473
473
  if (!pseudoElement) {
474
474
  style.set(element, name, getFinalKeyframe$1(keyframes, transition));
475
+ this.cancel();
475
476
  }
476
- else {
477
- this.commitStyles();
478
- }
479
- this.cancel();
480
477
  };
481
478
  /**
482
479
  * TODO: Check for VisualElement before using animation state.
@@ -820,7 +817,7 @@ const isDragging = {
820
817
  y: false,
821
818
  };
822
819
  function isDragActive() {
823
- return isDragging.x || isDragging.y;
820
+ return isDragging.y;
824
821
  }
825
822
 
826
823
  function resolveElements(elementOrSelector, scope, selectorCache) {
@@ -1065,7 +1062,7 @@ class MotionValue {
1065
1062
  * This will be replaced by the build step with the latest version number.
1066
1063
  * When MotionValues are provided to motion components, warn if versions are mixed.
1067
1064
  */
1068
- this.version = "12.6.5";
1065
+ this.version = "12.7.2";
1069
1066
  /**
1070
1067
  * Tracks whether this value can output a velocity. Currently this is only true
1071
1068
  * if the value is numerical, but we might be able to widen the scope here and support
@@ -4788,7 +4785,7 @@ function updateMotionValuesFromProps(element, next, prev) {
4788
4785
  * and warn against mismatches.
4789
4786
  */
4790
4787
  if (process.env.NODE_ENV === "development") {
4791
- warnOnce(nextValue.version === "12.7.0", `Attempting to mix Motion versions ${nextValue.version} with 12.7.0 may not work as expected.`);
4788
+ warnOnce(nextValue.version === "12.7.2", `Attempting to mix Motion versions ${nextValue.version} with 12.7.2 may not work as expected.`);
4792
4789
  }
4793
4790
  }
4794
4791
  else if (isMotionValue(prevValue)) {
package/dist/cjs/mini.js CHANGED
@@ -239,11 +239,6 @@ function hydrateKeyframes(element, name, keyframes, pseudoElement) {
239
239
  return keyframes;
240
240
  }
241
241
 
242
- const statsBuffer = {
243
- value: null,
244
- addProjectionMetrics: null,
245
- };
246
-
247
242
  const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
248
243
 
249
244
  /**
@@ -400,11 +395,8 @@ class NativeAnimation {
400
395
  this.animation.onfinish = () => {
401
396
  if (!pseudoElement) {
402
397
  style.set(element, name, getFinalKeyframe(keyframes, transition));
398
+ this.cancel();
403
399
  }
404
- else {
405
- this.commitStyles();
406
- }
407
- this.cancel();
408
400
  };
409
401
  /**
410
402
  * TODO: Check for VisualElement before using animation state.
@@ -540,168 +532,6 @@ function createGeneratorEasing(options, scale = 100, createGenerator) {
540
532
  };
541
533
  }
542
534
 
543
- const stepsOrder = [
544
- "read", // Read
545
- "resolveKeyframes", // Write/Read/Write/Read
546
- "update", // Compute
547
- "preRender", // Compute
548
- "render", // Write
549
- "postRender", // Compute
550
- ];
551
-
552
- function createRenderStep(runNextFrame, stepName) {
553
- /**
554
- * We create and reuse two queues, one to queue jobs for the current frame
555
- * and one for the next. We reuse to avoid triggering GC after x frames.
556
- */
557
- let thisFrame = new Set();
558
- let nextFrame = new Set();
559
- /**
560
- * Track whether we're currently processing jobs in this step. This way
561
- * we can decide whether to schedule new jobs for this frame or next.
562
- */
563
- let isProcessing = false;
564
- let flushNextFrame = false;
565
- /**
566
- * A set of processes which were marked keepAlive when scheduled.
567
- */
568
- const toKeepAlive = new WeakSet();
569
- let latestFrameData = {
570
- delta: 0.0,
571
- timestamp: 0.0,
572
- isProcessing: false,
573
- };
574
- let numCalls = 0;
575
- function triggerCallback(callback) {
576
- if (toKeepAlive.has(callback)) {
577
- step.schedule(callback);
578
- runNextFrame();
579
- }
580
- numCalls++;
581
- callback(latestFrameData);
582
- }
583
- const step = {
584
- /**
585
- * Schedule a process to run on the next frame.
586
- */
587
- schedule: (callback, keepAlive = false, immediate = false) => {
588
- const addToCurrentFrame = immediate && isProcessing;
589
- const queue = addToCurrentFrame ? thisFrame : nextFrame;
590
- if (keepAlive)
591
- toKeepAlive.add(callback);
592
- if (!queue.has(callback))
593
- queue.add(callback);
594
- return callback;
595
- },
596
- /**
597
- * Cancel the provided callback from running on the next frame.
598
- */
599
- cancel: (callback) => {
600
- nextFrame.delete(callback);
601
- toKeepAlive.delete(callback);
602
- },
603
- /**
604
- * Execute all schedule callbacks.
605
- */
606
- process: (frameData) => {
607
- latestFrameData = frameData;
608
- /**
609
- * If we're already processing we've probably been triggered by a flushSync
610
- * inside an existing process. Instead of executing, mark flushNextFrame
611
- * as true and ensure we flush the following frame at the end of this one.
612
- */
613
- if (isProcessing) {
614
- flushNextFrame = true;
615
- return;
616
- }
617
- isProcessing = true;
618
- [thisFrame, nextFrame] = [nextFrame, thisFrame];
619
- // Execute this frame
620
- thisFrame.forEach(triggerCallback);
621
- /**
622
- * If we're recording stats then
623
- */
624
- if (stepName && statsBuffer.value) {
625
- statsBuffer.value.frameloop[stepName].push(numCalls);
626
- }
627
- numCalls = 0;
628
- // Clear the frame so no callbacks remain. This is to avoid
629
- // memory leaks should this render step not run for a while.
630
- thisFrame.clear();
631
- isProcessing = false;
632
- if (flushNextFrame) {
633
- flushNextFrame = false;
634
- step.process(frameData);
635
- }
636
- },
637
- };
638
- return step;
639
- }
640
-
641
- const maxElapsed = 40;
642
- function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
643
- let runNextFrame = false;
644
- let useDefaultElapsed = true;
645
- const state = {
646
- delta: 0.0,
647
- timestamp: 0.0,
648
- isProcessing: false,
649
- };
650
- const flagRunNextFrame = () => (runNextFrame = true);
651
- const steps = stepsOrder.reduce((acc, key) => {
652
- acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
653
- return acc;
654
- }, {});
655
- const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
656
- const processBatch = () => {
657
- const timestamp = performance.now();
658
- runNextFrame = false;
659
- {
660
- state.delta = useDefaultElapsed
661
- ? 1000 / 60
662
- : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
663
- }
664
- state.timestamp = timestamp;
665
- state.isProcessing = true;
666
- // Unrolled render loop for better per-frame performance
667
- read.process(state);
668
- resolveKeyframes.process(state);
669
- update.process(state);
670
- preRender.process(state);
671
- render.process(state);
672
- postRender.process(state);
673
- state.isProcessing = false;
674
- if (runNextFrame && allowKeepAlive) {
675
- useDefaultElapsed = false;
676
- scheduleNextBatch(processBatch);
677
- }
678
- };
679
- const wake = () => {
680
- runNextFrame = true;
681
- useDefaultElapsed = true;
682
- if (!state.isProcessing) {
683
- scheduleNextBatch(processBatch);
684
- }
685
- };
686
- const schedule = stepsOrder.reduce((acc, key) => {
687
- const step = steps[key];
688
- acc[key] = (process, keepAlive = false, immediate = false) => {
689
- if (!runNextFrame)
690
- wake();
691
- return step.schedule(process, keepAlive, immediate);
692
- };
693
- return acc;
694
- }, {});
695
- const cancel = (process) => {
696
- for (let i = 0; i < stepsOrder.length; i++) {
697
- steps[stepsOrder[i]].cancel(process);
698
- }
699
- };
700
- return { schedule, cancel, state, steps };
701
- }
702
-
703
- const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
704
-
705
535
  function resolveElements(elementOrSelector, scope, selectorCache) {
706
536
  if (elementOrSelector instanceof EventTarget) {
707
537
  return [elementOrSelector];
@@ -718,16 +548,6 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
718
548
  return Array.from(elementOrSelector);
719
549
  }
720
550
 
721
- /**
722
- * @deprecated
723
- *
724
- * Use cancelFrame(callback) instead.
725
- */
726
- stepsOrder.reduce((acc, key) => {
727
- acc[key] = (process) => cancelFrame(process);
728
- return acc;
729
- }, {});
730
-
731
551
  const wrap = (min, max, v) => {
732
552
  const rangeSize = max - min;
733
553
  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
@@ -579,11 +579,11 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
579
579
  return { schedule, cancel, state, steps };
580
580
  }
581
581
 
582
- const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
583
-
584
582
  const { schedule: microtask, cancel: cancelMicrotask } =
585
583
  /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
586
584
 
585
+ const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
586
+
587
587
  let now;
588
588
  function clearTime() {
589
589
  now = undefined;
@@ -886,7 +886,7 @@ class MotionValue {
886
886
  * This will be replaced by the build step with the latest version number.
887
887
  * When MotionValues are provided to motion components, warn if versions are mixed.
888
888
  */
889
- this.version = "12.6.5";
889
+ this.version = "12.7.2";
890
890
  /**
891
891
  * Tracks whether this value can output a velocity. Currently this is only true
892
892
  * if the value is numerical, but we might be able to widen the scope here and support
@@ -1161,16 +1161,6 @@ function motionValue(init, options) {
1161
1161
  return new MotionValue(init, options);
1162
1162
  }
1163
1163
 
1164
- /**
1165
- * @deprecated
1166
- *
1167
- * Use cancelFrame(callback) instead.
1168
- */
1169
- stepsOrder.reduce((acc, key) => {
1170
- acc[key] = (process) => cancelFrame(process);
1171
- return acc;
1172
- }, {});
1173
-
1174
1164
  /**
1175
1165
  * Generate a list of every possible transform key.
1176
1166
  */
@@ -9344,7 +9334,7 @@ function updateMotionValuesFromProps(element, next, prev) {
9344
9334
  * and warn against mismatches.
9345
9335
  */
9346
9336
  if (process.env.NODE_ENV === "development") {
9347
- warnOnce(nextValue.version === "12.7.0", `Attempting to mix Motion versions ${nextValue.version} with 12.7.0 may not work as expected.`);
9337
+ warnOnce(nextValue.version === "12.7.2", `Attempting to mix Motion versions ${nextValue.version} with 12.7.2 may not work as expected.`);
9348
9338
  }
9349
9339
  }
9350
9340
  else if (isMotionValue(prevValue)) {
@@ -336,20 +336,10 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
336
336
  return { schedule, cancel, state, steps };
337
337
  }
338
338
 
339
- const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
340
-
341
339
  const { schedule: microtask, cancel: cancelMicrotask } =
342
340
  /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
343
341
 
344
- /**
345
- * @deprecated
346
- *
347
- * Use cancelFrame(callback) instead.
348
- */
349
- stepsOrder.reduce((acc, key) => {
350
- acc[key] = (process) => cancelFrame(process);
351
- return acc;
352
- }, {});
342
+ const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
353
343
 
354
344
  /**
355
345
  * Convert camelCase to dash-case properties.
@@ -236,11 +236,6 @@ function hydrateKeyframes(element, name, keyframes, pseudoElement) {
236
236
  return keyframes;
237
237
  }
238
238
 
239
- const statsBuffer = {
240
- value: null,
241
- addProjectionMetrics: null,
242
- };
243
-
244
239
  const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
245
240
 
246
241
  /**
@@ -397,11 +392,8 @@ class NativeAnimation {
397
392
  this.animation.onfinish = () => {
398
393
  if (!pseudoElement) {
399
394
  style.set(element, name, getFinalKeyframe(keyframes, transition));
395
+ this.cancel();
400
396
  }
401
- else {
402
- this.commitStyles();
403
- }
404
- this.cancel();
405
397
  };
406
398
  /**
407
399
  * TODO: Check for VisualElement before using animation state.
@@ -506,168 +498,6 @@ function getValueTransition(transition, key) {
506
498
  transition);
507
499
  }
508
500
 
509
- const stepsOrder = [
510
- "read", // Read
511
- "resolveKeyframes", // Write/Read/Write/Read
512
- "update", // Compute
513
- "preRender", // Compute
514
- "render", // Write
515
- "postRender", // Compute
516
- ];
517
-
518
- function createRenderStep(runNextFrame, stepName) {
519
- /**
520
- * We create and reuse two queues, one to queue jobs for the current frame
521
- * and one for the next. We reuse to avoid triggering GC after x frames.
522
- */
523
- let thisFrame = new Set();
524
- let nextFrame = new Set();
525
- /**
526
- * Track whether we're currently processing jobs in this step. This way
527
- * we can decide whether to schedule new jobs for this frame or next.
528
- */
529
- let isProcessing = false;
530
- let flushNextFrame = false;
531
- /**
532
- * A set of processes which were marked keepAlive when scheduled.
533
- */
534
- const toKeepAlive = new WeakSet();
535
- let latestFrameData = {
536
- delta: 0.0,
537
- timestamp: 0.0,
538
- isProcessing: false,
539
- };
540
- let numCalls = 0;
541
- function triggerCallback(callback) {
542
- if (toKeepAlive.has(callback)) {
543
- step.schedule(callback);
544
- runNextFrame();
545
- }
546
- numCalls++;
547
- callback(latestFrameData);
548
- }
549
- const step = {
550
- /**
551
- * Schedule a process to run on the next frame.
552
- */
553
- schedule: (callback, keepAlive = false, immediate = false) => {
554
- const addToCurrentFrame = immediate && isProcessing;
555
- const queue = addToCurrentFrame ? thisFrame : nextFrame;
556
- if (keepAlive)
557
- toKeepAlive.add(callback);
558
- if (!queue.has(callback))
559
- queue.add(callback);
560
- return callback;
561
- },
562
- /**
563
- * Cancel the provided callback from running on the next frame.
564
- */
565
- cancel: (callback) => {
566
- nextFrame.delete(callback);
567
- toKeepAlive.delete(callback);
568
- },
569
- /**
570
- * Execute all schedule callbacks.
571
- */
572
- process: (frameData) => {
573
- latestFrameData = frameData;
574
- /**
575
- * If we're already processing we've probably been triggered by a flushSync
576
- * inside an existing process. Instead of executing, mark flushNextFrame
577
- * as true and ensure we flush the following frame at the end of this one.
578
- */
579
- if (isProcessing) {
580
- flushNextFrame = true;
581
- return;
582
- }
583
- isProcessing = true;
584
- [thisFrame, nextFrame] = [nextFrame, thisFrame];
585
- // Execute this frame
586
- thisFrame.forEach(triggerCallback);
587
- /**
588
- * If we're recording stats then
589
- */
590
- if (stepName && statsBuffer.value) {
591
- statsBuffer.value.frameloop[stepName].push(numCalls);
592
- }
593
- numCalls = 0;
594
- // Clear the frame so no callbacks remain. This is to avoid
595
- // memory leaks should this render step not run for a while.
596
- thisFrame.clear();
597
- isProcessing = false;
598
- if (flushNextFrame) {
599
- flushNextFrame = false;
600
- step.process(frameData);
601
- }
602
- },
603
- };
604
- return step;
605
- }
606
-
607
- const maxElapsed = 40;
608
- function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
609
- let runNextFrame = false;
610
- let useDefaultElapsed = true;
611
- const state = {
612
- delta: 0.0,
613
- timestamp: 0.0,
614
- isProcessing: false,
615
- };
616
- const flagRunNextFrame = () => (runNextFrame = true);
617
- const steps = stepsOrder.reduce((acc, key) => {
618
- acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
619
- return acc;
620
- }, {});
621
- const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
622
- const processBatch = () => {
623
- const timestamp = performance.now();
624
- runNextFrame = false;
625
- {
626
- state.delta = useDefaultElapsed
627
- ? 1000 / 60
628
- : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
629
- }
630
- state.timestamp = timestamp;
631
- state.isProcessing = true;
632
- // Unrolled render loop for better per-frame performance
633
- read.process(state);
634
- resolveKeyframes.process(state);
635
- update.process(state);
636
- preRender.process(state);
637
- render.process(state);
638
- postRender.process(state);
639
- state.isProcessing = false;
640
- if (runNextFrame && allowKeepAlive) {
641
- useDefaultElapsed = false;
642
- scheduleNextBatch(processBatch);
643
- }
644
- };
645
- const wake = () => {
646
- runNextFrame = true;
647
- useDefaultElapsed = true;
648
- if (!state.isProcessing) {
649
- scheduleNextBatch(processBatch);
650
- }
651
- };
652
- const schedule = stepsOrder.reduce((acc, key) => {
653
- const step = steps[key];
654
- acc[key] = (process, keepAlive = false, immediate = false) => {
655
- if (!runNextFrame)
656
- wake();
657
- return step.schedule(process, keepAlive, immediate);
658
- };
659
- return acc;
660
- }, {});
661
- const cancel = (process) => {
662
- for (let i = 0; i < stepsOrder.length; i++) {
663
- steps[stepsOrder[i]].cancel(process);
664
- }
665
- };
666
- return { schedule, cancel, state, steps };
667
- }
668
-
669
- const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
670
-
671
501
  function resolveElements(elementOrSelector, scope, selectorCache) {
672
502
  if (elementOrSelector instanceof EventTarget) {
673
503
  return [elementOrSelector];
@@ -684,16 +514,6 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
684
514
  return Array.from(elementOrSelector);
685
515
  }
686
516
 
687
- /**
688
- * @deprecated
689
- *
690
- * Use cancelFrame(callback) instead.
691
- */
692
- stepsOrder.reduce((acc, key) => {
693
- acc[key] = (process) => cancelFrame(process);
694
- return acc;
695
- }, {});
696
-
697
517
  function animateElements(elementOrSelector, keyframes, options, scope) {
698
518
  const elements = resolveElements(elementOrSelector, scope);
699
519
  const numElements = elements.length;
@@ -1,8 +1,6 @@
1
- import '../../../../../motion-utils/dist/es/errors.mjs';
2
- import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
3
- import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
4
1
  import { animateSequence } from './sequence.mjs';
5
2
  import { animateSubject } from './subject.mjs';
3
+ import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
6
4
 
7
5
  function isSequence(value) {
8
6
  return Array.isArray(value) && value.some(Array.isArray);
@@ -1,7 +1,5 @@
1
- import '../../../../../motion-utils/dist/es/errors.mjs';
2
- import { resolveElements } from '../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
3
- import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
4
1
  import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
2
+ import { resolveElements } from '../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
5
3
 
6
4
  function resolveSubjects(subject, keyframes, scope, selectorCache) {
7
5
  if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
@@ -1,8 +1,6 @@
1
- import '../../../../../motion-utils/dist/es/errors.mjs';
2
- import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
3
- import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
4
1
  import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
5
2
  import { animateMotionValue } from '../interfaces/motion-value.mjs';
3
+ import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
6
4
 
7
5
  function animateSingleValue(value, keyframes, options) {
8
6
  const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
@@ -1,4 +1,3 @@
1
- import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
2
1
  import { visualElementStore } from '../../render/store.mjs';
3
2
  import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
4
3
  import { animateTarget } from '../interfaces/visual-element-target.mjs';
@@ -6,6 +5,7 @@ import { createDOMVisualElement, createObjectVisualElement } from '../utils/crea
6
5
  import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
7
6
  import { resolveSubjects } from './resolve-subjects.mjs';
8
7
  import { animateSingleValue } from './single-value.mjs';
8
+ import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
9
9
 
10
10
  function isSingleValue(subject, keyframes) {
11
11
  return (isMotionValue(subject) ||
@@ -1,12 +1,3 @@
1
- import '../../../../../motion-utils/dist/es/errors.mjs';
2
- import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
3
- import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
4
- import { startWaapiAnimation } from '../../../../../motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs';
5
- import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
6
- import { isWaapiSupportedEasing } from '../../../../../motion-dom/dist/es/animation/waapi/easing/is-supported.mjs';
7
- import { supportsLinearEasing } from '../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
8
- import { attachTimeline } from '../../../../../motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs';
9
- import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
10
1
  import { anticipate } from '../../easing/anticipate.mjs';
11
2
  import { backInOut } from '../../easing/back.mjs';
12
3
  import { circInOut } from '../../easing/circ.mjs';
@@ -16,6 +7,13 @@ import { MainThreadAnimation } from './MainThreadAnimation.mjs';
16
7
  import { acceleratedValues } from './utils/accelerated-values.mjs';
17
8
  import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
18
9
  import { supportsWaapi } from './waapi/utils/supports-waapi.mjs';
10
+ import { supportsLinearEasing } from '../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
11
+ import { startWaapiAnimation } from '../../../../../motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs';
12
+ import { attachTimeline } from '../../../../../motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs';
13
+ import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
14
+ import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
15
+ import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
16
+ import { isWaapiSupportedEasing } from '../../../../../motion-dom/dist/es/animation/waapi/easing/is-supported.mjs';
19
17
 
20
18
  /**
21
19
  * 10ms is chosen here as it strikes a balance between smooth
@@ -1,10 +1,8 @@
1
- import '../../../../../motion-utils/dist/es/errors.mjs';
2
- import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
3
- import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
4
1
  import { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';
5
2
  import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
6
3
  import { canAnimate } from './utils/can-animate.mjs';
7
4
  import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
5
+ import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
8
6
 
9
7
  /**
10
8
  * Maximum time allowed between an animation being created and it being
@@ -1,9 +1,3 @@
1
- import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
2
- import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
3
- import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
4
- import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
5
- import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
6
- import '../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
7
1
  import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
8
2
  import { clamp } from '../../utils/clamp.mjs';
9
3
  import { mix } from '../../utils/mix/index.mjs';
@@ -14,6 +8,11 @@ import { spring } from '../generators/spring/index.mjs';
14
8
  import { BaseAnimation } from './BaseAnimation.mjs';
15
9
  import { frameloopDriver } from './drivers/driver-frameloop.mjs';
16
10
  import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
11
+ import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
12
+ import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
13
+ import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
14
+ import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
15
+ import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
17
16
 
18
17
  const generators = {
19
18
  decay: inertia,
@@ -1,7 +1,5 @@
1
- import '../../../../../../motion-utils/dist/es/errors.mjs';
2
1
  import { frame, cancelFrame, frameData } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
3
2
  import { time } from '../../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
4
- import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
5
3
 
6
4
  const frameloopDriver = (update) => {
7
5
  const passTimestamp = ({ timestamp }) => update(timestamp);
@@ -1,7 +1,6 @@
1
+ import { isAnimatable } from '../../utils/is-animatable.mjs';
1
2
  import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
2
3
  import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
3
- import '../../../../../../motion-dom/dist/es/frameloop/index-legacy.mjs';
4
- import { isAnimatable } from '../../utils/is-animatable.mjs';
5
4
 
6
5
  function hasKeyframesChanged(keyframes) {
7
6
  const current = keyframes[0];