motion 12.7.1 → 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.
- package/dist/cjs/debug.js +0 -2
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/mini.js +0 -177
- package/dist/cjs/react-client.js +4 -14
- package/dist/cjs/react-m.js +1 -11
- package/dist/cjs/react-mini.js +0 -177
- package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +1 -3
- package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +1 -3
- package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs +1 -3
- package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +7 -9
- package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs +1 -3
- package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +5 -6
- package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs +0 -2
- package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +1 -2
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +3 -4
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs +1 -3
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +1 -3
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs +0 -1
- package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +5 -7
- package/dist/es/framer-motion/dist/es/animation/generators/utils/velocity.mjs +0 -1
- package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +5 -7
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +2 -4
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs +2 -4
- package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +5 -6
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs +1 -2
- package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs +1 -1
- package/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs +1 -1
- package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs +1 -1
- package/dist/es/framer-motion/dist/es/components/Reorder/utils/check-reorder.mjs +1 -2
- package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +0 -1
- package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +3 -4
- package/dist/es/framer-motion/dist/es/events/event-info.mjs +0 -2
- package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +3 -4
- package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +1 -2
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs +1 -2
- package/dist/es/framer-motion/dist/es/gestures/hover.mjs +2 -4
- package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs +3 -5
- package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +2 -4
- package/dist/es/framer-motion/dist/es/gestures/press.mjs +2 -4
- package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs +2 -4
- package/dist/es/framer-motion/dist/es/motion/index.mjs +1 -1
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +1 -3
- package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +2 -3
- package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +8 -10
- package/dist/es/framer-motion/dist/es/projection/shared/stack.mjs +0 -1
- package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +5 -7
- package/dist/es/framer-motion/dist/es/render/components/create-proxy.mjs +0 -1
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +0 -2
- package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +2 -4
- package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs +0 -1
- package/dist/es/framer-motion/dist/es/render/dom/scroll/observe.mjs +0 -2
- package/dist/es/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs +1 -2
- package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +1 -3
- package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +0 -2
- package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs +1 -3
- package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs +1 -3
- package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +1 -3
- package/dist/es/framer-motion/dist/es/render/utils/flat-tree.mjs +1 -2
- package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +2 -4
- package/dist/es/framer-motion/dist/es/render/utils/setters.mjs +1 -3
- package/dist/es/framer-motion/dist/es/utils/delay.mjs +2 -4
- package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +3 -3
- package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +1 -1
- package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +1 -1
- package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs +1 -2
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs +1 -2
- package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs +1 -3
- package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs +1 -3
- package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs +1 -3
- package/dist/es/framer-motion/dist/es/value/scroll/use-element-scroll.mjs +1 -2
- package/dist/es/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs +1 -2
- package/dist/es/framer-motion/dist/es/value/use-combine-values.mjs +1 -3
- package/dist/es/framer-motion/dist/es/value/use-computed.mjs +1 -3
- package/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs +1 -1
- package/dist/es/framer-motion/dist/es/value/use-motion-value.mjs +1 -3
- package/dist/es/framer-motion/dist/es/value/use-scroll.mjs +2 -3
- package/dist/es/framer-motion/dist/es/value/use-spring.mjs +2 -4
- package/dist/es/framer-motion/dist/es/value/use-velocity.mjs +1 -3
- package/dist/es/framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs +2 -4
- package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +1 -2
- package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs +3 -3
- package/dist/es/motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs +1 -2
- package/dist/es/motion-dom/dist/es/animation/waapi/supports/partial-keyframes.mjs +0 -1
- package/dist/es/motion-dom/dist/es/frameloop/batcher.mjs +1 -2
- package/dist/es/motion-dom/dist/es/frameloop/frame.mjs +1 -2
- package/dist/es/motion-dom/dist/es/frameloop/index-legacy.mjs +1 -1
- package/dist/es/motion-dom/dist/es/frameloop/sync-time.mjs +1 -2
- package/dist/es/motion-dom/dist/es/stats/index.mjs +1 -1
- package/dist/es/motion-dom/dist/es/utils/supports/memo.mjs +1 -2
- package/dist/es/motion-dom/dist/es/utils/supports/scroll-timeline.mjs +0 -1
- package/dist/es/motion-dom/dist/es/value/index.mjs +4 -5
- package/dist/motion.dev.js +3 -3
- package/dist/motion.js +1 -1
- package/package.json +3 -3
package/dist/cjs/debug.js
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -817,7 +817,7 @@ const isDragging = {
|
|
|
817
817
|
y: false,
|
|
818
818
|
};
|
|
819
819
|
function isDragActive() {
|
|
820
|
-
return isDragging.
|
|
820
|
+
return isDragging.y;
|
|
821
821
|
}
|
|
822
822
|
|
|
823
823
|
function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
@@ -1062,7 +1062,7 @@ class MotionValue {
|
|
|
1062
1062
|
* This will be replaced by the build step with the latest version number.
|
|
1063
1063
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
1064
1064
|
*/
|
|
1065
|
-
this.version = "12.7.
|
|
1065
|
+
this.version = "12.7.2";
|
|
1066
1066
|
/**
|
|
1067
1067
|
* Tracks whether this value can output a velocity. Currently this is only true
|
|
1068
1068
|
* if the value is numerical, but we might be able to widen the scope here and support
|
|
@@ -4785,7 +4785,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
4785
4785
|
* and warn against mismatches.
|
|
4786
4786
|
*/
|
|
4787
4787
|
if (process.env.NODE_ENV === "development") {
|
|
4788
|
-
warnOnce(nextValue.version === "12.7.
|
|
4788
|
+
warnOnce(nextValue.version === "12.7.2", `Attempting to mix Motion versions ${nextValue.version} with 12.7.2 may not work as expected.`);
|
|
4789
4789
|
}
|
|
4790
4790
|
}
|
|
4791
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
|
/**
|
|
@@ -537,168 +532,6 @@ function createGeneratorEasing(options, scale = 100, createGenerator) {
|
|
|
537
532
|
};
|
|
538
533
|
}
|
|
539
534
|
|
|
540
|
-
const stepsOrder = [
|
|
541
|
-
"read", // Read
|
|
542
|
-
"resolveKeyframes", // Write/Read/Write/Read
|
|
543
|
-
"update", // Compute
|
|
544
|
-
"preRender", // Compute
|
|
545
|
-
"render", // Write
|
|
546
|
-
"postRender", // Compute
|
|
547
|
-
];
|
|
548
|
-
|
|
549
|
-
function createRenderStep(runNextFrame, stepName) {
|
|
550
|
-
/**
|
|
551
|
-
* We create and reuse two queues, one to queue jobs for the current frame
|
|
552
|
-
* and one for the next. We reuse to avoid triggering GC after x frames.
|
|
553
|
-
*/
|
|
554
|
-
let thisFrame = new Set();
|
|
555
|
-
let nextFrame = new Set();
|
|
556
|
-
/**
|
|
557
|
-
* Track whether we're currently processing jobs in this step. This way
|
|
558
|
-
* we can decide whether to schedule new jobs for this frame or next.
|
|
559
|
-
*/
|
|
560
|
-
let isProcessing = false;
|
|
561
|
-
let flushNextFrame = false;
|
|
562
|
-
/**
|
|
563
|
-
* A set of processes which were marked keepAlive when scheduled.
|
|
564
|
-
*/
|
|
565
|
-
const toKeepAlive = new WeakSet();
|
|
566
|
-
let latestFrameData = {
|
|
567
|
-
delta: 0.0,
|
|
568
|
-
timestamp: 0.0,
|
|
569
|
-
isProcessing: false,
|
|
570
|
-
};
|
|
571
|
-
let numCalls = 0;
|
|
572
|
-
function triggerCallback(callback) {
|
|
573
|
-
if (toKeepAlive.has(callback)) {
|
|
574
|
-
step.schedule(callback);
|
|
575
|
-
runNextFrame();
|
|
576
|
-
}
|
|
577
|
-
numCalls++;
|
|
578
|
-
callback(latestFrameData);
|
|
579
|
-
}
|
|
580
|
-
const step = {
|
|
581
|
-
/**
|
|
582
|
-
* Schedule a process to run on the next frame.
|
|
583
|
-
*/
|
|
584
|
-
schedule: (callback, keepAlive = false, immediate = false) => {
|
|
585
|
-
const addToCurrentFrame = immediate && isProcessing;
|
|
586
|
-
const queue = addToCurrentFrame ? thisFrame : nextFrame;
|
|
587
|
-
if (keepAlive)
|
|
588
|
-
toKeepAlive.add(callback);
|
|
589
|
-
if (!queue.has(callback))
|
|
590
|
-
queue.add(callback);
|
|
591
|
-
return callback;
|
|
592
|
-
},
|
|
593
|
-
/**
|
|
594
|
-
* Cancel the provided callback from running on the next frame.
|
|
595
|
-
*/
|
|
596
|
-
cancel: (callback) => {
|
|
597
|
-
nextFrame.delete(callback);
|
|
598
|
-
toKeepAlive.delete(callback);
|
|
599
|
-
},
|
|
600
|
-
/**
|
|
601
|
-
* Execute all schedule callbacks.
|
|
602
|
-
*/
|
|
603
|
-
process: (frameData) => {
|
|
604
|
-
latestFrameData = frameData;
|
|
605
|
-
/**
|
|
606
|
-
* If we're already processing we've probably been triggered by a flushSync
|
|
607
|
-
* inside an existing process. Instead of executing, mark flushNextFrame
|
|
608
|
-
* as true and ensure we flush the following frame at the end of this one.
|
|
609
|
-
*/
|
|
610
|
-
if (isProcessing) {
|
|
611
|
-
flushNextFrame = true;
|
|
612
|
-
return;
|
|
613
|
-
}
|
|
614
|
-
isProcessing = true;
|
|
615
|
-
[thisFrame, nextFrame] = [nextFrame, thisFrame];
|
|
616
|
-
// Execute this frame
|
|
617
|
-
thisFrame.forEach(triggerCallback);
|
|
618
|
-
/**
|
|
619
|
-
* If we're recording stats then
|
|
620
|
-
*/
|
|
621
|
-
if (stepName && statsBuffer.value) {
|
|
622
|
-
statsBuffer.value.frameloop[stepName].push(numCalls);
|
|
623
|
-
}
|
|
624
|
-
numCalls = 0;
|
|
625
|
-
// Clear the frame so no callbacks remain. This is to avoid
|
|
626
|
-
// memory leaks should this render step not run for a while.
|
|
627
|
-
thisFrame.clear();
|
|
628
|
-
isProcessing = false;
|
|
629
|
-
if (flushNextFrame) {
|
|
630
|
-
flushNextFrame = false;
|
|
631
|
-
step.process(frameData);
|
|
632
|
-
}
|
|
633
|
-
},
|
|
634
|
-
};
|
|
635
|
-
return step;
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
const maxElapsed = 40;
|
|
639
|
-
function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
|
|
640
|
-
let runNextFrame = false;
|
|
641
|
-
let useDefaultElapsed = true;
|
|
642
|
-
const state = {
|
|
643
|
-
delta: 0.0,
|
|
644
|
-
timestamp: 0.0,
|
|
645
|
-
isProcessing: false,
|
|
646
|
-
};
|
|
647
|
-
const flagRunNextFrame = () => (runNextFrame = true);
|
|
648
|
-
const steps = stepsOrder.reduce((acc, key) => {
|
|
649
|
-
acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
|
|
650
|
-
return acc;
|
|
651
|
-
}, {});
|
|
652
|
-
const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
|
|
653
|
-
const processBatch = () => {
|
|
654
|
-
const timestamp = performance.now();
|
|
655
|
-
runNextFrame = false;
|
|
656
|
-
{
|
|
657
|
-
state.delta = useDefaultElapsed
|
|
658
|
-
? 1000 / 60
|
|
659
|
-
: Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
|
|
660
|
-
}
|
|
661
|
-
state.timestamp = timestamp;
|
|
662
|
-
state.isProcessing = true;
|
|
663
|
-
// Unrolled render loop for better per-frame performance
|
|
664
|
-
read.process(state);
|
|
665
|
-
resolveKeyframes.process(state);
|
|
666
|
-
update.process(state);
|
|
667
|
-
preRender.process(state);
|
|
668
|
-
render.process(state);
|
|
669
|
-
postRender.process(state);
|
|
670
|
-
state.isProcessing = false;
|
|
671
|
-
if (runNextFrame && allowKeepAlive) {
|
|
672
|
-
useDefaultElapsed = false;
|
|
673
|
-
scheduleNextBatch(processBatch);
|
|
674
|
-
}
|
|
675
|
-
};
|
|
676
|
-
const wake = () => {
|
|
677
|
-
runNextFrame = true;
|
|
678
|
-
useDefaultElapsed = true;
|
|
679
|
-
if (!state.isProcessing) {
|
|
680
|
-
scheduleNextBatch(processBatch);
|
|
681
|
-
}
|
|
682
|
-
};
|
|
683
|
-
const schedule = stepsOrder.reduce((acc, key) => {
|
|
684
|
-
const step = steps[key];
|
|
685
|
-
acc[key] = (process, keepAlive = false, immediate = false) => {
|
|
686
|
-
if (!runNextFrame)
|
|
687
|
-
wake();
|
|
688
|
-
return step.schedule(process, keepAlive, immediate);
|
|
689
|
-
};
|
|
690
|
-
return acc;
|
|
691
|
-
}, {});
|
|
692
|
-
const cancel = (process) => {
|
|
693
|
-
for (let i = 0; i < stepsOrder.length; i++) {
|
|
694
|
-
steps[stepsOrder[i]].cancel(process);
|
|
695
|
-
}
|
|
696
|
-
};
|
|
697
|
-
return { schedule, cancel, state, steps };
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
|
|
701
|
-
|
|
702
535
|
function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
703
536
|
if (elementOrSelector instanceof EventTarget) {
|
|
704
537
|
return [elementOrSelector];
|
|
@@ -715,16 +548,6 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
|
715
548
|
return Array.from(elementOrSelector);
|
|
716
549
|
}
|
|
717
550
|
|
|
718
|
-
/**
|
|
719
|
-
* @deprecated
|
|
720
|
-
*
|
|
721
|
-
* Use cancelFrame(callback) instead.
|
|
722
|
-
*/
|
|
723
|
-
stepsOrder.reduce((acc, key) => {
|
|
724
|
-
acc[key] = (process) => cancelFrame(process);
|
|
725
|
-
return acc;
|
|
726
|
-
}, {});
|
|
727
|
-
|
|
728
551
|
const wrap = (min, max, v) => {
|
|
729
552
|
const rangeSize = max - min;
|
|
730
553
|
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
|
package/dist/cjs/react-client.js
CHANGED
|
@@ -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.7.
|
|
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.
|
|
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)) {
|
package/dist/cjs/react-m.js
CHANGED
|
@@ -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.
|
package/dist/cjs/react-mini.js
CHANGED
|
@@ -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
|
/**
|
|
@@ -503,168 +498,6 @@ function getValueTransition(transition, key) {
|
|
|
503
498
|
transition);
|
|
504
499
|
}
|
|
505
500
|
|
|
506
|
-
const stepsOrder = [
|
|
507
|
-
"read", // Read
|
|
508
|
-
"resolveKeyframes", // Write/Read/Write/Read
|
|
509
|
-
"update", // Compute
|
|
510
|
-
"preRender", // Compute
|
|
511
|
-
"render", // Write
|
|
512
|
-
"postRender", // Compute
|
|
513
|
-
];
|
|
514
|
-
|
|
515
|
-
function createRenderStep(runNextFrame, stepName) {
|
|
516
|
-
/**
|
|
517
|
-
* We create and reuse two queues, one to queue jobs for the current frame
|
|
518
|
-
* and one for the next. We reuse to avoid triggering GC after x frames.
|
|
519
|
-
*/
|
|
520
|
-
let thisFrame = new Set();
|
|
521
|
-
let nextFrame = new Set();
|
|
522
|
-
/**
|
|
523
|
-
* Track whether we're currently processing jobs in this step. This way
|
|
524
|
-
* we can decide whether to schedule new jobs for this frame or next.
|
|
525
|
-
*/
|
|
526
|
-
let isProcessing = false;
|
|
527
|
-
let flushNextFrame = false;
|
|
528
|
-
/**
|
|
529
|
-
* A set of processes which were marked keepAlive when scheduled.
|
|
530
|
-
*/
|
|
531
|
-
const toKeepAlive = new WeakSet();
|
|
532
|
-
let latestFrameData = {
|
|
533
|
-
delta: 0.0,
|
|
534
|
-
timestamp: 0.0,
|
|
535
|
-
isProcessing: false,
|
|
536
|
-
};
|
|
537
|
-
let numCalls = 0;
|
|
538
|
-
function triggerCallback(callback) {
|
|
539
|
-
if (toKeepAlive.has(callback)) {
|
|
540
|
-
step.schedule(callback);
|
|
541
|
-
runNextFrame();
|
|
542
|
-
}
|
|
543
|
-
numCalls++;
|
|
544
|
-
callback(latestFrameData);
|
|
545
|
-
}
|
|
546
|
-
const step = {
|
|
547
|
-
/**
|
|
548
|
-
* Schedule a process to run on the next frame.
|
|
549
|
-
*/
|
|
550
|
-
schedule: (callback, keepAlive = false, immediate = false) => {
|
|
551
|
-
const addToCurrentFrame = immediate && isProcessing;
|
|
552
|
-
const queue = addToCurrentFrame ? thisFrame : nextFrame;
|
|
553
|
-
if (keepAlive)
|
|
554
|
-
toKeepAlive.add(callback);
|
|
555
|
-
if (!queue.has(callback))
|
|
556
|
-
queue.add(callback);
|
|
557
|
-
return callback;
|
|
558
|
-
},
|
|
559
|
-
/**
|
|
560
|
-
* Cancel the provided callback from running on the next frame.
|
|
561
|
-
*/
|
|
562
|
-
cancel: (callback) => {
|
|
563
|
-
nextFrame.delete(callback);
|
|
564
|
-
toKeepAlive.delete(callback);
|
|
565
|
-
},
|
|
566
|
-
/**
|
|
567
|
-
* Execute all schedule callbacks.
|
|
568
|
-
*/
|
|
569
|
-
process: (frameData) => {
|
|
570
|
-
latestFrameData = frameData;
|
|
571
|
-
/**
|
|
572
|
-
* If we're already processing we've probably been triggered by a flushSync
|
|
573
|
-
* inside an existing process. Instead of executing, mark flushNextFrame
|
|
574
|
-
* as true and ensure we flush the following frame at the end of this one.
|
|
575
|
-
*/
|
|
576
|
-
if (isProcessing) {
|
|
577
|
-
flushNextFrame = true;
|
|
578
|
-
return;
|
|
579
|
-
}
|
|
580
|
-
isProcessing = true;
|
|
581
|
-
[thisFrame, nextFrame] = [nextFrame, thisFrame];
|
|
582
|
-
// Execute this frame
|
|
583
|
-
thisFrame.forEach(triggerCallback);
|
|
584
|
-
/**
|
|
585
|
-
* If we're recording stats then
|
|
586
|
-
*/
|
|
587
|
-
if (stepName && statsBuffer.value) {
|
|
588
|
-
statsBuffer.value.frameloop[stepName].push(numCalls);
|
|
589
|
-
}
|
|
590
|
-
numCalls = 0;
|
|
591
|
-
// Clear the frame so no callbacks remain. This is to avoid
|
|
592
|
-
// memory leaks should this render step not run for a while.
|
|
593
|
-
thisFrame.clear();
|
|
594
|
-
isProcessing = false;
|
|
595
|
-
if (flushNextFrame) {
|
|
596
|
-
flushNextFrame = false;
|
|
597
|
-
step.process(frameData);
|
|
598
|
-
}
|
|
599
|
-
},
|
|
600
|
-
};
|
|
601
|
-
return step;
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
const maxElapsed = 40;
|
|
605
|
-
function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
|
|
606
|
-
let runNextFrame = false;
|
|
607
|
-
let useDefaultElapsed = true;
|
|
608
|
-
const state = {
|
|
609
|
-
delta: 0.0,
|
|
610
|
-
timestamp: 0.0,
|
|
611
|
-
isProcessing: false,
|
|
612
|
-
};
|
|
613
|
-
const flagRunNextFrame = () => (runNextFrame = true);
|
|
614
|
-
const steps = stepsOrder.reduce((acc, key) => {
|
|
615
|
-
acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
|
|
616
|
-
return acc;
|
|
617
|
-
}, {});
|
|
618
|
-
const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
|
|
619
|
-
const processBatch = () => {
|
|
620
|
-
const timestamp = performance.now();
|
|
621
|
-
runNextFrame = false;
|
|
622
|
-
{
|
|
623
|
-
state.delta = useDefaultElapsed
|
|
624
|
-
? 1000 / 60
|
|
625
|
-
: Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
|
|
626
|
-
}
|
|
627
|
-
state.timestamp = timestamp;
|
|
628
|
-
state.isProcessing = true;
|
|
629
|
-
// Unrolled render loop for better per-frame performance
|
|
630
|
-
read.process(state);
|
|
631
|
-
resolveKeyframes.process(state);
|
|
632
|
-
update.process(state);
|
|
633
|
-
preRender.process(state);
|
|
634
|
-
render.process(state);
|
|
635
|
-
postRender.process(state);
|
|
636
|
-
state.isProcessing = false;
|
|
637
|
-
if (runNextFrame && allowKeepAlive) {
|
|
638
|
-
useDefaultElapsed = false;
|
|
639
|
-
scheduleNextBatch(processBatch);
|
|
640
|
-
}
|
|
641
|
-
};
|
|
642
|
-
const wake = () => {
|
|
643
|
-
runNextFrame = true;
|
|
644
|
-
useDefaultElapsed = true;
|
|
645
|
-
if (!state.isProcessing) {
|
|
646
|
-
scheduleNextBatch(processBatch);
|
|
647
|
-
}
|
|
648
|
-
};
|
|
649
|
-
const schedule = stepsOrder.reduce((acc, key) => {
|
|
650
|
-
const step = steps[key];
|
|
651
|
-
acc[key] = (process, keepAlive = false, immediate = false) => {
|
|
652
|
-
if (!runNextFrame)
|
|
653
|
-
wake();
|
|
654
|
-
return step.schedule(process, keepAlive, immediate);
|
|
655
|
-
};
|
|
656
|
-
return acc;
|
|
657
|
-
}, {});
|
|
658
|
-
const cancel = (process) => {
|
|
659
|
-
for (let i = 0; i < stepsOrder.length; i++) {
|
|
660
|
-
steps[stepsOrder[i]].cancel(process);
|
|
661
|
-
}
|
|
662
|
-
};
|
|
663
|
-
return { schedule, cancel, state, steps };
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
|
|
667
|
-
|
|
668
501
|
function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
669
502
|
if (elementOrSelector instanceof EventTarget) {
|
|
670
503
|
return [elementOrSelector];
|
|
@@ -681,16 +514,6 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
|
681
514
|
return Array.from(elementOrSelector);
|
|
682
515
|
}
|
|
683
516
|
|
|
684
|
-
/**
|
|
685
|
-
* @deprecated
|
|
686
|
-
*
|
|
687
|
-
* Use cancelFrame(callback) instead.
|
|
688
|
-
*/
|
|
689
|
-
stepsOrder.reduce((acc, key) => {
|
|
690
|
-
acc[key] = (process) => cancelFrame(process);
|
|
691
|
-
return acc;
|
|
692
|
-
}, {});
|
|
693
|
-
|
|
694
517
|
function animateElements(elementOrSelector, keyframes, options, scope) {
|
|
695
518
|
const elements = resolveElements(elementOrSelector, scope);
|
|
696
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];
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
+
import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
|
|
1
2
|
import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
|
-
import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
|
|
3
|
-
import { NativeAnimation } from '../../../../../../motion-dom/dist/es/animation/NativeAnimation.mjs';
|
|
4
3
|
import { getValueTransition } from '../../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
|
|
5
|
-
import {
|
|
6
|
-
import '../../../../../../motion-
|
|
4
|
+
import { NativeAnimation } from '../../../../../../motion-dom/dist/es/animation/NativeAnimation.mjs';
|
|
5
|
+
import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
|
|
7
6
|
|
|
8
7
|
function animateElements(elementOrSelector, keyframes, options, scope) {
|
|
9
8
|
const elements = resolveElements(elementOrSelector, scope);
|
|
@@ -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 { createAnimationsFromSequence } from '../../sequence/create.mjs';
|
|
5
2
|
import { animateElements } from './animate-elements.mjs';
|
|
3
|
+
import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
|
|
6
4
|
|
|
7
5
|
function animateSequence(definition, options) {
|
|
8
6
|
const animations = [];
|