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.
Files changed (142) hide show
  1. package/README.md +9 -12
  2. package/dist/bundles/anime.esm.js +1048 -421
  3. package/dist/bundles/anime.esm.min.js +2 -2
  4. package/dist/bundles/anime.umd.js +1053 -421
  5. package/dist/bundles/anime.umd.min.js +2 -2
  6. package/dist/modules/animatable/animatable.cjs +1 -1
  7. package/dist/modules/animatable/animatable.js +2 -2
  8. package/dist/modules/animatable/index.cjs +1 -1
  9. package/dist/modules/animatable/index.js +1 -1
  10. package/dist/modules/animation/additive.cjs +1 -1
  11. package/dist/modules/animation/additive.js +1 -1
  12. package/dist/modules/animation/animation.cjs +38 -16
  13. package/dist/modules/animation/animation.d.ts +2 -2
  14. package/dist/modules/animation/animation.js +42 -20
  15. package/dist/modules/animation/composition.cjs +1 -1
  16. package/dist/modules/animation/composition.js +3 -3
  17. package/dist/modules/animation/index.cjs +1 -1
  18. package/dist/modules/animation/index.js +1 -1
  19. package/dist/modules/core/clock.cjs +1 -1
  20. package/dist/modules/core/clock.js +1 -1
  21. package/dist/modules/core/colors.cjs +1 -1
  22. package/dist/modules/core/colors.js +1 -1
  23. package/dist/modules/core/consts.cjs +3 -9
  24. package/dist/modules/core/consts.d.ts +1 -5
  25. package/dist/modules/core/consts.js +4 -8
  26. package/dist/modules/core/globals.cjs +16 -5
  27. package/dist/modules/core/globals.d.ts +22 -1
  28. package/dist/modules/core/globals.js +18 -6
  29. package/dist/modules/core/helpers.cjs +7 -10
  30. package/dist/modules/core/helpers.js +8 -11
  31. package/dist/modules/core/render.cjs +66 -63
  32. package/dist/modules/core/render.js +68 -65
  33. package/dist/modules/core/styles.cjs +53 -32
  34. package/dist/modules/core/styles.d.ts +1 -0
  35. package/dist/modules/core/styles.js +55 -35
  36. package/dist/modules/core/targets.cjs +1 -1
  37. package/dist/modules/core/targets.js +1 -1
  38. package/dist/modules/core/transforms.cjs +129 -13
  39. package/dist/modules/core/transforms.d.ts +1 -0
  40. package/dist/modules/core/transforms.js +130 -15
  41. package/dist/modules/core/units.cjs +1 -1
  42. package/dist/modules/core/units.js +1 -1
  43. package/dist/modules/core/values.cjs +68 -8
  44. package/dist/modules/core/values.d.ts +5 -2
  45. package/dist/modules/core/values.js +69 -11
  46. package/dist/modules/draggable/draggable.cjs +1 -1
  47. package/dist/modules/draggable/draggable.js +1 -1
  48. package/dist/modules/draggable/index.cjs +1 -1
  49. package/dist/modules/draggable/index.js +1 -1
  50. package/dist/modules/easings/cubic-bezier/index.cjs +1 -1
  51. package/dist/modules/easings/cubic-bezier/index.js +1 -1
  52. package/dist/modules/easings/eases/index.cjs +1 -1
  53. package/dist/modules/easings/eases/index.js +1 -1
  54. package/dist/modules/easings/eases/parser.cjs +1 -1
  55. package/dist/modules/easings/eases/parser.js +1 -1
  56. package/dist/modules/easings/index.cjs +1 -1
  57. package/dist/modules/easings/index.js +1 -1
  58. package/dist/modules/easings/irregular/index.cjs +1 -1
  59. package/dist/modules/easings/irregular/index.js +1 -1
  60. package/dist/modules/easings/linear/index.cjs +1 -1
  61. package/dist/modules/easings/linear/index.js +1 -1
  62. package/dist/modules/easings/none.cjs +1 -1
  63. package/dist/modules/easings/none.js +1 -1
  64. package/dist/modules/easings/spring/index.cjs +1 -1
  65. package/dist/modules/easings/spring/index.js +1 -1
  66. package/dist/modules/easings/steps/index.cjs +1 -1
  67. package/dist/modules/easings/steps/index.js +1 -1
  68. package/dist/modules/engine/engine.cjs +1 -1
  69. package/dist/modules/engine/engine.js +1 -1
  70. package/dist/modules/engine/index.cjs +1 -1
  71. package/dist/modules/engine/index.js +1 -1
  72. package/dist/modules/events/index.cjs +1 -1
  73. package/dist/modules/events/index.js +1 -1
  74. package/dist/modules/events/scroll.cjs +1 -1
  75. package/dist/modules/events/scroll.js +1 -1
  76. package/dist/modules/index.cjs +9 -1
  77. package/dist/modules/index.d.ts +1 -0
  78. package/dist/modules/index.js +4 -1
  79. package/dist/modules/layout/index.cjs +1 -1
  80. package/dist/modules/layout/index.js +1 -1
  81. package/dist/modules/layout/layout.cjs +47 -24
  82. package/dist/modules/layout/layout.d.ts +4 -3
  83. package/dist/modules/layout/layout.js +48 -25
  84. package/dist/modules/scope/index.cjs +1 -1
  85. package/dist/modules/scope/index.js +1 -1
  86. package/dist/modules/scope/scope.cjs +1 -1
  87. package/dist/modules/scope/scope.js +1 -1
  88. package/dist/modules/svg/drawable.cjs +1 -1
  89. package/dist/modules/svg/drawable.js +1 -1
  90. package/dist/modules/svg/helpers.cjs +1 -1
  91. package/dist/modules/svg/helpers.js +1 -1
  92. package/dist/modules/svg/index.cjs +1 -1
  93. package/dist/modules/svg/index.js +1 -1
  94. package/dist/modules/svg/morphto.cjs +3 -6
  95. package/dist/modules/svg/morphto.js +3 -6
  96. package/dist/modules/svg/motionpath.cjs +1 -1
  97. package/dist/modules/svg/motionpath.js +1 -1
  98. package/dist/modules/text/index.cjs +3 -1
  99. package/dist/modules/text/index.d.ts +1 -0
  100. package/dist/modules/text/index.js +2 -1
  101. package/dist/modules/text/scramble.cjs +272 -0
  102. package/dist/modules/text/scramble.d.ts +3 -0
  103. package/dist/modules/text/scramble.js +270 -0
  104. package/dist/modules/text/split.cjs +5 -5
  105. package/dist/modules/text/split.d.ts +5 -5
  106. package/dist/modules/text/split.js +5 -5
  107. package/dist/modules/timeline/index.cjs +1 -1
  108. package/dist/modules/timeline/index.js +1 -1
  109. package/dist/modules/timeline/position.cjs +1 -1
  110. package/dist/modules/timeline/position.js +1 -1
  111. package/dist/modules/timeline/timeline.cjs +36 -18
  112. package/dist/modules/timeline/timeline.d.ts +6 -5
  113. package/dist/modules/timeline/timeline.js +37 -19
  114. package/dist/modules/timer/index.cjs +1 -1
  115. package/dist/modules/timer/index.js +1 -1
  116. package/dist/modules/timer/timer.cjs +8 -12
  117. package/dist/modules/timer/timer.d.ts +2 -0
  118. package/dist/modules/timer/timer.js +9 -13
  119. package/dist/modules/types/index.d.ts +76 -8
  120. package/dist/modules/utils/chainable.cjs +8 -5
  121. package/dist/modules/utils/chainable.js +8 -5
  122. package/dist/modules/utils/index.cjs +5 -1
  123. package/dist/modules/utils/index.d.ts +1 -0
  124. package/dist/modules/utils/index.js +2 -1
  125. package/dist/modules/utils/number.cjs +1 -1
  126. package/dist/modules/utils/number.js +1 -1
  127. package/dist/modules/utils/random.cjs +1 -1
  128. package/dist/modules/utils/random.js +1 -1
  129. package/dist/modules/utils/stagger.cjs +117 -20
  130. package/dist/modules/utils/stagger.js +118 -21
  131. package/dist/modules/utils/target.cjs +1 -1
  132. package/dist/modules/utils/target.js +1 -1
  133. package/dist/modules/utils/time.cjs +5 -3
  134. package/dist/modules/utils/time.d.ts +1 -1
  135. package/dist/modules/utils/time.js +5 -3
  136. package/dist/modules/waapi/composition.cjs +1 -1
  137. package/dist/modules/waapi/composition.js +1 -1
  138. package/dist/modules/waapi/index.cjs +1 -1
  139. package/dist/modules/waapi/index.js +1 -1
  140. package/dist/modules/waapi/waapi.cjs +19 -20
  141. package/dist/modules/waapi/waapi.js +20 -21
  142. package/package.json +2 -1
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - layout - CJS
3
- * @version v4.3.5
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 {Number} total
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.total = 1;
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.total);
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.total);
453
- node.delay = values.getFunctionValue(params.delay, node.$el, node.index, node.total);
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, total = this.nodes.size;
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.total = total;
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.total = animatingTotal;
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.total = animatedParent ? animatingTotal : entering.length;
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.total = animatedParent ? animatingTotal : leaving.length;
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.total = animatingTotal;
1307
+ node.targets = animating;
1285
1308
  updateNodeTimingParams(node, animationTimings);
1286
1309
  } else {
1287
1310
  node.index = animatedParent ? animatedParent.index : 0;
1288
- node.total = animatingTotal;
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.total = node.total;
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.total);
1299
- oldStateNodeProperties[prop] = values.getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.total);
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.total);
1526
- node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
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.total), newValue]
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
- total: number;
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.5
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 {Number} total
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.total = 1;
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.total);
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.total);
451
- node.delay = getFunctionValue(params.delay, node.$el, node.index, node.total);
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, total = this.nodes.size;
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.total = total;
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.total = animatingTotal;
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.total = animatedParent ? animatingTotal : entering.length;
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.total = animatedParent ? animatingTotal : leaving.length;
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.total = animatingTotal;
1305
+ node.targets = animating;
1283
1306
  updateNodeTimingParams(node, animationTimings);
1284
1307
  } else {
1285
1308
  node.index = animatedParent ? animatedParent.index : 0;
1286
- node.total = animatingTotal;
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.total = node.total;
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.total);
1297
- oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.total);
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.total);
1524
- node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
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.total), newValue]
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,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - scope - CJS
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - scope - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - scope - CJS
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - scope - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - CJS
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - CJS
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - CJS
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,13 +1,12 @@
1
1
  /**
2
2
  * Anime.js - svg - CJS
3
- * @version v4.3.5
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 = $path1[consts.morphPointsSymbol];
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.5
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 = $path1[morphPointsSymbol];
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 - svg - CJS
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - svg - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - text - CJS
3
- * @version v4.3.5
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;
@@ -1 +1,2 @@
1
1
  export * from "./split.js";
2
+ export * from "./scramble.js";
@@ -1,8 +1,9 @@
1
1
  /**
2
2
  * Anime.js - text - ESM
3
- * @version v4.3.5
3
+ * @version v4.4.0
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
7
7
 
8
8
  export { TextSplitter, split, splitText } from './split.js';
9
+ export { scrambleText } from './scramble.js';