framer-motion 12.6.2 → 12.6.3
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/client.js +1 -1
- package/dist/cjs/{create-BLp_edji.js → create-B2InJs4e.js} +68 -115
- package/dist/cjs/dom-mini.js +14 -219
- package/dist/cjs/dom.js +56 -199
- package/dist/cjs/index.js +32 -156
- package/dist/cjs/m.js +8 -12
- package/dist/cjs/mini.js +10 -214
- package/dist/dom-mini.d.ts +3 -3
- package/dist/dom-mini.js +1 -1
- package/dist/dom.d.ts +17 -14
- package/dist/dom.js +1 -1
- package/dist/es/animation/animate/index.mjs +2 -2
- package/dist/es/animation/animators/AcceleratedAnimation.mjs +5 -3
- package/dist/es/animation/animators/MainThreadAnimation.mjs +6 -4
- package/dist/es/animation/animators/waapi/animate-elements.mjs +10 -9
- package/dist/es/animation/animators/waapi/animate-sequence.mjs +2 -2
- package/dist/es/animation/animators/waapi/animate-style.mjs +2 -2
- package/dist/es/animation/generators/spring/index.mjs +9 -1
- package/dist/es/animation/interfaces/motion-value.mjs +2 -2
- package/dist/es/animation/interfaces/visual-element-target.mjs +1 -2
- package/dist/es/animation/interfaces/visual-element-variant.mjs +1 -2
- package/dist/es/animation/optimized-appear/handoff.mjs +2 -4
- package/dist/es/animation/optimized-appear/start.mjs +4 -6
- package/dist/es/animation/sequence/create.mjs +2 -2
- package/dist/es/animation/sequence/utils/calc-time.mjs +1 -2
- package/dist/es/components/AnimatePresence/index.mjs +2 -2
- package/dist/es/gestures/drag/VisualElementDragControls.mjs +5 -10
- package/dist/es/motion/features/animation/index.mjs +1 -2
- package/dist/es/motion/index.mjs +2 -3
- package/dist/es/motion/utils/use-visual-element.mjs +3 -5
- package/dist/es/projection/node/create-projection-node.mjs +17 -25
- package/dist/es/projection/styles/transform.mjs +1 -1
- package/dist/es/render/VisualElement.mjs +3 -4
- package/dist/es/render/dom/DOMKeyframesResolver.mjs +1 -2
- package/dist/es/render/dom/resize/handle-element.mjs +5 -6
- package/dist/es/render/dom/scroll/track.mjs +1 -2
- package/dist/es/render/dom/utils/css-variables-conversion.mjs +1 -1
- package/dist/es/render/dom/utils/filter-props.mjs +1 -1
- package/dist/es/render/html/utils/scrape-motion-values.mjs +1 -2
- package/dist/es/render/utils/KeyframesResolver.mjs +2 -3
- package/dist/es/render/utils/animation-state.mjs +3 -5
- package/dist/es/render/utils/motion-values.mjs +1 -1
- package/dist/es/render/utils/resolve-variants.mjs +1 -1
- package/dist/es/utils/mix/complex.mjs +1 -2
- package/dist/es/value/types/complex/index.mjs +2 -3
- package/dist/es/value/use-scroll.mjs +2 -2
- package/dist/framer-motion.dev.js +445 -414
- package/dist/framer-motion.js +1 -1
- package/dist/mini.d.ts +1 -1
- package/dist/mini.js +1 -1
- package/dist/size-rollup-animate.js +1 -1
- package/dist/size-rollup-dom-animation-assets.js +1 -1
- package/dist/size-rollup-dom-animation-m.js +1 -1
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max-assets.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/dist/size-rollup-scroll.js +1 -1
- package/dist/size-rollup-waapi-animate.js +1 -1
- package/dist/types/index.d.ts +28 -31
- package/package.json +4 -4
- package/dist/es/animation/animators/waapi/NativeAnimation.mjs +0 -112
- package/dist/es/animation/animators/waapi/index.mjs +0 -32
- package/dist/es/animation/animators/waapi/utils/style.mjs +0 -8
- package/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs +0 -13
package/dist/cjs/client.js
CHANGED
|
@@ -477,11 +477,10 @@ const color = {
|
|
|
477
477
|
const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
|
|
478
478
|
|
|
479
479
|
function test(v) {
|
|
480
|
-
var _a, _b;
|
|
481
480
|
return (isNaN(v) &&
|
|
482
481
|
typeof v === "string" &&
|
|
483
|
-
(
|
|
484
|
-
(
|
|
482
|
+
(v.match(floatRegex)?.length || 0) +
|
|
483
|
+
(v.match(colorRegex)?.length || 0) >
|
|
485
484
|
0);
|
|
486
485
|
}
|
|
487
486
|
const NUMBER_TOKEN = "number";
|
|
@@ -869,8 +868,7 @@ function measureAllKeyframes() {
|
|
|
869
868
|
const restore = transformsToRestore.get(element);
|
|
870
869
|
if (restore) {
|
|
871
870
|
restore.forEach(([key, value]) => {
|
|
872
|
-
|
|
873
|
-
(_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
|
|
871
|
+
element.getValue(key)?.set(value);
|
|
874
872
|
});
|
|
875
873
|
}
|
|
876
874
|
});
|
|
@@ -957,7 +955,7 @@ class KeyframeResolver {
|
|
|
957
955
|
* If the first keyframe is null, we need to find its value by sampling the element
|
|
958
956
|
*/
|
|
959
957
|
if (i === 0) {
|
|
960
|
-
const currentValue = motionValue
|
|
958
|
+
const currentValue = motionValue?.get();
|
|
961
959
|
const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
|
|
962
960
|
if (currentValue !== undefined) {
|
|
963
961
|
unresolvedKeyframes[0] = currentValue;
|
|
@@ -1038,7 +1036,7 @@ function parseCSSVariable(current) {
|
|
|
1038
1036
|
if (!match)
|
|
1039
1037
|
return [,];
|
|
1040
1038
|
const [, token1, token2, fallback] = match;
|
|
1041
|
-
return [`--${token1
|
|
1039
|
+
return [`--${token1 ?? token2}`, fallback];
|
|
1042
1040
|
}
|
|
1043
1041
|
const maxDepth = 4;
|
|
1044
1042
|
function getVariableValue(current, element, depth = 1) {
|
|
@@ -1177,7 +1175,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
|
|
|
1177
1175
|
}
|
|
1178
1176
|
}
|
|
1179
1177
|
measureEndState() {
|
|
1180
|
-
var _a;
|
|
1181
1178
|
const { element, name, unresolvedKeyframes } = this;
|
|
1182
1179
|
if (!element || !element.current)
|
|
1183
1180
|
return;
|
|
@@ -1190,7 +1187,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
|
|
|
1190
1187
|
this.finalKeyframe = finalKeyframe;
|
|
1191
1188
|
}
|
|
1192
1189
|
// If we removed transform values, reapply them before the next render
|
|
1193
|
-
if (
|
|
1190
|
+
if (this.removedTransforms?.length) {
|
|
1194
1191
|
this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
|
|
1195
1192
|
element
|
|
1196
1193
|
.getValue(unsetTransformName)
|
|
@@ -1546,13 +1543,12 @@ function mixObject(a, b) {
|
|
|
1546
1543
|
};
|
|
1547
1544
|
}
|
|
1548
1545
|
function matchOrder(origin, target) {
|
|
1549
|
-
var _a;
|
|
1550
1546
|
const orderedOrigin = [];
|
|
1551
1547
|
const pointers = { color: 0, var: 0, number: 0 };
|
|
1552
1548
|
for (let i = 0; i < target.values.length; i++) {
|
|
1553
1549
|
const type = target.types[i];
|
|
1554
1550
|
const originIndex = origin.indexes[type][pointers[type]];
|
|
1555
|
-
const originValue =
|
|
1551
|
+
const originValue = origin.values[originIndex] ?? 0;
|
|
1556
1552
|
orderedOrigin[i] = originValue;
|
|
1557
1553
|
pointers[type]++;
|
|
1558
1554
|
}
|
|
@@ -1856,9 +1852,17 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
|
|
|
1856
1852
|
const easing = motionDom.generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
|
|
1857
1853
|
return calculatedDuration + "ms " + easing;
|
|
1858
1854
|
},
|
|
1855
|
+
toTransition: () => { },
|
|
1859
1856
|
};
|
|
1860
1857
|
return generator;
|
|
1861
1858
|
}
|
|
1859
|
+
spring.applyToOptions = (options) => {
|
|
1860
|
+
const generatorOptions = motionDom.createGeneratorEasing(options, 100, spring);
|
|
1861
|
+
options.ease = motionDom.supportsLinearEasing() ? generatorOptions.ease : "easeOut";
|
|
1862
|
+
options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
|
|
1863
|
+
options.type = "keyframes";
|
|
1864
|
+
return options;
|
|
1865
|
+
};
|
|
1862
1866
|
|
|
1863
1867
|
function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
|
|
1864
1868
|
const origin = keyframes[0];
|
|
@@ -2180,7 +2184,7 @@ class MainThreadAnimation extends BaseAnimation {
|
|
|
2180
2184
|
onStop && onStop();
|
|
2181
2185
|
};
|
|
2182
2186
|
const { name, motionValue, element, keyframes } = this.options;
|
|
2183
|
-
const KeyframeResolver$1 =
|
|
2187
|
+
const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
|
|
2184
2188
|
const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
|
|
2185
2189
|
this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
|
|
2186
2190
|
this.resolver.scheduleResolve();
|
|
@@ -2430,7 +2434,7 @@ class MainThreadAnimation extends BaseAnimation {
|
|
|
2430
2434
|
this.startTime = now - this.holdTime;
|
|
2431
2435
|
}
|
|
2432
2436
|
else if (!this.startTime) {
|
|
2433
|
-
this.startTime = startTime
|
|
2437
|
+
this.startTime = startTime ?? this.calcStartTime();
|
|
2434
2438
|
}
|
|
2435
2439
|
else if (this.state === "finished") {
|
|
2436
2440
|
this.startTime = now;
|
|
@@ -2448,13 +2452,12 @@ class MainThreadAnimation extends BaseAnimation {
|
|
|
2448
2452
|
this.driver.start();
|
|
2449
2453
|
}
|
|
2450
2454
|
pause() {
|
|
2451
|
-
var _a;
|
|
2452
2455
|
if (!this._resolved) {
|
|
2453
2456
|
this.pendingPlayState = "paused";
|
|
2454
2457
|
return;
|
|
2455
2458
|
}
|
|
2456
2459
|
this.state = "paused";
|
|
2457
|
-
this.holdTime =
|
|
2460
|
+
this.holdTime = this.currentTime ?? 0;
|
|
2458
2461
|
}
|
|
2459
2462
|
complete() {
|
|
2460
2463
|
if (this.state !== "running") {
|
|
@@ -2495,6 +2498,9 @@ class MainThreadAnimation extends BaseAnimation {
|
|
|
2495
2498
|
this.startTime = 0;
|
|
2496
2499
|
return this.tick(time, true);
|
|
2497
2500
|
}
|
|
2501
|
+
get finished() {
|
|
2502
|
+
return this.currentFinishedPromise;
|
|
2503
|
+
}
|
|
2498
2504
|
}
|
|
2499
2505
|
// Legacy interface
|
|
2500
2506
|
function animateValue(options) {
|
|
@@ -2514,35 +2520,6 @@ const acceleratedValues = new Set([
|
|
|
2514
2520
|
// "background-color"
|
|
2515
2521
|
]);
|
|
2516
2522
|
|
|
2517
|
-
function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
|
|
2518
|
-
const keyframeOptions = { [valueName]: keyframes };
|
|
2519
|
-
if (times)
|
|
2520
|
-
keyframeOptions.offset = times;
|
|
2521
|
-
const easing = motionDom.mapEasingToNativeEasing(ease, duration);
|
|
2522
|
-
/**
|
|
2523
|
-
* If this is an easing array, apply to keyframes, not animation as a whole
|
|
2524
|
-
*/
|
|
2525
|
-
if (Array.isArray(easing))
|
|
2526
|
-
keyframeOptions.easing = easing;
|
|
2527
|
-
if (motionDom.statsBuffer.value) {
|
|
2528
|
-
motionDom.activeAnimations.waapi++;
|
|
2529
|
-
}
|
|
2530
|
-
const animation = element.animate(keyframeOptions, {
|
|
2531
|
-
delay,
|
|
2532
|
-
duration,
|
|
2533
|
-
easing: !Array.isArray(easing) ? easing : "linear",
|
|
2534
|
-
fill: "both",
|
|
2535
|
-
iterations: repeat + 1,
|
|
2536
|
-
direction: repeatType === "reverse" ? "alternate" : "normal",
|
|
2537
|
-
});
|
|
2538
|
-
if (motionDom.statsBuffer.value) {
|
|
2539
|
-
animation.finished.finally(() => {
|
|
2540
|
-
motionDom.activeAnimations.waapi--;
|
|
2541
|
-
});
|
|
2542
|
-
}
|
|
2543
|
-
return animation;
|
|
2544
|
-
}
|
|
2545
|
-
|
|
2546
2523
|
const supportsWaapi = /*@__PURE__*/ motionUtils.memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
|
|
2547
2524
|
|
|
2548
2525
|
/**
|
|
@@ -2650,10 +2627,10 @@ class AcceleratedAnimation extends BaseAnimation {
|
|
|
2650
2627
|
ease = pregeneratedAnimation.ease;
|
|
2651
2628
|
type = "keyframes";
|
|
2652
2629
|
}
|
|
2653
|
-
const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
|
|
2630
|
+
const animation = motionDom.startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
|
|
2654
2631
|
// Override the browser calculated startTime with one synchronised to other JS
|
|
2655
2632
|
// and WAAPI animations starting this event loop.
|
|
2656
|
-
animation.startTime = startTime
|
|
2633
|
+
animation.startTime = startTime ?? this.calcStartTime();
|
|
2657
2634
|
if (this.pendingTimeline) {
|
|
2658
2635
|
motionDom.attachTimeline(animation, this.pendingTimeline);
|
|
2659
2636
|
this.pendingTimeline = undefined;
|
|
@@ -2712,6 +2689,9 @@ class AcceleratedAnimation extends BaseAnimation {
|
|
|
2712
2689
|
const { animation } = resolved;
|
|
2713
2690
|
return animation.playbackRate;
|
|
2714
2691
|
}
|
|
2692
|
+
get finished() {
|
|
2693
|
+
return this.resolved.animation.finished;
|
|
2694
|
+
}
|
|
2715
2695
|
set speed(newSpeed) {
|
|
2716
2696
|
const { resolved } = this;
|
|
2717
2697
|
if (!resolved)
|
|
@@ -2983,7 +2963,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
|
|
|
2983
2963
|
});
|
|
2984
2964
|
// We still want to return some animation controls here rather
|
|
2985
2965
|
// than returning undefined
|
|
2986
|
-
return new motionDom.
|
|
2966
|
+
return new motionDom.GroupAnimationWithThen([]);
|
|
2987
2967
|
}
|
|
2988
2968
|
}
|
|
2989
2969
|
/**
|
|
@@ -3561,7 +3541,7 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
|
|
|
3561
3541
|
*/
|
|
3562
3542
|
const xTranslate = delta.x.translate / treeScale.x;
|
|
3563
3543
|
const yTranslate = delta.y.translate / treeScale.y;
|
|
3564
|
-
const zTranslate =
|
|
3544
|
+
const zTranslate = latestTransform?.z || 0;
|
|
3565
3545
|
if (xTranslate || yTranslate || zTranslate) {
|
|
3566
3546
|
transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
|
|
3567
3547
|
}
|
|
@@ -3664,7 +3644,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
|
|
|
3664
3644
|
}
|
|
3665
3645
|
function createProjectionNode$1({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
|
|
3666
3646
|
return class ProjectionNode {
|
|
3667
|
-
constructor(latestValues = {}, parent = defaultParent
|
|
3647
|
+
constructor(latestValues = {}, parent = defaultParent?.()) {
|
|
3668
3648
|
/**
|
|
3669
3649
|
* A unique ID generated for every projection node.
|
|
3670
3650
|
*/
|
|
@@ -4195,12 +4175,11 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4195
4175
|
};
|
|
4196
4176
|
}
|
|
4197
4177
|
measurePageBox() {
|
|
4198
|
-
var _a;
|
|
4199
4178
|
const { visualElement } = this.options;
|
|
4200
4179
|
if (!visualElement)
|
|
4201
4180
|
return createBox();
|
|
4202
4181
|
const box = visualElement.measureViewportBox();
|
|
4203
|
-
const wasInScrollRoot =
|
|
4182
|
+
const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
|
|
4204
4183
|
if (!wasInScrollRoot) {
|
|
4205
4184
|
// Remove viewport scroll to give page-relative coordinates
|
|
4206
4185
|
const { scroll } = this.root;
|
|
@@ -4212,10 +4191,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4212
4191
|
return box;
|
|
4213
4192
|
}
|
|
4214
4193
|
removeElementScroll(box) {
|
|
4215
|
-
var _a;
|
|
4216
4194
|
const boxWithoutScroll = createBox();
|
|
4217
4195
|
copyBoxInto(boxWithoutScroll, box);
|
|
4218
|
-
if (
|
|
4196
|
+
if (this.scroll?.wasRoot) {
|
|
4219
4197
|
return boxWithoutScroll;
|
|
4220
4198
|
}
|
|
4221
4199
|
/**
|
|
@@ -4318,7 +4296,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4318
4296
|
}
|
|
4319
4297
|
}
|
|
4320
4298
|
resolveTargetDelta(forceRecalculation = false) {
|
|
4321
|
-
var _a;
|
|
4322
4299
|
/**
|
|
4323
4300
|
* Once the dirty status of nodes has been spread through the tree, we also
|
|
4324
4301
|
* need to check if we have a shared node of a different depth that has itself
|
|
@@ -4336,7 +4313,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4336
4313
|
const canSkip = !(forceRecalculation ||
|
|
4337
4314
|
(isShared && this.isSharedProjectionDirty) ||
|
|
4338
4315
|
this.isProjectionDirty ||
|
|
4339
|
-
|
|
4316
|
+
this.parent?.isProjectionDirty ||
|
|
4340
4317
|
this.attemptToResolveRelativeTarget ||
|
|
4341
4318
|
this.root.updateBlockedByResize);
|
|
4342
4319
|
if (canSkip)
|
|
@@ -4461,7 +4438,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4461
4438
|
this.layout);
|
|
4462
4439
|
}
|
|
4463
4440
|
calcProjection() {
|
|
4464
|
-
var _a;
|
|
4465
4441
|
const lead = this.getLead();
|
|
4466
4442
|
const isShared = Boolean(this.resumingFrom) || this !== lead;
|
|
4467
4443
|
let canSkip = true;
|
|
@@ -4469,7 +4445,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4469
4445
|
* If this is a normal layout animation and neither this node nor its nearest projecting
|
|
4470
4446
|
* is dirty then we can't skip.
|
|
4471
4447
|
*/
|
|
4472
|
-
if (this.isProjectionDirty ||
|
|
4448
|
+
if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
|
|
4473
4449
|
canSkip = false;
|
|
4474
4450
|
}
|
|
4475
4451
|
/**
|
|
@@ -4581,8 +4557,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4581
4557
|
// TODO: Schedule render
|
|
4582
4558
|
}
|
|
4583
4559
|
scheduleRender(notifyAll = true) {
|
|
4584
|
-
|
|
4585
|
-
(_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
|
|
4560
|
+
this.options.visualElement?.scheduleRender();
|
|
4586
4561
|
if (notifyAll) {
|
|
4587
4562
|
const stack = this.getStack();
|
|
4588
4563
|
stack && stack.scheduleRender();
|
|
@@ -4769,14 +4744,12 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4769
4744
|
return stack ? stack.lead === this : true;
|
|
4770
4745
|
}
|
|
4771
4746
|
getLead() {
|
|
4772
|
-
var _a;
|
|
4773
4747
|
const { layoutId } = this.options;
|
|
4774
|
-
return layoutId ?
|
|
4748
|
+
return layoutId ? this.getStack()?.lead || this : this;
|
|
4775
4749
|
}
|
|
4776
4750
|
getPrevLead() {
|
|
4777
|
-
var _a;
|
|
4778
4751
|
const { layoutId } = this.options;
|
|
4779
|
-
return layoutId ?
|
|
4752
|
+
return layoutId ? this.getStack()?.prevLead : undefined;
|
|
4780
4753
|
}
|
|
4781
4754
|
getStack() {
|
|
4782
4755
|
const { layoutId } = this.options;
|
|
@@ -4850,7 +4823,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4850
4823
|
visualElement.scheduleRender();
|
|
4851
4824
|
}
|
|
4852
4825
|
getProjectionStyles(styleProp) {
|
|
4853
|
-
var _a, _b;
|
|
4854
4826
|
if (!this.instance || this.isSVG)
|
|
4855
4827
|
return undefined;
|
|
4856
4828
|
if (!this.isVisible) {
|
|
@@ -4864,7 +4836,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4864
4836
|
this.needsReset = false;
|
|
4865
4837
|
styles.opacity = "";
|
|
4866
4838
|
styles.pointerEvents =
|
|
4867
|
-
resolveMotionValue(styleProp
|
|
4839
|
+
resolveMotionValue(styleProp?.pointerEvents) || "";
|
|
4868
4840
|
styles.transform = transformTemplate
|
|
4869
4841
|
? transformTemplate(this.latestValues, "")
|
|
4870
4842
|
: "none";
|
|
@@ -4879,7 +4851,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4879
4851
|
? this.latestValues.opacity
|
|
4880
4852
|
: 1;
|
|
4881
4853
|
emptyStyles.pointerEvents =
|
|
4882
|
-
resolveMotionValue(styleProp
|
|
4854
|
+
resolveMotionValue(styleProp?.pointerEvents) || "";
|
|
4883
4855
|
}
|
|
4884
4856
|
if (this.hasProjected && !hasTransform(this.latestValues)) {
|
|
4885
4857
|
emptyStyles.transform = transformTemplate
|
|
@@ -4904,7 +4876,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4904
4876
|
*/
|
|
4905
4877
|
styles.opacity =
|
|
4906
4878
|
lead === this
|
|
4907
|
-
?
|
|
4879
|
+
? valuesToRender.opacity ??
|
|
4880
|
+
this.latestValues.opacity ??
|
|
4881
|
+
1
|
|
4908
4882
|
: this.preserveOpacity
|
|
4909
4883
|
? this.latestValues.opacity
|
|
4910
4884
|
: valuesToRender.opacityExit;
|
|
@@ -4965,7 +4939,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4965
4939
|
if (this.options.layoutId) {
|
|
4966
4940
|
styles.pointerEvents =
|
|
4967
4941
|
lead === this
|
|
4968
|
-
? resolveMotionValue(styleProp
|
|
4942
|
+
? resolveMotionValue(styleProp?.pointerEvents) || ""
|
|
4969
4943
|
: "none";
|
|
4970
4944
|
}
|
|
4971
4945
|
return styles;
|
|
@@ -4975,7 +4949,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
4975
4949
|
}
|
|
4976
4950
|
// Only run on root
|
|
4977
4951
|
resetTree() {
|
|
4978
|
-
this.root.nodes.forEach((node) =>
|
|
4952
|
+
this.root.nodes.forEach((node) => node.currentAnimation?.stop());
|
|
4979
4953
|
this.root.nodes.forEach(clearMeasurements);
|
|
4980
4954
|
this.root.sharedNodes.clear();
|
|
4981
4955
|
}
|
|
@@ -4985,8 +4959,7 @@ function updateLayout(node) {
|
|
|
4985
4959
|
node.updateLayout();
|
|
4986
4960
|
}
|
|
4987
4961
|
function notifyLayoutUpdate(node) {
|
|
4988
|
-
|
|
4989
|
-
const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
|
|
4962
|
+
const snapshot = node.resumeFrom?.snapshot || node.snapshot;
|
|
4990
4963
|
if (node.isLead() &&
|
|
4991
4964
|
node.layout &&
|
|
4992
4965
|
snapshot &&
|
|
@@ -5192,8 +5165,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
|
|
|
5192
5165
|
!isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
|
|
5193
5166
|
}
|
|
5194
5167
|
function checkNodeWasScrollRoot(node) {
|
|
5195
|
-
|
|
5196
|
-
return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
|
|
5168
|
+
return node !== node.root && node.scroll?.wasRoot;
|
|
5197
5169
|
}
|
|
5198
5170
|
|
|
5199
5171
|
function addDomEvent(target, eventName, handler, options = { passive: true }) {
|
|
@@ -5451,7 +5423,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
5451
5423
|
* and warn against mismatches.
|
|
5452
5424
|
*/
|
|
5453
5425
|
if (process.env.NODE_ENV === "development") {
|
|
5454
|
-
motionUtils.warnOnce(nextValue.version === "12.6.
|
|
5426
|
+
motionUtils.warnOnce(nextValue.version === "12.6.3", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3 may not work as expected.`);
|
|
5455
5427
|
}
|
|
5456
5428
|
}
|
|
5457
5429
|
else if (isMotionValue(prevValue)) {
|
|
@@ -5492,7 +5464,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
5492
5464
|
|
|
5493
5465
|
function getValueState(visualElement) {
|
|
5494
5466
|
const state = [{}, {}];
|
|
5495
|
-
visualElement
|
|
5467
|
+
visualElement?.values.forEach((value, key) => {
|
|
5496
5468
|
state[0][key] = value.get();
|
|
5497
5469
|
state[1][key] = value.getVelocity();
|
|
5498
5470
|
});
|
|
@@ -5910,10 +5882,10 @@ class VisualElement {
|
|
|
5910
5882
|
* directly from the instance (which might have performance implications).
|
|
5911
5883
|
*/
|
|
5912
5884
|
readValue(key, target) {
|
|
5913
|
-
var _a;
|
|
5914
5885
|
let value = this.latestValues[key] !== undefined || !this.current
|
|
5915
5886
|
? this.latestValues[key]
|
|
5916
|
-
:
|
|
5887
|
+
: this.getBaseTargetFromProps(this.props, key) ??
|
|
5888
|
+
this.readValueFromInstance(this.current, key, this.options);
|
|
5917
5889
|
if (value !== undefined && value !== null) {
|
|
5918
5890
|
if (typeof value === "string" &&
|
|
5919
5891
|
(isNumericalString(value) || isZeroValueString(value))) {
|
|
@@ -5939,11 +5911,10 @@ class VisualElement {
|
|
|
5939
5911
|
* props.
|
|
5940
5912
|
*/
|
|
5941
5913
|
getBaseTarget(key) {
|
|
5942
|
-
var _a;
|
|
5943
5914
|
const { initial } = this.props;
|
|
5944
5915
|
let valueFromInitial;
|
|
5945
5916
|
if (typeof initial === "string" || typeof initial === "object") {
|
|
5946
|
-
const variant = resolveVariantFromProps(this.props, initial,
|
|
5917
|
+
const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
|
|
5947
5918
|
if (variant) {
|
|
5948
5919
|
valueFromInitial = variant[key];
|
|
5949
5920
|
}
|
|
@@ -6161,7 +6132,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
|
|
|
6161
6132
|
}
|
|
6162
6133
|
|
|
6163
6134
|
function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
|
|
6164
|
-
var _a;
|
|
6165
6135
|
const { style } = props;
|
|
6166
6136
|
const newValues = {};
|
|
6167
6137
|
for (const key in style) {
|
|
@@ -6169,7 +6139,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
|
|
|
6169
6139
|
(prevProps.style &&
|
|
6170
6140
|
isMotionValue(prevProps.style[key])) ||
|
|
6171
6141
|
isForcedMotionValue(key, props) ||
|
|
6172
|
-
|
|
6142
|
+
visualElement?.getValue(key)?.liveStyle !== undefined) {
|
|
6173
6143
|
newValues[key] = style[key];
|
|
6174
6144
|
}
|
|
6175
6145
|
}
|
|
@@ -6303,7 +6273,7 @@ try {
|
|
|
6303
6273
|
*/
|
|
6304
6274
|
loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
|
|
6305
6275
|
}
|
|
6306
|
-
catch
|
|
6276
|
+
catch {
|
|
6307
6277
|
// We don't need to actually do anything here - the fallback is the existing `isPropValid`.
|
|
6308
6278
|
}
|
|
6309
6279
|
function filterProps(props, isDom, forwardMotionProps) {
|
|
@@ -6385,7 +6355,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
|
|
|
6385
6355
|
return shouldBlock;
|
|
6386
6356
|
}
|
|
6387
6357
|
function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
|
|
6388
|
-
var _a;
|
|
6389
6358
|
let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
|
|
6390
6359
|
if (transitionOverride)
|
|
6391
6360
|
transition = transitionOverride;
|
|
@@ -6394,7 +6363,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
|
|
|
6394
6363
|
visualElement.animationState &&
|
|
6395
6364
|
visualElement.animationState.getState()[type];
|
|
6396
6365
|
for (const key in target) {
|
|
6397
|
-
const value = visualElement.getValue(key,
|
|
6366
|
+
const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
|
|
6398
6367
|
const valueTarget = target[key];
|
|
6399
6368
|
if (valueTarget === undefined ||
|
|
6400
6369
|
(animationTypeState &&
|
|
@@ -6440,9 +6409,8 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
|
|
|
6440
6409
|
}
|
|
6441
6410
|
|
|
6442
6411
|
function animateVariant(visualElement, variant, options = {}) {
|
|
6443
|
-
var _a;
|
|
6444
6412
|
const resolved = resolveVariant(visualElement, variant, options.type === "exit"
|
|
6445
|
-
?
|
|
6413
|
+
? visualElement.presenceContext?.custom
|
|
6446
6414
|
: undefined);
|
|
6447
6415
|
let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
|
|
6448
6416
|
if (options.transitionOverride) {
|
|
@@ -6573,9 +6541,8 @@ function createAnimationState(visualElement) {
|
|
|
6573
6541
|
* each active animation type into an object of resolved values for it.
|
|
6574
6542
|
*/
|
|
6575
6543
|
const buildResolvedTypeValues = (type) => (acc, definition) => {
|
|
6576
|
-
var _a;
|
|
6577
6544
|
const resolved = resolveVariant(visualElement, definition, type === "exit"
|
|
6578
|
-
?
|
|
6545
|
+
? visualElement.presenceContext?.custom
|
|
6579
6546
|
: undefined);
|
|
6580
6547
|
if (resolved) {
|
|
6581
6548
|
const { transition, transitionEnd, ...target } = resolved;
|
|
@@ -6823,7 +6790,7 @@ function createAnimationState(visualElement) {
|
|
|
6823
6790
|
if (motionValue)
|
|
6824
6791
|
motionValue.liveStyle = true;
|
|
6825
6792
|
// @ts-expect-error - @mattgperry to figure if we should do something here
|
|
6826
|
-
fallbackAnimation[key] = fallbackTarget
|
|
6793
|
+
fallbackAnimation[key] = fallbackTarget ?? null;
|
|
6827
6794
|
});
|
|
6828
6795
|
animations.push({ animation: fallbackAnimation });
|
|
6829
6796
|
}
|
|
@@ -6840,12 +6807,11 @@ function createAnimationState(visualElement) {
|
|
|
6840
6807
|
* Change whether a certain animation type is active.
|
|
6841
6808
|
*/
|
|
6842
6809
|
function setActive(type, isActive) {
|
|
6843
|
-
var _a;
|
|
6844
6810
|
// If the active state hasn't changed, we can safely do nothing here
|
|
6845
6811
|
if (state[type].isActive === isActive)
|
|
6846
6812
|
return Promise.resolve();
|
|
6847
6813
|
// Propagate active change to children
|
|
6848
|
-
|
|
6814
|
+
visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
|
|
6849
6815
|
state[type].isActive = isActive;
|
|
6850
6816
|
const animations = animateChanges(type);
|
|
6851
6817
|
for (const key in state) {
|
|
@@ -6931,9 +6897,8 @@ class AnimationFeature extends Feature {
|
|
|
6931
6897
|
}
|
|
6932
6898
|
}
|
|
6933
6899
|
unmount() {
|
|
6934
|
-
var _a;
|
|
6935
6900
|
this.node.animationState.reset();
|
|
6936
|
-
|
|
6901
|
+
this.unmountControls?.();
|
|
6937
6902
|
}
|
|
6938
6903
|
}
|
|
6939
6904
|
|
|
@@ -7401,11 +7366,8 @@ class VisualElementDragControls {
|
|
|
7401
7366
|
onDrag && onDrag(event, info);
|
|
7402
7367
|
};
|
|
7403
7368
|
const onSessionEnd = (event, info) => this.stop(event, info);
|
|
7404
|
-
const resumeAnimation = () => eachAxis((axis) =>
|
|
7405
|
-
|
|
7406
|
-
return this.getAnimationState(axis) === "paused" &&
|
|
7407
|
-
((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
|
|
7408
|
-
});
|
|
7369
|
+
const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
|
|
7370
|
+
this.getAxisMotionValue(axis).animation?.play());
|
|
7409
7371
|
const { dragSnapToOrigin } = this.getProps();
|
|
7410
7372
|
this.panSession = new PanSession(originEvent, {
|
|
7411
7373
|
onSessionStart,
|
|
@@ -7460,12 +7422,11 @@ class VisualElementDragControls {
|
|
|
7460
7422
|
axisValue.set(next);
|
|
7461
7423
|
}
|
|
7462
7424
|
resolveConstraints() {
|
|
7463
|
-
var _a;
|
|
7464
7425
|
const { dragConstraints, dragElastic } = this.getProps();
|
|
7465
7426
|
const layout = this.visualElement.projection &&
|
|
7466
7427
|
!this.visualElement.projection.layout
|
|
7467
7428
|
? this.visualElement.projection.measure(false)
|
|
7468
|
-
:
|
|
7429
|
+
: this.visualElement.projection?.layout;
|
|
7469
7430
|
const prevConstraints = this.constraints;
|
|
7470
7431
|
if (dragConstraints && isRefObject(dragConstraints)) {
|
|
7471
7432
|
if (!this.constraints) {
|
|
@@ -7568,11 +7529,10 @@ class VisualElementDragControls {
|
|
|
7568
7529
|
eachAxis((axis) => this.getAxisMotionValue(axis).stop());
|
|
7569
7530
|
}
|
|
7570
7531
|
pauseAnimation() {
|
|
7571
|
-
eachAxis((axis) =>
|
|
7532
|
+
eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
|
|
7572
7533
|
}
|
|
7573
7534
|
getAnimationState(axis) {
|
|
7574
|
-
|
|
7575
|
-
return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
|
|
7535
|
+
return this.getAxisMotionValue(axis).animation?.state;
|
|
7576
7536
|
}
|
|
7577
7537
|
/**
|
|
7578
7538
|
* Drag works differently depending on which props are provided.
|
|
@@ -8233,7 +8193,6 @@ function useMotionRef(visualState, visualElement, externalRef) {
|
|
|
8233
8193
|
}
|
|
8234
8194
|
|
|
8235
8195
|
function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
|
|
8236
|
-
var _a, _b;
|
|
8237
8196
|
const { visualElement: parent } = React.useContext(MotionContext);
|
|
8238
8197
|
const lazyContext = React.useContext(LazyContext);
|
|
8239
8198
|
const presenceContext = React.useContext(PresenceContext);
|
|
@@ -8283,8 +8242,8 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
8283
8242
|
*/
|
|
8284
8243
|
const optimisedAppearId = props[optimizedAppearDataAttribute];
|
|
8285
8244
|
const wantsHandoff = React.useRef(Boolean(optimisedAppearId) &&
|
|
8286
|
-
!
|
|
8287
|
-
|
|
8245
|
+
!window.MotionHandoffIsComplete?.(optimisedAppearId) &&
|
|
8246
|
+
window.MotionHasOptimisedAnimation?.(optimisedAppearId));
|
|
8288
8247
|
useIsomorphicLayoutEffect(() => {
|
|
8289
8248
|
if (!visualElement)
|
|
8290
8249
|
return;
|
|
@@ -8315,8 +8274,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
8315
8274
|
if (wantsHandoff.current) {
|
|
8316
8275
|
// This ensures all future calls to animateChanges() in this component will run in useEffect
|
|
8317
8276
|
queueMicrotask(() => {
|
|
8318
|
-
|
|
8319
|
-
(_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
|
|
8277
|
+
window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
|
|
8320
8278
|
});
|
|
8321
8279
|
wantsHandoff.current = false;
|
|
8322
8280
|
}
|
|
@@ -8364,7 +8322,6 @@ function getClosestProjectingNode(visualElement) {
|
|
|
8364
8322
|
* component "offline", or outside the React render cycle.
|
|
8365
8323
|
*/
|
|
8366
8324
|
function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
|
|
8367
|
-
var _a, _b;
|
|
8368
8325
|
preloadedFeatures && loadFeatures(preloadedFeatures);
|
|
8369
8326
|
function MotionComponent(props, externalRef) {
|
|
8370
8327
|
/**
|
|
@@ -8400,7 +8357,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
|
|
|
8400
8357
|
}
|
|
8401
8358
|
MotionComponent.displayName = `motion.${typeof Component === "string"
|
|
8402
8359
|
? Component
|
|
8403
|
-
: `create(${
|
|
8360
|
+
: `create(${Component.displayName ?? Component.name ?? ""})`}`;
|
|
8404
8361
|
const ForwardRefMotionComponent = React.forwardRef(MotionComponent);
|
|
8405
8362
|
ForwardRefMotionComponent[motionComponentSymbol] = Component;
|
|
8406
8363
|
return ForwardRefMotionComponent;
|
|
@@ -8432,7 +8389,7 @@ function getProjectionFunctionality(props) {
|
|
|
8432
8389
|
return {};
|
|
8433
8390
|
const combined = { ...drag, ...layout };
|
|
8434
8391
|
return {
|
|
8435
|
-
MeasureLayout:
|
|
8392
|
+
MeasureLayout: drag?.isEnabled(props) || layout?.isEnabled(props)
|
|
8436
8393
|
? combined.MeasureLayout
|
|
8437
8394
|
: undefined,
|
|
8438
8395
|
ProjectionNode: combined.ProjectionNode,
|
|
@@ -8993,7 +8950,6 @@ exports.anticipate = anticipate;
|
|
|
8993
8950
|
exports.backIn = backIn;
|
|
8994
8951
|
exports.backInOut = backInOut;
|
|
8995
8952
|
exports.backOut = backOut;
|
|
8996
|
-
exports.browserNumberValueTypes = browserNumberValueTypes;
|
|
8997
8953
|
exports.buildTransform = buildTransform;
|
|
8998
8954
|
exports.calcLength = calcLength;
|
|
8999
8955
|
exports.camelToDash = camelToDash;
|
|
@@ -9022,7 +8978,6 @@ exports.fillOffset = fillOffset;
|
|
|
9022
8978
|
exports.filterProps = filterProps;
|
|
9023
8979
|
exports.findSpring = findSpring;
|
|
9024
8980
|
exports.gestureAnimations = gestureAnimations;
|
|
9025
|
-
exports.getFinalKeyframe = getFinalKeyframe;
|
|
9026
8981
|
exports.getOptimisedAppearId = getOptimisedAppearId;
|
|
9027
8982
|
exports.hasReducedMotionListener = hasReducedMotionListener;
|
|
9028
8983
|
exports.inertia = inertia;
|
|
@@ -9053,8 +9008,6 @@ exports.reverseEasing = reverseEasing;
|
|
|
9053
9008
|
exports.rootProjectionNode = rootProjectionNode;
|
|
9054
9009
|
exports.setTarget = setTarget;
|
|
9055
9010
|
exports.spring = spring;
|
|
9056
|
-
exports.startWaapiAnimation = startWaapiAnimation;
|
|
9057
|
-
exports.supportsWaapi = supportsWaapi;
|
|
9058
9011
|
exports.transformProps = transformProps;
|
|
9059
9012
|
exports.useConstant = useConstant;
|
|
9060
9013
|
exports.useIsPresent = useIsPresent;
|