animejs 4.3.3 → 4.3.5

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 (124) hide show
  1. package/dist/bundles/anime.esm.js +73 -58
  2. package/dist/bundles/anime.esm.min.js +2 -2
  3. package/dist/bundles/anime.umd.js +73 -58
  4. package/dist/bundles/anime.umd.min.js +2 -2
  5. package/dist/modules/animatable/animatable.cjs +1 -1
  6. package/dist/modules/animatable/animatable.js +1 -1
  7. package/dist/modules/animatable/index.cjs +1 -1
  8. package/dist/modules/animatable/index.js +1 -1
  9. package/dist/modules/animation/additive.cjs +1 -1
  10. package/dist/modules/animation/additive.js +1 -1
  11. package/dist/modules/animation/animation.cjs +1 -1
  12. package/dist/modules/animation/animation.js +1 -1
  13. package/dist/modules/animation/composition.cjs +1 -1
  14. package/dist/modules/animation/composition.js +1 -1
  15. package/dist/modules/animation/index.cjs +1 -1
  16. package/dist/modules/animation/index.js +1 -1
  17. package/dist/modules/core/clock.cjs +1 -1
  18. package/dist/modules/core/clock.js +1 -1
  19. package/dist/modules/core/colors.cjs +1 -1
  20. package/dist/modules/core/colors.js +1 -1
  21. package/dist/modules/core/consts.cjs +3 -1
  22. package/dist/modules/core/consts.d.ts +1 -0
  23. package/dist/modules/core/consts.js +3 -2
  24. package/dist/modules/core/globals.cjs +2 -2
  25. package/dist/modules/core/globals.js +2 -2
  26. package/dist/modules/core/helpers.cjs +5 -5
  27. package/dist/modules/core/helpers.js +6 -6
  28. package/dist/modules/core/render.cjs +1 -1
  29. package/dist/modules/core/render.js +1 -1
  30. package/dist/modules/core/styles.cjs +1 -1
  31. package/dist/modules/core/styles.js +1 -1
  32. package/dist/modules/core/targets.cjs +1 -1
  33. package/dist/modules/core/targets.js +1 -1
  34. package/dist/modules/core/transforms.cjs +1 -1
  35. package/dist/modules/core/transforms.js +1 -1
  36. package/dist/modules/core/units.cjs +1 -1
  37. package/dist/modules/core/units.js +1 -1
  38. package/dist/modules/core/values.cjs +1 -1
  39. package/dist/modules/core/values.js +1 -1
  40. package/dist/modules/draggable/draggable.cjs +1 -1
  41. package/dist/modules/draggable/draggable.js +1 -1
  42. package/dist/modules/draggable/index.cjs +1 -1
  43. package/dist/modules/draggable/index.js +1 -1
  44. package/dist/modules/easings/cubic-bezier/index.cjs +1 -1
  45. package/dist/modules/easings/cubic-bezier/index.js +1 -1
  46. package/dist/modules/easings/eases/index.cjs +1 -1
  47. package/dist/modules/easings/eases/index.js +1 -1
  48. package/dist/modules/easings/eases/parser.cjs +1 -1
  49. package/dist/modules/easings/eases/parser.js +1 -1
  50. package/dist/modules/easings/index.cjs +1 -1
  51. package/dist/modules/easings/index.js +1 -1
  52. package/dist/modules/easings/irregular/index.cjs +1 -1
  53. package/dist/modules/easings/irregular/index.js +1 -1
  54. package/dist/modules/easings/linear/index.cjs +1 -1
  55. package/dist/modules/easings/linear/index.js +1 -1
  56. package/dist/modules/easings/none.cjs +1 -1
  57. package/dist/modules/easings/none.js +1 -1
  58. package/dist/modules/easings/spring/index.cjs +1 -1
  59. package/dist/modules/easings/spring/index.js +1 -1
  60. package/dist/modules/easings/steps/index.cjs +1 -1
  61. package/dist/modules/easings/steps/index.js +1 -1
  62. package/dist/modules/engine/engine.cjs +1 -1
  63. package/dist/modules/engine/engine.js +1 -1
  64. package/dist/modules/engine/index.cjs +1 -1
  65. package/dist/modules/engine/index.js +1 -1
  66. package/dist/modules/events/index.cjs +1 -1
  67. package/dist/modules/events/index.js +1 -1
  68. package/dist/modules/events/scroll.cjs +5 -4
  69. package/dist/modules/events/scroll.js +5 -4
  70. package/dist/modules/index.cjs +1 -1
  71. package/dist/modules/index.js +1 -1
  72. package/dist/modules/layout/index.cjs +1 -1
  73. package/dist/modules/layout/index.js +1 -1
  74. package/dist/modules/layout/layout.cjs +55 -46
  75. package/dist/modules/layout/layout.js +55 -46
  76. package/dist/modules/scope/index.cjs +1 -1
  77. package/dist/modules/scope/index.js +1 -1
  78. package/dist/modules/scope/scope.cjs +1 -1
  79. package/dist/modules/scope/scope.js +1 -1
  80. package/dist/modules/svg/drawable.cjs +1 -1
  81. package/dist/modules/svg/drawable.js +1 -1
  82. package/dist/modules/svg/helpers.cjs +1 -1
  83. package/dist/modules/svg/helpers.js +1 -1
  84. package/dist/modules/svg/index.cjs +1 -1
  85. package/dist/modules/svg/index.js +1 -1
  86. package/dist/modules/svg/morphto.cjs +1 -1
  87. package/dist/modules/svg/morphto.js +1 -1
  88. package/dist/modules/svg/motionpath.cjs +1 -1
  89. package/dist/modules/svg/motionpath.js +1 -1
  90. package/dist/modules/text/index.cjs +1 -1
  91. package/dist/modules/text/index.js +1 -1
  92. package/dist/modules/text/split.cjs +1 -1
  93. package/dist/modules/text/split.js +1 -1
  94. package/dist/modules/timeline/index.cjs +1 -1
  95. package/dist/modules/timeline/index.js +1 -1
  96. package/dist/modules/timeline/position.cjs +1 -1
  97. package/dist/modules/timeline/position.js +1 -1
  98. package/dist/modules/timeline/timeline.cjs +8 -4
  99. package/dist/modules/timeline/timeline.js +8 -4
  100. package/dist/modules/timer/index.cjs +1 -1
  101. package/dist/modules/timer/index.js +1 -1
  102. package/dist/modules/timer/timer.cjs +1 -1
  103. package/dist/modules/timer/timer.js +1 -1
  104. package/dist/modules/utils/chainable.cjs +1 -1
  105. package/dist/modules/utils/chainable.js +1 -1
  106. package/dist/modules/utils/index.cjs +1 -1
  107. package/dist/modules/utils/index.js +1 -1
  108. package/dist/modules/utils/number.cjs +1 -1
  109. package/dist/modules/utils/number.js +1 -1
  110. package/dist/modules/utils/random.cjs +1 -1
  111. package/dist/modules/utils/random.js +1 -1
  112. package/dist/modules/utils/stagger.cjs +1 -1
  113. package/dist/modules/utils/stagger.js +1 -1
  114. package/dist/modules/utils/target.cjs +1 -1
  115. package/dist/modules/utils/target.js +1 -1
  116. package/dist/modules/utils/time.cjs +1 -1
  117. package/dist/modules/utils/time.js +1 -1
  118. package/dist/modules/waapi/composition.cjs +2 -2
  119. package/dist/modules/waapi/composition.js +2 -2
  120. package/dist/modules/waapi/index.cjs +1 -1
  121. package/dist/modules/waapi/index.js +1 -1
  122. package/dist/modules/waapi/waapi.cjs +1 -1
  123. package/dist/modules/waapi/waapi.js +1 -1
  124. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - events - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -500,7 +500,9 @@ class ScrollObserver {
500
500
  linked.pause();
501
501
  this.linked = linked;
502
502
  // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
503
- if (!helpers.isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
503
+ if (!helpers.isUnd(linked) && !helpers.isUnd(/** @type {WAAPIAnimation} */(linked).persist)) {
504
+ /** @type {WAAPIAnimation} */(linked).persist = true;
505
+ }
504
506
  // Try to use a target of the linked object if no target parameters specified
505
507
  if (!this._params.target) {
506
508
  /** @type {HTMLElement} */
@@ -702,12 +704,11 @@ class ScrollObserver {
702
704
  // let offsetX = 0;
703
705
  // let offsetY = 0;
704
706
  // let $offsetParent = $el;
705
- /** @type {Element} */
706
707
  if (linked) {
707
708
  linkedTime = linked.currentTime;
708
709
  linked.seek(0, true);
709
710
  }
710
- /* Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
711
+ // Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
711
712
  // const isContainerStatic = get(container.element, 'position') === 'static' ? set(container.element, { position: 'relative '}) : false;
712
713
  // while ($el && $el !== container.element && $el !== doc.body) {
713
714
  // const isSticky = get($el, 'position') === 'sticky' ?
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - events - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -498,7 +498,9 @@ class ScrollObserver {
498
498
  linked.pause();
499
499
  this.linked = linked;
500
500
  // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
501
- if (!isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
501
+ if (!isUnd(linked) && !isUnd(/** @type {WAAPIAnimation} */(linked).persist)) {
502
+ /** @type {WAAPIAnimation} */(linked).persist = true;
503
+ }
502
504
  // Try to use a target of the linked object if no target parameters specified
503
505
  if (!this._params.target) {
504
506
  /** @type {HTMLElement} */
@@ -700,12 +702,11 @@ class ScrollObserver {
700
702
  // let offsetX = 0;
701
703
  // let offsetY = 0;
702
704
  // let $offsetParent = $el;
703
- /** @type {Element} */
704
705
  if (linked) {
705
706
  linkedTime = linked.currentTime;
706
707
  linked.seek(0, true);
707
708
  }
708
- /* Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
709
+ // Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
709
710
  // const isContainerStatic = get(container.element, 'position') === 'static' ? set(container.element, { position: 'relative '}) : false;
710
711
  // while ($el && $el !== container.element && $el !== doc.body) {
711
712
  // const isSticky = get($el, 'position') === 'sticky' ?
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - layout - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - layout - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - layout - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1309,7 +1309,7 @@ class AutoLayout {
1309
1309
  // const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
1310
1310
 
1311
1311
  if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
1312
- if (!node.isInlined && (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none')) {
1312
+ if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
1313
1313
  node.hasTransform = true;
1314
1314
  transformed.push($el);
1315
1315
  }
@@ -1325,7 +1325,7 @@ class AutoLayout {
1325
1325
  if (!node.isTarget) {
1326
1326
  swapping.push($el);
1327
1327
  if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
1328
- if (!node.isInlined && swapAtProps.transform) {
1328
+ if (swapAtProps.transform) {
1329
1329
  node.hasTransform = true;
1330
1330
  transformed.push($el);
1331
1331
  }
@@ -1365,7 +1365,7 @@ class AutoLayout {
1365
1365
 
1366
1366
  // muteNodeTransition(newNode);
1367
1367
 
1368
- // Don't animate dimensions and positions of inlined elements
1368
+ // Don't animate positions of inlined elements (to avoid text reflow)
1369
1369
  if (!newNode.isInlined) {
1370
1370
  // Display grid can mess with the absolute positioning, so set it to block during transition
1371
1371
  if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
@@ -1384,14 +1384,15 @@ class AutoLayout {
1384
1384
  $el.style.left = '0px';
1385
1385
  $el.style.top = '0px';
1386
1386
  }
1387
- $el.style.width = `${oldNodeState.width}px`;
1388
- $el.style.height = `${oldNodeState.height}px`;
1389
- // Overrides user defined min and max to prevents width and height clamping
1390
- $el.style.minWidth = `auto`;
1391
- $el.style.minHeight = `auto`;
1392
- $el.style.maxWidth = `none`;
1393
- $el.style.maxHeight = `none`;
1394
1387
  }
1388
+ // Animate dimensions for all elements (including inlined)
1389
+ $el.style.width = `${oldNodeState.width}px`;
1390
+ $el.style.height = `${oldNodeState.height}px`;
1391
+ // Overrides user defined min and max to prevents width and height clamping
1392
+ $el.style.minWidth = `auto`;
1393
+ $el.style.minHeight = `auto`;
1394
+ $el.style.maxWidth = `none`;
1395
+ $el.style.maxHeight = `none`;
1395
1396
  }
1396
1397
 
1397
1398
  // Restore the scroll position if the oldState differs from the current state
@@ -1412,21 +1413,19 @@ class AutoLayout {
1412
1413
  const animatedProps = {
1413
1414
  composition: 'none',
1414
1415
  };
1415
- if (!newNode.isInlined) {
1416
- if (oldNodeState.width !== newNodeState.width) {
1417
- animatedProps.width = [oldNodeState.width, newNodeState.width];
1418
- nodeHasChanged = true;
1419
- }
1420
- if (oldNodeState.height !== newNodeState.height) {
1421
- animatedProps.height = [oldNodeState.height, newNodeState.height];
1422
- nodeHasChanged = true;
1423
- }
1424
- // If the node has transforms we handle the translate animation in wappi otherwise translate and other transforms can be out of sync
1425
- // Always animate translate
1426
- if (!newNode.hasTransform) {
1427
- animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
1428
- nodeHasChanged = true;
1429
- }
1416
+ if (oldNodeState.width !== newNodeState.width) {
1417
+ animatedProps.width = [oldNodeState.width, newNodeState.width];
1418
+ nodeHasChanged = true;
1419
+ }
1420
+ if (oldNodeState.height !== newNodeState.height) {
1421
+ animatedProps.height = [oldNodeState.height, newNodeState.height];
1422
+ nodeHasChanged = true;
1423
+ }
1424
+ // If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
1425
+ // And we don't animate the position of inlined elements
1426
+ if (!newNode.hasTransform && !newNode.isInlined) {
1427
+ animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
1428
+ nodeHasChanged = true;
1430
1429
  }
1431
1430
  this.properties.forEach(prop => {
1432
1431
  const oldVal = oldNodeState[prop];
@@ -1448,15 +1447,16 @@ class AutoLayout {
1448
1447
  for (let i = 0, l = swapping.length; i < l; i++) {
1449
1448
  const $el = swapping[i];
1450
1449
  const oldNode = oldState.getNode($el);
1450
+ const oldNodeProps = oldNode.properties;
1451
+ $el.style.width = `${oldNodeProps.width}px`;
1452
+ $el.style.height = `${oldNodeProps.height}px`;
1453
+ // Overrides user defined min and max to prevents width and height clamping
1454
+ $el.style.minWidth = `auto`;
1455
+ $el.style.minHeight = `auto`;
1456
+ $el.style.maxWidth = `none`;
1457
+ $el.style.maxHeight = `none`;
1458
+ // We don't animate the position of inlined elements
1451
1459
  if (!oldNode.isInlined) {
1452
- const oldNodeProps = oldNode.properties;
1453
- $el.style.width = `${oldNodeProps.width}px`;
1454
- $el.style.height = `${oldNodeProps.height}px`;
1455
- // Overrides user defined min and max to prevents width and height clamping
1456
- $el.style.minWidth = `auto`;
1457
- $el.style.minHeight = `auto`;
1458
- $el.style.maxWidth = `none`;
1459
- $el.style.maxHeight = `none`;
1460
1460
  $el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
1461
1461
  }
1462
1462
  this.properties.forEach(prop => {
@@ -1471,14 +1471,15 @@ class AutoLayout {
1471
1471
  const newNode = newState.getNode($el);
1472
1472
  const newNodeProps = newNode.properties;
1473
1473
  this.timeline.call(() => {
1474
+ $el.style.width = `${newNodeProps.width}px`;
1475
+ $el.style.height = `${newNodeProps.height}px`;
1476
+ // Overrides user defined min and max to prevents width and height clamping
1477
+ $el.style.minWidth = `auto`;
1478
+ $el.style.minHeight = `auto`;
1479
+ $el.style.maxWidth = `none`;
1480
+ $el.style.maxHeight = `none`;
1481
+ // Don't set translate for inlined elements (to avoid text reflow)
1474
1482
  if (!newNode.isInlined) {
1475
- $el.style.width = `${newNodeProps.width}px`;
1476
- $el.style.height = `${newNodeProps.height}px`;
1477
- // Overrides user defined min and max to prevents width and height clamping
1478
- $el.style.minWidth = `auto`;
1479
- $el.style.minHeight = `auto`;
1480
- $el.style.maxWidth = `none`;
1481
- $el.style.maxHeight = `none`;
1482
1483
  $el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
1483
1484
  }
1484
1485
  this.properties.forEach(prop => {
@@ -1511,19 +1512,27 @@ class AutoLayout {
1511
1512
  const transformedLength = transformed.length;
1512
1513
 
1513
1514
  if (transformedLength) {
1514
- // We only need to set the transform property here since translate is alread defined in the targets loop
1515
+ // We only need to set the transform property here since translate is already defined in the targets loop
1515
1516
  for (let i = 0; i < transformedLength; i++) {
1516
1517
  const $el = transformed[i];
1517
- $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`,
1518
+ const node = newState.getNode($el);
1519
+ // Don't set translate for inlined elements (to avoid text reflow)
1520
+ if (!node.isInlined) {
1521
+ $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
1522
+ }
1518
1523
  $el.style.transform = oldState.getComputedValue($el, 'transform');
1519
1524
  if (animatedSwap.includes($el)) {
1520
- const node = newState.getNode($el);
1521
1525
  node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
1522
1526
  node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
1523
1527
  }
1524
1528
  }
1525
1529
  this.transformAnimation = waapi.waapi.animate(transformed, {
1526
- translate: (/** @type {HTMLElement} */$el) => `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`,
1530
+ translate: (/** @type {HTMLElement} */$el) => {
1531
+ const node = newState.getNode($el);
1532
+ // Don't animate translate for inlined elements (to avoid text reflow)
1533
+ if (node.isInlined) return '0px 0px';
1534
+ return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
1535
+ },
1527
1536
  transform: (/** @type {HTMLElement} */$el) => {
1528
1537
  const newValue = newState.getComputedValue($el, 'transform');
1529
1538
  if (!animatedSwap.includes($el)) return newValue;
@@ -1532,7 +1541,7 @@ class AutoLayout {
1532
1541
  return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
1533
1542
  },
1534
1543
  autoplay: false,
1535
- persist: true,
1544
+ // persist: true,
1536
1545
  ...timingParams,
1537
1546
  });
1538
1547
  this.timeline.sync(this.transformAnimation, 0);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - layout - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1307,7 +1307,7 @@ class AutoLayout {
1307
1307
  // const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
1308
1308
 
1309
1309
  if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
1310
- if (!node.isInlined && (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none')) {
1310
+ if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
1311
1311
  node.hasTransform = true;
1312
1312
  transformed.push($el);
1313
1313
  }
@@ -1323,7 +1323,7 @@ class AutoLayout {
1323
1323
  if (!node.isTarget) {
1324
1324
  swapping.push($el);
1325
1325
  if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
1326
- if (!node.isInlined && swapAtProps.transform) {
1326
+ if (swapAtProps.transform) {
1327
1327
  node.hasTransform = true;
1328
1328
  transformed.push($el);
1329
1329
  }
@@ -1363,7 +1363,7 @@ class AutoLayout {
1363
1363
 
1364
1364
  // muteNodeTransition(newNode);
1365
1365
 
1366
- // Don't animate dimensions and positions of inlined elements
1366
+ // Don't animate positions of inlined elements (to avoid text reflow)
1367
1367
  if (!newNode.isInlined) {
1368
1368
  // Display grid can mess with the absolute positioning, so set it to block during transition
1369
1369
  if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
@@ -1382,14 +1382,15 @@ class AutoLayout {
1382
1382
  $el.style.left = '0px';
1383
1383
  $el.style.top = '0px';
1384
1384
  }
1385
- $el.style.width = `${oldNodeState.width}px`;
1386
- $el.style.height = `${oldNodeState.height}px`;
1387
- // Overrides user defined min and max to prevents width and height clamping
1388
- $el.style.minWidth = `auto`;
1389
- $el.style.minHeight = `auto`;
1390
- $el.style.maxWidth = `none`;
1391
- $el.style.maxHeight = `none`;
1392
1385
  }
1386
+ // Animate dimensions for all elements (including inlined)
1387
+ $el.style.width = `${oldNodeState.width}px`;
1388
+ $el.style.height = `${oldNodeState.height}px`;
1389
+ // Overrides user defined min and max to prevents width and height clamping
1390
+ $el.style.minWidth = `auto`;
1391
+ $el.style.minHeight = `auto`;
1392
+ $el.style.maxWidth = `none`;
1393
+ $el.style.maxHeight = `none`;
1393
1394
  }
1394
1395
 
1395
1396
  // Restore the scroll position if the oldState differs from the current state
@@ -1410,21 +1411,19 @@ class AutoLayout {
1410
1411
  const animatedProps = {
1411
1412
  composition: 'none',
1412
1413
  };
1413
- if (!newNode.isInlined) {
1414
- if (oldNodeState.width !== newNodeState.width) {
1415
- animatedProps.width = [oldNodeState.width, newNodeState.width];
1416
- nodeHasChanged = true;
1417
- }
1418
- if (oldNodeState.height !== newNodeState.height) {
1419
- animatedProps.height = [oldNodeState.height, newNodeState.height];
1420
- nodeHasChanged = true;
1421
- }
1422
- // If the node has transforms we handle the translate animation in wappi otherwise translate and other transforms can be out of sync
1423
- // Always animate translate
1424
- if (!newNode.hasTransform) {
1425
- animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
1426
- nodeHasChanged = true;
1427
- }
1414
+ if (oldNodeState.width !== newNodeState.width) {
1415
+ animatedProps.width = [oldNodeState.width, newNodeState.width];
1416
+ nodeHasChanged = true;
1417
+ }
1418
+ if (oldNodeState.height !== newNodeState.height) {
1419
+ animatedProps.height = [oldNodeState.height, newNodeState.height];
1420
+ nodeHasChanged = true;
1421
+ }
1422
+ // If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
1423
+ // And we don't animate the position of inlined elements
1424
+ if (!newNode.hasTransform && !newNode.isInlined) {
1425
+ animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
1426
+ nodeHasChanged = true;
1428
1427
  }
1429
1428
  this.properties.forEach(prop => {
1430
1429
  const oldVal = oldNodeState[prop];
@@ -1446,15 +1445,16 @@ class AutoLayout {
1446
1445
  for (let i = 0, l = swapping.length; i < l; i++) {
1447
1446
  const $el = swapping[i];
1448
1447
  const oldNode = oldState.getNode($el);
1448
+ const oldNodeProps = oldNode.properties;
1449
+ $el.style.width = `${oldNodeProps.width}px`;
1450
+ $el.style.height = `${oldNodeProps.height}px`;
1451
+ // Overrides user defined min and max to prevents width and height clamping
1452
+ $el.style.minWidth = `auto`;
1453
+ $el.style.minHeight = `auto`;
1454
+ $el.style.maxWidth = `none`;
1455
+ $el.style.maxHeight = `none`;
1456
+ // We don't animate the position of inlined elements
1449
1457
  if (!oldNode.isInlined) {
1450
- const oldNodeProps = oldNode.properties;
1451
- $el.style.width = `${oldNodeProps.width}px`;
1452
- $el.style.height = `${oldNodeProps.height}px`;
1453
- // Overrides user defined min and max to prevents width and height clamping
1454
- $el.style.minWidth = `auto`;
1455
- $el.style.minHeight = `auto`;
1456
- $el.style.maxWidth = `none`;
1457
- $el.style.maxHeight = `none`;
1458
1458
  $el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
1459
1459
  }
1460
1460
  this.properties.forEach(prop => {
@@ -1469,14 +1469,15 @@ class AutoLayout {
1469
1469
  const newNode = newState.getNode($el);
1470
1470
  const newNodeProps = newNode.properties;
1471
1471
  this.timeline.call(() => {
1472
+ $el.style.width = `${newNodeProps.width}px`;
1473
+ $el.style.height = `${newNodeProps.height}px`;
1474
+ // Overrides user defined min and max to prevents width and height clamping
1475
+ $el.style.minWidth = `auto`;
1476
+ $el.style.minHeight = `auto`;
1477
+ $el.style.maxWidth = `none`;
1478
+ $el.style.maxHeight = `none`;
1479
+ // Don't set translate for inlined elements (to avoid text reflow)
1472
1480
  if (!newNode.isInlined) {
1473
- $el.style.width = `${newNodeProps.width}px`;
1474
- $el.style.height = `${newNodeProps.height}px`;
1475
- // Overrides user defined min and max to prevents width and height clamping
1476
- $el.style.minWidth = `auto`;
1477
- $el.style.minHeight = `auto`;
1478
- $el.style.maxWidth = `none`;
1479
- $el.style.maxHeight = `none`;
1480
1481
  $el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
1481
1482
  }
1482
1483
  this.properties.forEach(prop => {
@@ -1509,19 +1510,27 @@ class AutoLayout {
1509
1510
  const transformedLength = transformed.length;
1510
1511
 
1511
1512
  if (transformedLength) {
1512
- // We only need to set the transform property here since translate is alread defined in the targets loop
1513
+ // We only need to set the transform property here since translate is already defined in the targets loop
1513
1514
  for (let i = 0; i < transformedLength; i++) {
1514
1515
  const $el = transformed[i];
1515
- $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`,
1516
+ const node = newState.getNode($el);
1517
+ // Don't set translate for inlined elements (to avoid text reflow)
1518
+ if (!node.isInlined) {
1519
+ $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
1520
+ }
1516
1521
  $el.style.transform = oldState.getComputedValue($el, 'transform');
1517
1522
  if (animatedSwap.includes($el)) {
1518
- const node = newState.getNode($el);
1519
1523
  node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
1520
1524
  node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
1521
1525
  }
1522
1526
  }
1523
1527
  this.transformAnimation = waapi.animate(transformed, {
1524
- translate: (/** @type {HTMLElement} */$el) => `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`,
1528
+ translate: (/** @type {HTMLElement} */$el) => {
1529
+ const node = newState.getNode($el);
1530
+ // Don't animate translate for inlined elements (to avoid text reflow)
1531
+ if (node.isInlined) return '0px 0px';
1532
+ return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
1533
+ },
1525
1534
  transform: (/** @type {HTMLElement} */$el) => {
1526
1535
  const newValue = newState.getComputedValue($el, 'transform');
1527
1536
  if (!animatedSwap.includes($el)) return newValue;
@@ -1530,7 +1539,7 @@ class AutoLayout {
1530
1539
  return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
1531
1540
  },
1532
1541
  autoplay: false,
1533
- persist: true,
1542
+ // persist: true,
1534
1543
  ...timingParams,
1535
1544
  });
1536
1545
  this.timeline.sync(this.transformAnimation, 0);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - scope - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - text - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
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.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - text - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - timeline - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - timeline - ESM
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - timeline - CJS
3
- * @version v4.3.3
3
+ * @version v4.3.5
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */