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.
- package/dist/cjs/debug.js +0 -2
- package/dist/cjs/index.js +4 -7
- package/dist/cjs/mini.js +1 -181
- package/dist/cjs/react-client.js +4 -14
- package/dist/cjs/react-m.js +1 -11
- package/dist/cjs/react-mini.js +1 -181
- 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 +4 -7
- 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 +4 -7
- package/dist/motion.js +1 -1
- package/package.json +3 -3
package/dist/cjs/debug.js
CHANGED
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.
|
|
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.
|
|
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.
|
|
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;
|
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.
|
|
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
|
/**
|
|
@@ -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];
|