animejs 4.3.5 → 4.4.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/README.md +9 -12
- package/dist/bundles/anime.esm.js +1048 -421
- package/dist/bundles/anime.esm.min.js +2 -2
- package/dist/bundles/anime.umd.js +1053 -421
- package/dist/bundles/anime.umd.min.js +2 -2
- package/dist/modules/animatable/animatable.cjs +1 -1
- package/dist/modules/animatable/animatable.js +2 -2
- package/dist/modules/animatable/index.cjs +1 -1
- package/dist/modules/animatable/index.js +1 -1
- package/dist/modules/animation/additive.cjs +1 -1
- package/dist/modules/animation/additive.js +1 -1
- package/dist/modules/animation/animation.cjs +38 -16
- package/dist/modules/animation/animation.d.ts +2 -2
- package/dist/modules/animation/animation.js +42 -20
- package/dist/modules/animation/composition.cjs +1 -1
- package/dist/modules/animation/composition.js +3 -3
- package/dist/modules/animation/index.cjs +1 -1
- package/dist/modules/animation/index.js +1 -1
- package/dist/modules/core/clock.cjs +1 -1
- package/dist/modules/core/clock.js +1 -1
- package/dist/modules/core/colors.cjs +1 -1
- package/dist/modules/core/colors.js +1 -1
- package/dist/modules/core/consts.cjs +3 -9
- package/dist/modules/core/consts.d.ts +1 -5
- package/dist/modules/core/consts.js +4 -8
- package/dist/modules/core/globals.cjs +16 -5
- package/dist/modules/core/globals.d.ts +22 -1
- package/dist/modules/core/globals.js +18 -6
- package/dist/modules/core/helpers.cjs +7 -10
- package/dist/modules/core/helpers.js +8 -11
- package/dist/modules/core/render.cjs +66 -63
- package/dist/modules/core/render.js +68 -65
- package/dist/modules/core/styles.cjs +53 -32
- package/dist/modules/core/styles.d.ts +1 -0
- package/dist/modules/core/styles.js +55 -35
- package/dist/modules/core/targets.cjs +1 -1
- package/dist/modules/core/targets.js +1 -1
- package/dist/modules/core/transforms.cjs +129 -13
- package/dist/modules/core/transforms.d.ts +1 -0
- package/dist/modules/core/transforms.js +130 -15
- package/dist/modules/core/units.cjs +1 -1
- package/dist/modules/core/units.js +1 -1
- package/dist/modules/core/values.cjs +68 -8
- package/dist/modules/core/values.d.ts +5 -2
- package/dist/modules/core/values.js +69 -11
- package/dist/modules/draggable/draggable.cjs +1 -1
- package/dist/modules/draggable/draggable.js +1 -1
- package/dist/modules/draggable/index.cjs +1 -1
- package/dist/modules/draggable/index.js +1 -1
- package/dist/modules/easings/cubic-bezier/index.cjs +1 -1
- package/dist/modules/easings/cubic-bezier/index.js +1 -1
- package/dist/modules/easings/eases/index.cjs +1 -1
- package/dist/modules/easings/eases/index.js +1 -1
- package/dist/modules/easings/eases/parser.cjs +1 -1
- package/dist/modules/easings/eases/parser.js +1 -1
- package/dist/modules/easings/index.cjs +1 -1
- package/dist/modules/easings/index.js +1 -1
- package/dist/modules/easings/irregular/index.cjs +1 -1
- package/dist/modules/easings/irregular/index.js +1 -1
- package/dist/modules/easings/linear/index.cjs +1 -1
- package/dist/modules/easings/linear/index.js +1 -1
- package/dist/modules/easings/none.cjs +1 -1
- package/dist/modules/easings/none.js +1 -1
- package/dist/modules/easings/spring/index.cjs +1 -1
- package/dist/modules/easings/spring/index.js +1 -1
- package/dist/modules/easings/steps/index.cjs +1 -1
- package/dist/modules/easings/steps/index.js +1 -1
- package/dist/modules/engine/engine.cjs +1 -1
- package/dist/modules/engine/engine.js +1 -1
- package/dist/modules/engine/index.cjs +1 -1
- package/dist/modules/engine/index.js +1 -1
- package/dist/modules/events/index.cjs +1 -1
- package/dist/modules/events/index.js +1 -1
- package/dist/modules/events/scroll.cjs +1 -1
- package/dist/modules/events/scroll.js +1 -1
- package/dist/modules/index.cjs +9 -1
- package/dist/modules/index.d.ts +1 -0
- package/dist/modules/index.js +4 -1
- package/dist/modules/layout/index.cjs +1 -1
- package/dist/modules/layout/index.js +1 -1
- package/dist/modules/layout/layout.cjs +47 -24
- package/dist/modules/layout/layout.d.ts +4 -3
- package/dist/modules/layout/layout.js +48 -25
- package/dist/modules/scope/index.cjs +1 -1
- package/dist/modules/scope/index.js +1 -1
- package/dist/modules/scope/scope.cjs +1 -1
- package/dist/modules/scope/scope.js +1 -1
- package/dist/modules/svg/drawable.cjs +1 -1
- package/dist/modules/svg/drawable.js +1 -1
- package/dist/modules/svg/helpers.cjs +1 -1
- package/dist/modules/svg/helpers.js +1 -1
- package/dist/modules/svg/index.cjs +1 -1
- package/dist/modules/svg/index.js +1 -1
- package/dist/modules/svg/morphto.cjs +3 -6
- package/dist/modules/svg/morphto.js +3 -6
- package/dist/modules/svg/motionpath.cjs +1 -1
- package/dist/modules/svg/motionpath.js +1 -1
- package/dist/modules/text/index.cjs +3 -1
- package/dist/modules/text/index.d.ts +1 -0
- package/dist/modules/text/index.js +2 -1
- package/dist/modules/text/scramble.cjs +272 -0
- package/dist/modules/text/scramble.d.ts +3 -0
- package/dist/modules/text/scramble.js +270 -0
- package/dist/modules/text/split.cjs +5 -5
- package/dist/modules/text/split.d.ts +5 -5
- package/dist/modules/text/split.js +5 -5
- package/dist/modules/timeline/index.cjs +1 -1
- package/dist/modules/timeline/index.js +1 -1
- package/dist/modules/timeline/position.cjs +1 -1
- package/dist/modules/timeline/position.js +1 -1
- package/dist/modules/timeline/timeline.cjs +36 -18
- package/dist/modules/timeline/timeline.d.ts +6 -5
- package/dist/modules/timeline/timeline.js +37 -19
- package/dist/modules/timer/index.cjs +1 -1
- package/dist/modules/timer/index.js +1 -1
- package/dist/modules/timer/timer.cjs +8 -12
- package/dist/modules/timer/timer.d.ts +2 -0
- package/dist/modules/timer/timer.js +9 -13
- package/dist/modules/types/index.d.ts +76 -8
- package/dist/modules/utils/chainable.cjs +8 -5
- package/dist/modules/utils/chainable.js +8 -5
- package/dist/modules/utils/index.cjs +5 -1
- package/dist/modules/utils/index.d.ts +1 -0
- package/dist/modules/utils/index.js +2 -1
- package/dist/modules/utils/number.cjs +1 -1
- package/dist/modules/utils/number.js +1 -1
- package/dist/modules/utils/random.cjs +1 -1
- package/dist/modules/utils/random.js +1 -1
- package/dist/modules/utils/stagger.cjs +117 -20
- package/dist/modules/utils/stagger.js +118 -21
- package/dist/modules/utils/target.cjs +1 -1
- package/dist/modules/utils/target.js +1 -1
- package/dist/modules/utils/time.cjs +5 -3
- package/dist/modules/utils/time.d.ts +1 -1
- package/dist/modules/utils/time.js +5 -3
- package/dist/modules/waapi/composition.cjs +1 -1
- package/dist/modules/waapi/composition.js +1 -1
- package/dist/modules/waapi/index.cjs +1 -1
- package/dist/modules/waapi/index.js +1 -1
- package/dist/modules/waapi/waapi.cjs +19 -20
- package/dist/modules/waapi/waapi.js +20 -21
- package/package.json +2 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - layout - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.0
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -25,6 +25,12 @@ var globals = require('../core/globals.cjs');
|
|
|
25
25
|
* } from '../types/index.js'
|
|
26
26
|
*/
|
|
27
27
|
|
|
28
|
+
/**
|
|
29
|
+
* @import {
|
|
30
|
+
* ScrollObserver,
|
|
31
|
+
* } from '../events/scroll.js'
|
|
32
|
+
*/
|
|
33
|
+
|
|
28
34
|
/**
|
|
29
35
|
* @import {
|
|
30
36
|
* Timeline,
|
|
@@ -73,6 +79,7 @@ var globals = require('../core/globals.cjs');
|
|
|
73
79
|
|
|
74
80
|
/**
|
|
75
81
|
* @typedef {Object} LayoutSpecificAnimationParams
|
|
82
|
+
* @property {Number|String} [id]
|
|
76
83
|
* @property {Number|FunctionValue} [delay]
|
|
77
84
|
* @property {Number|FunctionValue} [duration]
|
|
78
85
|
* @property {EasingParam|FunctionValue} [ease]
|
|
@@ -115,7 +122,7 @@ var globals = require('../core/globals.cjs');
|
|
|
115
122
|
* @property {String} id
|
|
116
123
|
* @property {DOMTarget} $el
|
|
117
124
|
* @property {Number} index
|
|
118
|
-
* @property {
|
|
125
|
+
* @property {Array<DOMTarget>} targets
|
|
119
126
|
* @property {Number} delay
|
|
120
127
|
* @property {Number} duration
|
|
121
128
|
* @property {EasingParam} ease
|
|
@@ -259,7 +266,7 @@ const createNode = ($el, parentNode, state, recycledNode) => {
|
|
|
259
266
|
node.$measure = $el;
|
|
260
267
|
node.id = dataId;
|
|
261
268
|
node.index = 0;
|
|
262
|
-
node.
|
|
269
|
+
node.targets = null;
|
|
263
270
|
node.delay = 0;
|
|
264
271
|
node.duration = 0;
|
|
265
272
|
node.ease = null;
|
|
@@ -445,12 +452,12 @@ const updateNodeProperties = (node, props) => {
|
|
|
445
452
|
* @param {LayoutAnimationTimingsParams} params
|
|
446
453
|
*/
|
|
447
454
|
const updateNodeTimingParams = (node, params) => {
|
|
448
|
-
const easeFunctionResult = values.getFunctionValue(params.ease, node.$el, node.index, node.
|
|
455
|
+
const easeFunctionResult = values.getFunctionValue(params.ease, node.$el, node.index, node.targets, null, null);
|
|
449
456
|
const keyEasing = helpers.isFnc(easeFunctionResult) ? easeFunctionResult : params.ease;
|
|
450
457
|
const hasSpring = !helpers.isUnd(keyEasing) && !helpers.isUnd(/** @type {Spring} */(keyEasing).ease);
|
|
451
458
|
node.ease = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
|
|
452
|
-
node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : values.getFunctionValue(params.duration, node.$el, node.index, node.
|
|
453
|
-
node.delay = values.getFunctionValue(params.delay, node.$el, node.index, node.
|
|
459
|
+
node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : values.getFunctionValue(params.duration, node.$el, node.index, node.targets, null, null);
|
|
460
|
+
node.delay = values.getFunctionValue(params.delay, node.$el, node.index, node.targets, null, null);
|
|
454
461
|
};
|
|
455
462
|
|
|
456
463
|
/**
|
|
@@ -823,10 +830,12 @@ class LayoutSnapshot {
|
|
|
823
830
|
|
|
824
831
|
const inRootNodeIds = new Set();
|
|
825
832
|
// Update index and total for inital timing calculation
|
|
826
|
-
let index = 0
|
|
833
|
+
let index = 0;
|
|
834
|
+
const allNodeTargets = [];
|
|
835
|
+
this.nodes.forEach((node) => { allNodeTargets.push(node.$el); });
|
|
827
836
|
this.nodes.forEach((node, id) => {
|
|
828
837
|
node.index = index++;
|
|
829
|
-
node.
|
|
838
|
+
node.targets = allNodeTargets;
|
|
830
839
|
// Track ids of nodes that belong to the current root to filter detached matches
|
|
831
840
|
if (node && node.measuredIsInsideRoot) {
|
|
832
841
|
inRootNodeIds.add(id);
|
|
@@ -938,8 +947,8 @@ class AutoLayout {
|
|
|
938
947
|
this.params = params;
|
|
939
948
|
/** @type {DOMTarget} */
|
|
940
949
|
this.root = /** @type {DOMTarget} */(targets.registerTargets(root)[0]);
|
|
941
|
-
/** @type {Number} */
|
|
942
|
-
this.id = layoutId++;
|
|
950
|
+
/** @type {Number|String} */
|
|
951
|
+
this.id = params.id || layoutId++;
|
|
943
952
|
/** @type {LayoutChildrenParam} */
|
|
944
953
|
this.children = params.children || '*';
|
|
945
954
|
/** @type {Boolean} */
|
|
@@ -1062,7 +1071,9 @@ class AutoLayout {
|
|
|
1062
1071
|
duration: values.setValue(params.duration, this.params.duration),
|
|
1063
1072
|
};
|
|
1064
1073
|
/** @type {TimelineParams} */
|
|
1065
|
-
const tlParams = {
|
|
1074
|
+
const tlParams = {
|
|
1075
|
+
id: this.id
|
|
1076
|
+
};
|
|
1066
1077
|
const onComplete = values.setValue(params.onComplete, this.params.onComplete);
|
|
1067
1078
|
const onPause = values.setValue(params.onPause, this.params.onPause);
|
|
1068
1079
|
for (let name in globals.defaults) {
|
|
@@ -1075,6 +1086,13 @@ class AutoLayout {
|
|
|
1075
1086
|
}
|
|
1076
1087
|
}
|
|
1077
1088
|
tlParams.onComplete = () => {
|
|
1089
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1090
|
+
const ed = globals.globals.editor;
|
|
1091
|
+
const isScrollControled = (ap && ap.linked) || (ed && ed.showPanel);
|
|
1092
|
+
if (isScrollControled) {
|
|
1093
|
+
if (onComplete) onComplete(this.timeline);
|
|
1094
|
+
return;
|
|
1095
|
+
}
|
|
1078
1096
|
// Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
|
|
1079
1097
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1080
1098
|
newState.forEachRootNode(node => {
|
|
@@ -1096,6 +1114,13 @@ class AutoLayout {
|
|
|
1096
1114
|
});
|
|
1097
1115
|
};
|
|
1098
1116
|
tlParams.onPause = () => {
|
|
1117
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1118
|
+
const isScrollControled = ap && ap.linked;
|
|
1119
|
+
if (isScrollControled) {
|
|
1120
|
+
if (onComplete) onComplete(this.timeline);
|
|
1121
|
+
if (onPause) onPause(this.timeline);
|
|
1122
|
+
return;
|
|
1123
|
+
}
|
|
1099
1124
|
if (!this.root.classList.contains('is-animated')) return;
|
|
1100
1125
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1101
1126
|
newState.forEachRootNode(restoreNodeVisualState);
|
|
@@ -1262,41 +1287,39 @@ class AutoLayout {
|
|
|
1262
1287
|
animatedParent = animatedParent.parentNode;
|
|
1263
1288
|
}
|
|
1264
1289
|
|
|
1265
|
-
const animatingTotal = animating.length;
|
|
1266
|
-
|
|
1267
1290
|
// Root is always animated first in sync with the first child (animating.length is the total of children)
|
|
1268
1291
|
if (node === rootNode) {
|
|
1269
1292
|
node.index = 0;
|
|
1270
|
-
node.
|
|
1293
|
+
node.targets = animating;
|
|
1271
1294
|
updateNodeTimingParams(node, animationTimings);
|
|
1272
1295
|
} else if (node.isEntering) {
|
|
1273
1296
|
node.index = animatedParent ? animatedParent.index : enteringIndex;
|
|
1274
|
-
node.
|
|
1297
|
+
node.targets = animatedParent ? animating : entering;
|
|
1275
1298
|
updateNodeTimingParams(node, enterFromTimings);
|
|
1276
1299
|
enteringIndex++;
|
|
1277
1300
|
} else if (node.isLeaving) {
|
|
1278
1301
|
node.index = animatedParent ? animatedParent.index : leavingIndex;
|
|
1279
|
-
node.
|
|
1302
|
+
node.targets = animatedParent ? animating : leaving;
|
|
1280
1303
|
leavingIndex++;
|
|
1281
1304
|
updateNodeTimingParams(node, leaveToTimings);
|
|
1282
1305
|
} else if (node.isTarget) {
|
|
1283
1306
|
node.index = animatingIndex++;
|
|
1284
|
-
node.
|
|
1307
|
+
node.targets = animating;
|
|
1285
1308
|
updateNodeTimingParams(node, animationTimings);
|
|
1286
1309
|
} else {
|
|
1287
1310
|
node.index = animatedParent ? animatedParent.index : 0;
|
|
1288
|
-
node.
|
|
1311
|
+
node.targets = animating;
|
|
1289
1312
|
updateNodeTimingParams(node, swapAtTimings);
|
|
1290
1313
|
}
|
|
1291
1314
|
|
|
1292
1315
|
// Make sure the old state node has its inex and total values up to date for valid "from" function values calculation
|
|
1293
1316
|
oldStateNode.index = node.index;
|
|
1294
|
-
oldStateNode.
|
|
1317
|
+
oldStateNode.targets = node.targets;
|
|
1295
1318
|
|
|
1296
1319
|
// Computes all values up front so we can check for changes and we don't have to re-compute them inside the animation props
|
|
1297
1320
|
for (let prop in nodeProperties) {
|
|
1298
|
-
nodeProperties[prop] = values.getFunctionValue(nodeProperties[prop], $el, node.index, node.
|
|
1299
|
-
oldStateNodeProperties[prop] = values.getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.
|
|
1321
|
+
nodeProperties[prop] = values.getFunctionValue(nodeProperties[prop], $el, node.index, node.targets, null, null);
|
|
1322
|
+
oldStateNodeProperties[prop] = values.getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.targets, null, null);
|
|
1300
1323
|
}
|
|
1301
1324
|
|
|
1302
1325
|
// Use a 1px tolerance to detect dimensions changes to prevent width / height animations on barelly visible elements
|
|
@@ -1522,8 +1545,8 @@ class AutoLayout {
|
|
|
1522
1545
|
}
|
|
1523
1546
|
$el.style.transform = oldState.getComputedValue($el, 'transform');
|
|
1524
1547
|
if (animatedSwap.includes($el)) {
|
|
1525
|
-
node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.
|
|
1526
|
-
node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.
|
|
1548
|
+
node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.targets, null, null);
|
|
1549
|
+
node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.targets, null, null);
|
|
1527
1550
|
}
|
|
1528
1551
|
}
|
|
1529
1552
|
this.transformAnimation = waapi.waapi.animate(transformed, {
|
|
@@ -1538,7 +1561,7 @@ class AutoLayout {
|
|
|
1538
1561
|
if (!animatedSwap.includes($el)) return newValue;
|
|
1539
1562
|
const oldValue = oldState.getComputedValue($el, 'transform');
|
|
1540
1563
|
const node = newState.getNode($el);
|
|
1541
|
-
return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.
|
|
1564
|
+
return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.targets, null, null), newValue]
|
|
1542
1565
|
},
|
|
1543
1566
|
autoplay: false,
|
|
1544
1567
|
// persist: true,
|
|
@@ -8,8 +8,8 @@ export class AutoLayout {
|
|
|
8
8
|
params: AutoLayoutParams;
|
|
9
9
|
/** @type {DOMTarget} */
|
|
10
10
|
root: DOMTarget;
|
|
11
|
-
/** @type {Number} */
|
|
12
|
-
id: number;
|
|
11
|
+
/** @type {Number|String} */
|
|
12
|
+
id: number | string;
|
|
13
13
|
/** @type {LayoutChildrenParam} */
|
|
14
14
|
children: LayoutChildrenParam;
|
|
15
15
|
/** @type {Boolean} */
|
|
@@ -74,6 +74,7 @@ export type LayoutAnimationTimingsParams = {
|
|
|
74
74
|
export type LayoutStateAnimationProperties = Record<string, number | string | FunctionValue>;
|
|
75
75
|
export type LayoutStateParams = LayoutStateAnimationProperties & LayoutAnimationTimingsParams;
|
|
76
76
|
export type LayoutSpecificAnimationParams = {
|
|
77
|
+
id?: number | string;
|
|
77
78
|
delay?: number | FunctionValue;
|
|
78
79
|
duration?: number | FunctionValue;
|
|
79
80
|
ease?: EasingParam | FunctionValue;
|
|
@@ -103,7 +104,7 @@ export type LayoutNode = {
|
|
|
103
104
|
id: string;
|
|
104
105
|
$el: DOMTarget;
|
|
105
106
|
index: number;
|
|
106
|
-
|
|
107
|
+
targets: Array<DOMTarget>;
|
|
107
108
|
delay: number;
|
|
108
109
|
duration: number;
|
|
109
110
|
ease: EasingParam;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - layout - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.0
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -11,7 +11,7 @@ import { parseEase } from '../easings/eases/parser.js';
|
|
|
11
11
|
import { setValue, getFunctionValue } from '../core/values.js';
|
|
12
12
|
import { createTimeline } from '../timeline/timeline.js';
|
|
13
13
|
import { waapi } from '../waapi/waapi.js';
|
|
14
|
-
import { scope, defaults } from '../core/globals.js';
|
|
14
|
+
import { scope, defaults, globals } from '../core/globals.js';
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* @import {
|
|
@@ -23,6 +23,12 @@ import { scope, defaults } from '../core/globals.js';
|
|
|
23
23
|
* } from '../types/index.js'
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* @import {
|
|
28
|
+
* ScrollObserver,
|
|
29
|
+
* } from '../events/scroll.js'
|
|
30
|
+
*/
|
|
31
|
+
|
|
26
32
|
/**
|
|
27
33
|
* @import {
|
|
28
34
|
* Timeline,
|
|
@@ -71,6 +77,7 @@ import { scope, defaults } from '../core/globals.js';
|
|
|
71
77
|
|
|
72
78
|
/**
|
|
73
79
|
* @typedef {Object} LayoutSpecificAnimationParams
|
|
80
|
+
* @property {Number|String} [id]
|
|
74
81
|
* @property {Number|FunctionValue} [delay]
|
|
75
82
|
* @property {Number|FunctionValue} [duration]
|
|
76
83
|
* @property {EasingParam|FunctionValue} [ease]
|
|
@@ -113,7 +120,7 @@ import { scope, defaults } from '../core/globals.js';
|
|
|
113
120
|
* @property {String} id
|
|
114
121
|
* @property {DOMTarget} $el
|
|
115
122
|
* @property {Number} index
|
|
116
|
-
* @property {
|
|
123
|
+
* @property {Array<DOMTarget>} targets
|
|
117
124
|
* @property {Number} delay
|
|
118
125
|
* @property {Number} duration
|
|
119
126
|
* @property {EasingParam} ease
|
|
@@ -257,7 +264,7 @@ const createNode = ($el, parentNode, state, recycledNode) => {
|
|
|
257
264
|
node.$measure = $el;
|
|
258
265
|
node.id = dataId;
|
|
259
266
|
node.index = 0;
|
|
260
|
-
node.
|
|
267
|
+
node.targets = null;
|
|
261
268
|
node.delay = 0;
|
|
262
269
|
node.duration = 0;
|
|
263
270
|
node.ease = null;
|
|
@@ -443,12 +450,12 @@ const updateNodeProperties = (node, props) => {
|
|
|
443
450
|
* @param {LayoutAnimationTimingsParams} params
|
|
444
451
|
*/
|
|
445
452
|
const updateNodeTimingParams = (node, params) => {
|
|
446
|
-
const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.
|
|
453
|
+
const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.targets, null, null);
|
|
447
454
|
const keyEasing = isFnc(easeFunctionResult) ? easeFunctionResult : params.ease;
|
|
448
455
|
const hasSpring = !isUnd(keyEasing) && !isUnd(/** @type {Spring} */(keyEasing).ease);
|
|
449
456
|
node.ease = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
|
|
450
|
-
node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.
|
|
451
|
-
node.delay = getFunctionValue(params.delay, node.$el, node.index, node.
|
|
457
|
+
node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.targets, null, null);
|
|
458
|
+
node.delay = getFunctionValue(params.delay, node.$el, node.index, node.targets, null, null);
|
|
452
459
|
};
|
|
453
460
|
|
|
454
461
|
/**
|
|
@@ -821,10 +828,12 @@ class LayoutSnapshot {
|
|
|
821
828
|
|
|
822
829
|
const inRootNodeIds = new Set();
|
|
823
830
|
// Update index and total for inital timing calculation
|
|
824
|
-
let index = 0
|
|
831
|
+
let index = 0;
|
|
832
|
+
const allNodeTargets = [];
|
|
833
|
+
this.nodes.forEach((node) => { allNodeTargets.push(node.$el); });
|
|
825
834
|
this.nodes.forEach((node, id) => {
|
|
826
835
|
node.index = index++;
|
|
827
|
-
node.
|
|
836
|
+
node.targets = allNodeTargets;
|
|
828
837
|
// Track ids of nodes that belong to the current root to filter detached matches
|
|
829
838
|
if (node && node.measuredIsInsideRoot) {
|
|
830
839
|
inRootNodeIds.add(id);
|
|
@@ -936,8 +945,8 @@ class AutoLayout {
|
|
|
936
945
|
this.params = params;
|
|
937
946
|
/** @type {DOMTarget} */
|
|
938
947
|
this.root = /** @type {DOMTarget} */(registerTargets(root)[0]);
|
|
939
|
-
/** @type {Number} */
|
|
940
|
-
this.id = layoutId++;
|
|
948
|
+
/** @type {Number|String} */
|
|
949
|
+
this.id = params.id || layoutId++;
|
|
941
950
|
/** @type {LayoutChildrenParam} */
|
|
942
951
|
this.children = params.children || '*';
|
|
943
952
|
/** @type {Boolean} */
|
|
@@ -1060,7 +1069,9 @@ class AutoLayout {
|
|
|
1060
1069
|
duration: setValue(params.duration, this.params.duration),
|
|
1061
1070
|
};
|
|
1062
1071
|
/** @type {TimelineParams} */
|
|
1063
|
-
const tlParams = {
|
|
1072
|
+
const tlParams = {
|
|
1073
|
+
id: this.id
|
|
1074
|
+
};
|
|
1064
1075
|
const onComplete = setValue(params.onComplete, this.params.onComplete);
|
|
1065
1076
|
const onPause = setValue(params.onPause, this.params.onPause);
|
|
1066
1077
|
for (let name in defaults) {
|
|
@@ -1073,6 +1084,13 @@ class AutoLayout {
|
|
|
1073
1084
|
}
|
|
1074
1085
|
}
|
|
1075
1086
|
tlParams.onComplete = () => {
|
|
1087
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1088
|
+
const ed = globals.editor;
|
|
1089
|
+
const isScrollControled = (ap && ap.linked) || (ed && ed.showPanel);
|
|
1090
|
+
if (isScrollControled) {
|
|
1091
|
+
if (onComplete) onComplete(this.timeline);
|
|
1092
|
+
return;
|
|
1093
|
+
}
|
|
1076
1094
|
// Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
|
|
1077
1095
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1078
1096
|
newState.forEachRootNode(node => {
|
|
@@ -1094,6 +1112,13 @@ class AutoLayout {
|
|
|
1094
1112
|
});
|
|
1095
1113
|
};
|
|
1096
1114
|
tlParams.onPause = () => {
|
|
1115
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1116
|
+
const isScrollControled = ap && ap.linked;
|
|
1117
|
+
if (isScrollControled) {
|
|
1118
|
+
if (onComplete) onComplete(this.timeline);
|
|
1119
|
+
if (onPause) onPause(this.timeline);
|
|
1120
|
+
return;
|
|
1121
|
+
}
|
|
1097
1122
|
if (!this.root.classList.contains('is-animated')) return;
|
|
1098
1123
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1099
1124
|
newState.forEachRootNode(restoreNodeVisualState);
|
|
@@ -1260,41 +1285,39 @@ class AutoLayout {
|
|
|
1260
1285
|
animatedParent = animatedParent.parentNode;
|
|
1261
1286
|
}
|
|
1262
1287
|
|
|
1263
|
-
const animatingTotal = animating.length;
|
|
1264
|
-
|
|
1265
1288
|
// Root is always animated first in sync with the first child (animating.length is the total of children)
|
|
1266
1289
|
if (node === rootNode) {
|
|
1267
1290
|
node.index = 0;
|
|
1268
|
-
node.
|
|
1291
|
+
node.targets = animating;
|
|
1269
1292
|
updateNodeTimingParams(node, animationTimings);
|
|
1270
1293
|
} else if (node.isEntering) {
|
|
1271
1294
|
node.index = animatedParent ? animatedParent.index : enteringIndex;
|
|
1272
|
-
node.
|
|
1295
|
+
node.targets = animatedParent ? animating : entering;
|
|
1273
1296
|
updateNodeTimingParams(node, enterFromTimings);
|
|
1274
1297
|
enteringIndex++;
|
|
1275
1298
|
} else if (node.isLeaving) {
|
|
1276
1299
|
node.index = animatedParent ? animatedParent.index : leavingIndex;
|
|
1277
|
-
node.
|
|
1300
|
+
node.targets = animatedParent ? animating : leaving;
|
|
1278
1301
|
leavingIndex++;
|
|
1279
1302
|
updateNodeTimingParams(node, leaveToTimings);
|
|
1280
1303
|
} else if (node.isTarget) {
|
|
1281
1304
|
node.index = animatingIndex++;
|
|
1282
|
-
node.
|
|
1305
|
+
node.targets = animating;
|
|
1283
1306
|
updateNodeTimingParams(node, animationTimings);
|
|
1284
1307
|
} else {
|
|
1285
1308
|
node.index = animatedParent ? animatedParent.index : 0;
|
|
1286
|
-
node.
|
|
1309
|
+
node.targets = animating;
|
|
1287
1310
|
updateNodeTimingParams(node, swapAtTimings);
|
|
1288
1311
|
}
|
|
1289
1312
|
|
|
1290
1313
|
// Make sure the old state node has its inex and total values up to date for valid "from" function values calculation
|
|
1291
1314
|
oldStateNode.index = node.index;
|
|
1292
|
-
oldStateNode.
|
|
1315
|
+
oldStateNode.targets = node.targets;
|
|
1293
1316
|
|
|
1294
1317
|
// Computes all values up front so we can check for changes and we don't have to re-compute them inside the animation props
|
|
1295
1318
|
for (let prop in nodeProperties) {
|
|
1296
|
-
nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.
|
|
1297
|
-
oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.
|
|
1319
|
+
nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.targets, null, null);
|
|
1320
|
+
oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.targets, null, null);
|
|
1298
1321
|
}
|
|
1299
1322
|
|
|
1300
1323
|
// Use a 1px tolerance to detect dimensions changes to prevent width / height animations on barelly visible elements
|
|
@@ -1520,8 +1543,8 @@ class AutoLayout {
|
|
|
1520
1543
|
}
|
|
1521
1544
|
$el.style.transform = oldState.getComputedValue($el, 'transform');
|
|
1522
1545
|
if (animatedSwap.includes($el)) {
|
|
1523
|
-
node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.
|
|
1524
|
-
node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.
|
|
1546
|
+
node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.targets, null, null);
|
|
1547
|
+
node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.targets, null, null);
|
|
1525
1548
|
}
|
|
1526
1549
|
}
|
|
1527
1550
|
this.transformAnimation = waapi.animate(transformed, {
|
|
@@ -1536,7 +1559,7 @@ class AutoLayout {
|
|
|
1536
1559
|
if (!animatedSwap.includes($el)) return newValue;
|
|
1537
1560
|
const oldValue = oldState.getComputedValue($el, 'transform');
|
|
1538
1561
|
const node = newState.getNode($el);
|
|
1539
|
-
return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.
|
|
1562
|
+
return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.targets, null, null), newValue]
|
|
1540
1563
|
},
|
|
1541
1564
|
autoplay: false,
|
|
1542
1565
|
// persist: true,
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - svg - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.0
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
var consts = require('../core/consts.cjs');
|
|
11
10
|
var helpers$1 = require('../core/helpers.cjs');
|
|
12
11
|
var helpers = require('./helpers.cjs');
|
|
13
12
|
|
|
@@ -23,7 +22,7 @@ var helpers = require('./helpers.cjs');
|
|
|
23
22
|
* @param {Number} [precision]
|
|
24
23
|
* @return {FunctionValue}
|
|
25
24
|
*/
|
|
26
|
-
const morphTo = (path2, precision = .33) => ($path1) => {
|
|
25
|
+
const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
|
|
27
26
|
const tagName1 = ($path1.tagName || '').toLowerCase();
|
|
28
27
|
if (!tagName1.match(/^(path|polygon|polyline)$/)) {
|
|
29
28
|
throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
|
|
@@ -38,7 +37,7 @@ const morphTo = (path2, precision = .33) => ($path1) => {
|
|
|
38
37
|
}
|
|
39
38
|
const isPath = $path1.tagName === 'path';
|
|
40
39
|
const separator = isPath ? ' ' : ',';
|
|
41
|
-
const previousPoints =
|
|
40
|
+
const previousPoints = prevTween ? prevTween._value : null;
|
|
42
41
|
if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
|
|
43
42
|
|
|
44
43
|
let v1 = '', v2 = '';
|
|
@@ -60,8 +59,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
|
|
|
60
59
|
}
|
|
61
60
|
}
|
|
62
61
|
|
|
63
|
-
$path1[consts.morphPointsSymbol] = v2;
|
|
64
|
-
|
|
65
62
|
return [v1, v2];
|
|
66
63
|
};
|
|
67
64
|
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - svg - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.0
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { morphPointsSymbol } from '../core/consts.js';
|
|
9
8
|
import { round } from '../core/helpers.js';
|
|
10
9
|
import { getPath } from './helpers.js';
|
|
11
10
|
|
|
@@ -21,7 +20,7 @@ import { getPath } from './helpers.js';
|
|
|
21
20
|
* @param {Number} [precision]
|
|
22
21
|
* @return {FunctionValue}
|
|
23
22
|
*/
|
|
24
|
-
const morphTo = (path2, precision = .33) => ($path1) => {
|
|
23
|
+
const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
|
|
25
24
|
const tagName1 = ($path1.tagName || '').toLowerCase();
|
|
26
25
|
if (!tagName1.match(/^(path|polygon|polyline)$/)) {
|
|
27
26
|
throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
|
|
@@ -36,7 +35,7 @@ const morphTo = (path2, precision = .33) => ($path1) => {
|
|
|
36
35
|
}
|
|
37
36
|
const isPath = $path1.tagName === 'path';
|
|
38
37
|
const separator = isPath ? ' ' : ',';
|
|
39
|
-
const previousPoints =
|
|
38
|
+
const previousPoints = prevTween ? prevTween._value : null;
|
|
40
39
|
if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
|
|
41
40
|
|
|
42
41
|
let v1 = '', v2 = '';
|
|
@@ -58,8 +57,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
|
|
|
58
57
|
}
|
|
59
58
|
}
|
|
60
59
|
|
|
61
|
-
$path1[morphPointsSymbol] = v2;
|
|
62
|
-
|
|
63
60
|
return [v1, v2];
|
|
64
61
|
};
|
|
65
62
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - text - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.0
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -8,9 +8,11 @@
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
10
|
var split = require('./split.cjs');
|
|
11
|
+
var scramble = require('./scramble.cjs');
|
|
11
12
|
|
|
12
13
|
|
|
13
14
|
|
|
14
15
|
exports.TextSplitter = split.TextSplitter;
|
|
15
16
|
exports.split = split.split;
|
|
16
17
|
exports.splitText = split.splitText;
|
|
18
|
+
exports.scrambleText = scramble.scrambleText;
|