motion 12.6.3-alpha.0 → 12.6.4-alpha.0
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 +18 -14
- package/dist/cjs/index.js +414 -359
- package/dist/cjs/mini.js +339 -352
- package/dist/cjs/react-client.js +180 -188
- package/dist/cjs/react-m.js +24 -24
- package/dist/cjs/react-mini.js +275 -336
- package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +7 -4
- package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +8 -6
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +10 -8
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +11 -1
- package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +3 -3
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +1 -2
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs +1 -2
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/handoff.mjs +2 -4
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs +4 -6
- package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +3 -3
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs +1 -2
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs +2 -2
- package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +5 -10
- package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs +1 -2
- package/dist/es/framer-motion/dist/es/motion/index.mjs +2 -3
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +3 -5
- package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +19 -27
- package/dist/es/framer-motion/dist/es/projection/styles/transform.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +3 -4
- package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs +1 -2
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +5 -6
- package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +1 -2
- 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/utils/filter-props.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs +1 -2
- package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +2 -3
- package/dist/es/framer-motion/dist/es/render/utils/animation-state.mjs +3 -5
- package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/utils/resolve-variants.mjs +1 -1
- package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +2 -1
- package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +1 -2
- package/dist/es/framer-motion/dist/es/value/types/complex/index.mjs +2 -3
- package/dist/es/framer-motion/dist/es/value/use-scroll.mjs +2 -2
- package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +0 -7
- package/dist/es/motion/lib/index.mjs +1 -0
- package/dist/es/motion/lib/react.mjs +1 -1
- package/dist/es/motion-dom/dist/es/animation/{controls/BaseGroup.mjs → GroupAnimation.mjs} +4 -5
- package/dist/es/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs +9 -0
- package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs +161 -0
- package/dist/es/motion-dom/dist/es/animation/generators/utils/is-generator.mjs +1 -1
- package/dist/es/motion-dom/dist/es/animation/keyframes/get-final.mjs +12 -0
- package/dist/es/motion-dom/dist/es/animation/keyframes/hydrate.mjs +26 -0
- package/dist/es/motion-dom/dist/es/animation/utils/get-value-transition.mjs +3 -5
- package/dist/es/motion-dom/dist/es/animation/waapi/easing/cubic-bezier.mjs +3 -0
- package/dist/es/motion-dom/dist/es/animation/waapi/easing/is-supported.mjs +14 -0
- package/dist/es/motion-dom/dist/es/animation/waapi/easing/map-easing.mjs +26 -0
- package/dist/es/motion-dom/dist/es/animation/waapi/easing/supported.mjs +15 -0
- package/dist/es/{framer-motion/dist/es/animation/animators/waapi/index.mjs → motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs} +8 -6
- package/dist/es/{framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs → motion-dom/dist/es/animation/waapi/supports/partial-keyframes.mjs} +2 -2
- package/dist/es/motion-dom/dist/es/animation/waapi/utils/apply-generator.mjs +14 -0
- package/dist/es/motion-dom/dist/es/animation/waapi/utils/linear.mjs +1 -4
- package/dist/es/motion-dom/dist/es/animation/waapi/utils/px-values.mjs +39 -0
- package/dist/es/motion-dom/dist/es/gestures/press/index.mjs +1 -1
- package/dist/es/motion-dom/dist/es/render/dom/style.mjs +15 -0
- package/dist/es/motion-dom/dist/es/utils/resolve-elements.mjs +2 -7
- package/dist/es/motion-dom/dist/es/utils/supports/flags.mjs +1 -3
- package/dist/es/motion-dom/dist/es/utils/supports/memo.mjs +1 -1
- package/dist/es/motion-dom/dist/es/value/index.mjs +1 -1
- package/dist/es/motion-utils/dist/es/errors.mjs +2 -4
- package/dist/es/motion-utils/dist/es/global-config.mjs +1 -4
- package/dist/motion.dev.js +414 -359
- package/dist/motion.js +1 -1
- package/package.json +3 -3
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs +0 -116
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/style.mjs +0 -8
- package/dist/es/motion-dom/dist/es/animation/controls/Group.mjs +0 -13
- package/dist/es/motion-dom/dist/es/animation/waapi/NativeAnimationControls.mjs +0 -85
- package/dist/es/motion-dom/dist/es/animation/waapi/utils/easing.mjs +0 -44
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import '../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
2
|
import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
|
|
3
3
|
import { SubscriptionManager } from '../../../../../motion-utils/dist/es/subscription-manager.mjs';
|
|
4
|
+
import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
|
|
5
|
+
import { statsBuffer } from '../../../../../motion-dom/dist/es/stats/buffer.mjs';
|
|
4
6
|
import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
|
|
5
7
|
import { cancelFrame, frameData, frameSteps, frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
|
|
6
|
-
import { statsBuffer } from '../../../../../motion-dom/dist/es/stats/buffer.mjs';
|
|
7
8
|
import { microtask } from '../../../../../motion-dom/dist/es/frameloop/microtask.mjs';
|
|
8
9
|
import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
|
|
9
|
-
import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
|
|
10
10
|
import { animateSingleValue } from '../../animation/animate/single-value.mjs';
|
|
11
11
|
import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
|
|
12
12
|
import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
|
|
@@ -72,7 +72,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
|
|
|
72
72
|
}
|
|
73
73
|
function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
|
|
74
74
|
return class ProjectionNode {
|
|
75
|
-
constructor(latestValues = {}, parent = defaultParent
|
|
75
|
+
constructor(latestValues = {}, parent = defaultParent?.()) {
|
|
76
76
|
/**
|
|
77
77
|
* A unique ID generated for every projection node.
|
|
78
78
|
*/
|
|
@@ -603,12 +603,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
603
603
|
};
|
|
604
604
|
}
|
|
605
605
|
measurePageBox() {
|
|
606
|
-
var _a;
|
|
607
606
|
const { visualElement } = this.options;
|
|
608
607
|
if (!visualElement)
|
|
609
608
|
return createBox();
|
|
610
609
|
const box = visualElement.measureViewportBox();
|
|
611
|
-
const wasInScrollRoot =
|
|
610
|
+
const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
|
|
612
611
|
if (!wasInScrollRoot) {
|
|
613
612
|
// Remove viewport scroll to give page-relative coordinates
|
|
614
613
|
const { scroll } = this.root;
|
|
@@ -620,10 +619,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
620
619
|
return box;
|
|
621
620
|
}
|
|
622
621
|
removeElementScroll(box) {
|
|
623
|
-
var _a;
|
|
624
622
|
const boxWithoutScroll = createBox();
|
|
625
623
|
copyBoxInto(boxWithoutScroll, box);
|
|
626
|
-
if (
|
|
624
|
+
if (this.scroll?.wasRoot) {
|
|
627
625
|
return boxWithoutScroll;
|
|
628
626
|
}
|
|
629
627
|
/**
|
|
@@ -726,7 +724,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
726
724
|
}
|
|
727
725
|
}
|
|
728
726
|
resolveTargetDelta(forceRecalculation = false) {
|
|
729
|
-
var _a;
|
|
730
727
|
/**
|
|
731
728
|
* Once the dirty status of nodes has been spread through the tree, we also
|
|
732
729
|
* need to check if we have a shared node of a different depth that has itself
|
|
@@ -744,7 +741,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
744
741
|
const canSkip = !(forceRecalculation ||
|
|
745
742
|
(isShared && this.isSharedProjectionDirty) ||
|
|
746
743
|
this.isProjectionDirty ||
|
|
747
|
-
|
|
744
|
+
this.parent?.isProjectionDirty ||
|
|
748
745
|
this.attemptToResolveRelativeTarget ||
|
|
749
746
|
this.root.updateBlockedByResize);
|
|
750
747
|
if (canSkip)
|
|
@@ -869,7 +866,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
869
866
|
this.layout);
|
|
870
867
|
}
|
|
871
868
|
calcProjection() {
|
|
872
|
-
var _a;
|
|
873
869
|
const lead = this.getLead();
|
|
874
870
|
const isShared = Boolean(this.resumingFrom) || this !== lead;
|
|
875
871
|
let canSkip = true;
|
|
@@ -877,7 +873,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
877
873
|
* If this is a normal layout animation and neither this node nor its nearest projecting
|
|
878
874
|
* is dirty then we can't skip.
|
|
879
875
|
*/
|
|
880
|
-
if (this.isProjectionDirty ||
|
|
876
|
+
if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
|
|
881
877
|
canSkip = false;
|
|
882
878
|
}
|
|
883
879
|
/**
|
|
@@ -989,8 +985,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
989
985
|
// TODO: Schedule render
|
|
990
986
|
}
|
|
991
987
|
scheduleRender(notifyAll = true) {
|
|
992
|
-
|
|
993
|
-
(_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
|
|
988
|
+
this.options.visualElement?.scheduleRender();
|
|
994
989
|
if (notifyAll) {
|
|
995
990
|
const stack = this.getStack();
|
|
996
991
|
stack && stack.scheduleRender();
|
|
@@ -1177,14 +1172,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1177
1172
|
return stack ? stack.lead === this : true;
|
|
1178
1173
|
}
|
|
1179
1174
|
getLead() {
|
|
1180
|
-
var _a;
|
|
1181
1175
|
const { layoutId } = this.options;
|
|
1182
|
-
return layoutId ?
|
|
1176
|
+
return layoutId ? this.getStack()?.lead || this : this;
|
|
1183
1177
|
}
|
|
1184
1178
|
getPrevLead() {
|
|
1185
|
-
var _a;
|
|
1186
1179
|
const { layoutId } = this.options;
|
|
1187
|
-
return layoutId ?
|
|
1180
|
+
return layoutId ? this.getStack()?.prevLead : undefined;
|
|
1188
1181
|
}
|
|
1189
1182
|
getStack() {
|
|
1190
1183
|
const { layoutId } = this.options;
|
|
@@ -1258,7 +1251,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1258
1251
|
visualElement.scheduleRender();
|
|
1259
1252
|
}
|
|
1260
1253
|
getProjectionStyles(styleProp) {
|
|
1261
|
-
var _a, _b;
|
|
1262
1254
|
if (!this.instance || this.isSVG)
|
|
1263
1255
|
return undefined;
|
|
1264
1256
|
if (!this.isVisible) {
|
|
@@ -1272,7 +1264,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1272
1264
|
this.needsReset = false;
|
|
1273
1265
|
styles.opacity = "";
|
|
1274
1266
|
styles.pointerEvents =
|
|
1275
|
-
resolveMotionValue(styleProp
|
|
1267
|
+
resolveMotionValue(styleProp?.pointerEvents) || "";
|
|
1276
1268
|
styles.transform = transformTemplate
|
|
1277
1269
|
? transformTemplate(this.latestValues, "")
|
|
1278
1270
|
: "none";
|
|
@@ -1287,7 +1279,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1287
1279
|
? this.latestValues.opacity
|
|
1288
1280
|
: 1;
|
|
1289
1281
|
emptyStyles.pointerEvents =
|
|
1290
|
-
resolveMotionValue(styleProp
|
|
1282
|
+
resolveMotionValue(styleProp?.pointerEvents) || "";
|
|
1291
1283
|
}
|
|
1292
1284
|
if (this.hasProjected && !hasTransform(this.latestValues)) {
|
|
1293
1285
|
emptyStyles.transform = transformTemplate
|
|
@@ -1312,7 +1304,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1312
1304
|
*/
|
|
1313
1305
|
styles.opacity =
|
|
1314
1306
|
lead === this
|
|
1315
|
-
?
|
|
1307
|
+
? valuesToRender.opacity ??
|
|
1308
|
+
this.latestValues.opacity ??
|
|
1309
|
+
1
|
|
1316
1310
|
: this.preserveOpacity
|
|
1317
1311
|
? this.latestValues.opacity
|
|
1318
1312
|
: valuesToRender.opacityExit;
|
|
@@ -1373,7 +1367,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1373
1367
|
if (this.options.layoutId) {
|
|
1374
1368
|
styles.pointerEvents =
|
|
1375
1369
|
lead === this
|
|
1376
|
-
? resolveMotionValue(styleProp
|
|
1370
|
+
? resolveMotionValue(styleProp?.pointerEvents) || ""
|
|
1377
1371
|
: "none";
|
|
1378
1372
|
}
|
|
1379
1373
|
return styles;
|
|
@@ -1383,7 +1377,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
1383
1377
|
}
|
|
1384
1378
|
// Only run on root
|
|
1385
1379
|
resetTree() {
|
|
1386
|
-
this.root.nodes.forEach((node) =>
|
|
1380
|
+
this.root.nodes.forEach((node) => node.currentAnimation?.stop());
|
|
1387
1381
|
this.root.nodes.forEach(clearMeasurements);
|
|
1388
1382
|
this.root.sharedNodes.clear();
|
|
1389
1383
|
}
|
|
@@ -1393,8 +1387,7 @@ function updateLayout(node) {
|
|
|
1393
1387
|
node.updateLayout();
|
|
1394
1388
|
}
|
|
1395
1389
|
function notifyLayoutUpdate(node) {
|
|
1396
|
-
|
|
1397
|
-
const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
|
|
1390
|
+
const snapshot = node.resumeFrom?.snapshot || node.snapshot;
|
|
1398
1391
|
if (node.isLead() &&
|
|
1399
1392
|
node.layout &&
|
|
1400
1393
|
snapshot &&
|
|
@@ -1600,8 +1593,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
|
|
|
1600
1593
|
!isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
|
|
1601
1594
|
}
|
|
1602
1595
|
function checkNodeWasScrollRoot(node) {
|
|
1603
|
-
|
|
1604
|
-
return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
|
|
1596
|
+
return node !== node.root && node.scroll?.wasRoot;
|
|
1605
1597
|
}
|
|
1606
1598
|
|
|
1607
1599
|
export { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };
|
|
@@ -8,7 +8,7 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
|
|
|
8
8
|
*/
|
|
9
9
|
const xTranslate = delta.x.translate / treeScale.x;
|
|
10
10
|
const yTranslate = delta.y.translate / treeScale.y;
|
|
11
|
-
const zTranslate =
|
|
11
|
+
const zTranslate = latestTransform?.z || 0;
|
|
12
12
|
if (xTranslate || yTranslate || zTranslate) {
|
|
13
13
|
transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
|
|
14
14
|
}
|
|
@@ -406,10 +406,10 @@ class VisualElement {
|
|
|
406
406
|
* directly from the instance (which might have performance implications).
|
|
407
407
|
*/
|
|
408
408
|
readValue(key, target) {
|
|
409
|
-
var _a;
|
|
410
409
|
let value = this.latestValues[key] !== undefined || !this.current
|
|
411
410
|
? this.latestValues[key]
|
|
412
|
-
:
|
|
411
|
+
: this.getBaseTargetFromProps(this.props, key) ??
|
|
412
|
+
this.readValueFromInstance(this.current, key, this.options);
|
|
413
413
|
if (value !== undefined && value !== null) {
|
|
414
414
|
if (typeof value === "string" &&
|
|
415
415
|
(isNumericalString(value) || isZeroValueString(value))) {
|
|
@@ -435,11 +435,10 @@ class VisualElement {
|
|
|
435
435
|
* props.
|
|
436
436
|
*/
|
|
437
437
|
getBaseTarget(key) {
|
|
438
|
-
var _a;
|
|
439
438
|
const { initial } = this.props;
|
|
440
439
|
let valueFromInitial;
|
|
441
440
|
if (typeof initial === "string" || typeof initial === "object") {
|
|
442
|
-
const variant = resolveVariantFromProps(this.props, initial,
|
|
441
|
+
const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
|
|
443
442
|
if (variant) {
|
|
444
443
|
valueFromInitial = variant[key];
|
|
445
444
|
}
|
|
@@ -104,7 +104,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
|
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
measureEndState() {
|
|
107
|
-
var _a;
|
|
108
107
|
const { element, name, unresolvedKeyframes } = this;
|
|
109
108
|
if (!element || !element.current)
|
|
110
109
|
return;
|
|
@@ -117,7 +116,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
|
|
|
117
116
|
this.finalKeyframe = finalKeyframe;
|
|
118
117
|
}
|
|
119
118
|
// If we removed transform values, reapply them before the next render
|
|
120
|
-
if (
|
|
119
|
+
if (this.removedTransforms?.length) {
|
|
121
120
|
this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
|
|
122
121
|
element
|
|
123
122
|
.getValue(unsetTransformName)
|
|
@@ -19,8 +19,7 @@ function getElementSize(target, borderBoxSize) {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
function notifyTarget({ target, contentRect, borderBoxSize, }) {
|
|
22
|
-
|
|
23
|
-
(_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
|
|
22
|
+
resizeHandlers.get(target)?.forEach((handler) => {
|
|
24
23
|
handler({
|
|
25
24
|
target,
|
|
26
25
|
contentSize: contentRect,
|
|
@@ -49,14 +48,14 @@ function resizeElement(target, handler) {
|
|
|
49
48
|
resizeHandlers.set(element, elementHandlers);
|
|
50
49
|
}
|
|
51
50
|
elementHandlers.add(handler);
|
|
52
|
-
observer
|
|
51
|
+
observer?.observe(element);
|
|
53
52
|
});
|
|
54
53
|
return () => {
|
|
55
54
|
elements.forEach((element) => {
|
|
56
55
|
const elementHandlers = resizeHandlers.get(element);
|
|
57
|
-
elementHandlers
|
|
58
|
-
if (!
|
|
59
|
-
observer
|
|
56
|
+
elementHandlers?.delete(handler);
|
|
57
|
+
if (!elementHandlers?.size) {
|
|
58
|
+
observer?.unobserve(element);
|
|
60
59
|
}
|
|
61
60
|
});
|
|
62
61
|
};
|
|
@@ -58,7 +58,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
|
|
|
58
58
|
const listener = scrollListeners.get(container);
|
|
59
59
|
frame.read(listener, false, true);
|
|
60
60
|
return () => {
|
|
61
|
-
var _a;
|
|
62
61
|
cancelFrame(listener);
|
|
63
62
|
/**
|
|
64
63
|
* Check if we even have any handlers for this container.
|
|
@@ -76,7 +75,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
|
|
|
76
75
|
scrollListeners.delete(container);
|
|
77
76
|
if (scrollListener) {
|
|
78
77
|
getEventTarget(container).removeEventListener("scroll", scrollListener);
|
|
79
|
-
|
|
78
|
+
resizeListeners.get(container)?.();
|
|
80
79
|
window.removeEventListener("resize", scrollListener);
|
|
81
80
|
}
|
|
82
81
|
};
|
|
@@ -19,7 +19,7 @@ function parseCSSVariable(current) {
|
|
|
19
19
|
if (!match)
|
|
20
20
|
return [,];
|
|
21
21
|
const [, token1, token2, fallback] = match;
|
|
22
|
-
return [`--${token1
|
|
22
|
+
return [`--${token1 ?? token2}`, fallback];
|
|
23
23
|
}
|
|
24
24
|
const maxDepth = 4;
|
|
25
25
|
function getVariableValue(current, element, depth = 1) {
|
|
@@ -28,7 +28,7 @@ try {
|
|
|
28
28
|
*/
|
|
29
29
|
loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
|
|
30
30
|
}
|
|
31
|
-
catch
|
|
31
|
+
catch {
|
|
32
32
|
// We don't need to actually do anything here - the fallback is the existing `isPropValid`.
|
|
33
33
|
}
|
|
34
34
|
function filterProps(props, isDom, forwardMotionProps) {
|
|
@@ -2,7 +2,6 @@ import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-valu
|
|
|
2
2
|
import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
|
|
3
3
|
|
|
4
4
|
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
5
|
-
var _a;
|
|
6
5
|
const { style } = props;
|
|
7
6
|
const newValues = {};
|
|
8
7
|
for (const key in style) {
|
|
@@ -10,7 +9,7 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
|
10
9
|
(prevProps.style &&
|
|
11
10
|
isMotionValue(prevProps.style[key])) ||
|
|
12
11
|
isForcedMotionValue(key, props) ||
|
|
13
|
-
|
|
12
|
+
visualElement?.getValue(key)?.liveStyle !== undefined) {
|
|
14
13
|
newValues[key] = style[key];
|
|
15
14
|
}
|
|
16
15
|
}
|
|
@@ -29,8 +29,7 @@ function measureAllKeyframes() {
|
|
|
29
29
|
const restore = transformsToRestore.get(element);
|
|
30
30
|
if (restore) {
|
|
31
31
|
restore.forEach(([key, value]) => {
|
|
32
|
-
|
|
33
|
-
(_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
|
|
32
|
+
element.getValue(key)?.set(value);
|
|
34
33
|
});
|
|
35
34
|
}
|
|
36
35
|
});
|
|
@@ -117,7 +116,7 @@ class KeyframeResolver {
|
|
|
117
116
|
* If the first keyframe is null, we need to find its value by sampling the element
|
|
118
117
|
*/
|
|
119
118
|
if (i === 0) {
|
|
120
|
-
const currentValue = motionValue
|
|
119
|
+
const currentValue = motionValue?.get();
|
|
121
120
|
const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
|
|
122
121
|
if (currentValue !== undefined) {
|
|
123
122
|
unresolvedKeyframes[0] = currentValue;
|
|
@@ -21,9 +21,8 @@ function createAnimationState(visualElement) {
|
|
|
21
21
|
* each active animation type into an object of resolved values for it.
|
|
22
22
|
*/
|
|
23
23
|
const buildResolvedTypeValues = (type) => (acc, definition) => {
|
|
24
|
-
var _a;
|
|
25
24
|
const resolved = resolveVariant(visualElement, definition, type === "exit"
|
|
26
|
-
?
|
|
25
|
+
? visualElement.presenceContext?.custom
|
|
27
26
|
: undefined);
|
|
28
27
|
if (resolved) {
|
|
29
28
|
const { transition, transitionEnd, ...target } = resolved;
|
|
@@ -271,7 +270,7 @@ function createAnimationState(visualElement) {
|
|
|
271
270
|
if (motionValue)
|
|
272
271
|
motionValue.liveStyle = true;
|
|
273
272
|
// @ts-expect-error - @mattgperry to figure if we should do something here
|
|
274
|
-
fallbackAnimation[key] = fallbackTarget
|
|
273
|
+
fallbackAnimation[key] = fallbackTarget ?? null;
|
|
275
274
|
});
|
|
276
275
|
animations.push({ animation: fallbackAnimation });
|
|
277
276
|
}
|
|
@@ -288,12 +287,11 @@ function createAnimationState(visualElement) {
|
|
|
288
287
|
* Change whether a certain animation type is active.
|
|
289
288
|
*/
|
|
290
289
|
function setActive(type, isActive) {
|
|
291
|
-
var _a;
|
|
292
290
|
// If the active state hasn't changed, we can safely do nothing here
|
|
293
291
|
if (state[type].isActive === isActive)
|
|
294
292
|
return Promise.resolve();
|
|
295
293
|
// Propagate active change to children
|
|
296
|
-
|
|
294
|
+
visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
|
|
297
295
|
state[type].isActive = isActive;
|
|
298
296
|
const animations = animateChanges(type);
|
|
299
297
|
for (const key in state) {
|
|
@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
18
18
|
* and warn against mismatches.
|
|
19
19
|
*/
|
|
20
20
|
if (process.env.NODE_ENV === "development") {
|
|
21
|
-
warnOnce(nextValue.version === "12.6.
|
|
21
|
+
warnOnce(nextValue.version === "12.6.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.6.4-alpha.0 may not work as expected.`);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
else if (isMotionValue(prevValue)) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function getValueState(visualElement) {
|
|
2
2
|
const state = [{}, {}];
|
|
3
|
-
visualElement
|
|
3
|
+
visualElement?.values.forEach((value, key) => {
|
|
4
4
|
state[0][key] = value.get();
|
|
5
5
|
state[1][key] = value.getVelocity();
|
|
6
6
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
|
|
2
|
+
import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.mjs';
|
|
2
3
|
import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
|
|
3
4
|
import { progress } from '../../../../motion-utils/dist/es/progress.mjs';
|
|
4
5
|
import { clamp } from './clamp.mjs';
|
|
@@ -7,7 +8,7 @@ import { pipe } from './pipe.mjs';
|
|
|
7
8
|
|
|
8
9
|
function createMixers(output, ease, customMixer) {
|
|
9
10
|
const mixers = [];
|
|
10
|
-
const mixerFactory = customMixer || mix;
|
|
11
|
+
const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
|
|
11
12
|
const numMixers = output.length - 1;
|
|
12
13
|
for (let i = 0; i < numMixers; i++) {
|
|
13
14
|
let mixer = mixerFactory(output[i], output[i + 1]);
|
|
@@ -57,13 +57,12 @@ function mixObject(a, b) {
|
|
|
57
57
|
};
|
|
58
58
|
}
|
|
59
59
|
function matchOrder(origin, target) {
|
|
60
|
-
var _a;
|
|
61
60
|
const orderedOrigin = [];
|
|
62
61
|
const pointers = { color: 0, var: 0, number: 0 };
|
|
63
62
|
for (let i = 0; i < target.values.length; i++) {
|
|
64
63
|
const type = target.types[i];
|
|
65
64
|
const originIndex = origin.indexes[type][pointers[type]];
|
|
66
|
-
const originValue =
|
|
65
|
+
const originValue = origin.values[originIndex] ?? 0;
|
|
67
66
|
orderedOrigin[i] = originValue;
|
|
68
67
|
pointers[type]++;
|
|
69
68
|
}
|
|
@@ -4,11 +4,10 @@ import { floatRegex } from '../utils/float-regex.mjs';
|
|
|
4
4
|
import { sanitize } from '../utils/sanitize.mjs';
|
|
5
5
|
|
|
6
6
|
function test(v) {
|
|
7
|
-
var _a, _b;
|
|
8
7
|
return (isNaN(v) &&
|
|
9
8
|
typeof v === "string" &&
|
|
10
|
-
(
|
|
11
|
-
(
|
|
9
|
+
(v.match(floatRegex)?.length || 0) +
|
|
10
|
+
(v.match(colorRegex)?.length || 0) >
|
|
12
11
|
0);
|
|
13
12
|
}
|
|
14
13
|
const NUMBER_TOKEN = "number";
|
|
@@ -29,8 +29,8 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
|
|
|
29
29
|
values.scrollYProgress.set(y.progress);
|
|
30
30
|
}, {
|
|
31
31
|
...options,
|
|
32
|
-
container:
|
|
33
|
-
target:
|
|
32
|
+
container: container?.current || undefined,
|
|
33
|
+
target: target?.current || undefined,
|
|
34
34
|
});
|
|
35
35
|
}, [container, target, JSON.stringify(options.offset)]);
|
|
36
36
|
return values;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import '../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
|
-
import { MotionGlobalConfig } from '../../../../../motion-utils/dist/es/global-config.mjs';
|
|
3
1
|
import { isWillChangeMotionValue } from './is.mjs';
|
|
4
2
|
|
|
5
3
|
function addValueToWillChange(visualElement, key) {
|
|
@@ -11,11 +9,6 @@ function addValueToWillChange(visualElement, key) {
|
|
|
11
9
|
if (isWillChangeMotionValue(willChange)) {
|
|
12
10
|
return willChange.add(key);
|
|
13
11
|
}
|
|
14
|
-
else if (!willChange && MotionGlobalConfig.WillChange) {
|
|
15
|
-
const newWillChange = new MotionGlobalConfig.WillChange("auto");
|
|
16
|
-
visualElement.addValue("willChange", newWillChange);
|
|
17
|
-
newWillChange.add(key);
|
|
18
|
-
}
|
|
19
12
|
}
|
|
20
13
|
|
|
21
14
|
export { addValueToWillChange };
|
|
@@ -27,6 +27,7 @@ export { stagger } from '../../framer-motion/dist/es/animation/utils/stagger.mjs
|
|
|
27
27
|
export { clamp } from '../../framer-motion/dist/es/utils/clamp.mjs';
|
|
28
28
|
export { delayInSeconds as delay } from '../../framer-motion/dist/es/utils/delay.mjs';
|
|
29
29
|
export { distance, distance2D } from '../../framer-motion/dist/es/utils/distance.mjs';
|
|
30
|
+
export { hslaToRgba } from '../../framer-motion/dist/es/utils/hsla-to-rgba.mjs';
|
|
30
31
|
export { interpolate } from '../../framer-motion/dist/es/utils/interpolate.mjs';
|
|
31
32
|
export { mix } from '../../framer-motion/dist/es/utils/mix/index.mjs';
|
|
32
33
|
export { pipe } from '../../framer-motion/dist/es/utils/pipe.mjs';
|
|
@@ -31,7 +31,6 @@ export { useTime } from '../../framer-motion/dist/es/value/use-time.mjs';
|
|
|
31
31
|
export { useTransform } from '../../framer-motion/dist/es/value/use-transform.mjs';
|
|
32
32
|
export { useVelocity } from '../../framer-motion/dist/es/value/use-velocity.mjs';
|
|
33
33
|
export { useWillChange } from '../../framer-motion/dist/es/value/use-will-change/index.mjs';
|
|
34
|
-
export { WillChangeMotionValue } from '../../framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs';
|
|
35
34
|
export { resolveMotionValue } from '../../framer-motion/dist/es/value/utils/resolve-motion-value.mjs';
|
|
36
35
|
export { useReducedMotion } from '../../framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs';
|
|
37
36
|
export { useReducedMotionConfig } from '../../framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs';
|
|
@@ -97,6 +96,7 @@ export { inertia } from '../../framer-motion/dist/es/animation/generators/inerti
|
|
|
97
96
|
export { keyframes } from '../../framer-motion/dist/es/animation/generators/keyframes.mjs';
|
|
98
97
|
export { stagger } from '../../framer-motion/dist/es/animation/utils/stagger.mjs';
|
|
99
98
|
export { clamp } from '../../framer-motion/dist/es/utils/clamp.mjs';
|
|
99
|
+
export { hslaToRgba } from '../../framer-motion/dist/es/utils/hsla-to-rgba.mjs';
|
|
100
100
|
export { mix } from '../../framer-motion/dist/es/utils/mix/index.mjs';
|
|
101
101
|
export { pipe } from '../../framer-motion/dist/es/utils/pipe.mjs';
|
|
102
102
|
export { transform } from '../../framer-motion/dist/es/utils/transform.mjs';
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { supportsScrollTimeline } from '
|
|
1
|
+
import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
|
|
2
2
|
|
|
3
|
-
class
|
|
3
|
+
class GroupAnimation {
|
|
4
4
|
constructor(animations) {
|
|
5
5
|
// Bound to accomodate common `return animation.stop` pattern
|
|
6
6
|
this.stop = () => this.runAll("stop");
|
|
7
7
|
this.animations = animations.filter(Boolean);
|
|
8
8
|
}
|
|
9
9
|
get finished() {
|
|
10
|
-
|
|
11
|
-
return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
|
|
10
|
+
return Promise.all(this.animations.map((animation) => animation.finished));
|
|
12
11
|
}
|
|
13
12
|
/**
|
|
14
13
|
* TODO: Filter out cancelled or stopped animations before returning
|
|
@@ -79,4 +78,4 @@ class BaseGroupPlaybackControls {
|
|
|
79
78
|
}
|
|
80
79
|
}
|
|
81
80
|
|
|
82
|
-
export {
|
|
81
|
+
export { GroupAnimation };
|