animejs 4.3.4 → 4.3.6

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 (125) hide show
  1. package/README.md +1 -1
  2. package/dist/bundles/anime.esm.js +77 -52
  3. package/dist/bundles/anime.esm.min.js +2 -2
  4. package/dist/bundles/anime.umd.js +77 -52
  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 +1 -1
  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 +1 -1
  13. package/dist/modules/animation/animation.js +1 -1
  14. package/dist/modules/animation/composition.cjs +1 -1
  15. package/dist/modules/animation/composition.js +1 -1
  16. package/dist/modules/animation/index.cjs +1 -1
  17. package/dist/modules/animation/index.js +1 -1
  18. package/dist/modules/core/clock.cjs +1 -1
  19. package/dist/modules/core/clock.js +1 -1
  20. package/dist/modules/core/colors.cjs +1 -1
  21. package/dist/modules/core/colors.js +1 -1
  22. package/dist/modules/core/consts.cjs +3 -1
  23. package/dist/modules/core/consts.d.ts +1 -0
  24. package/dist/modules/core/consts.js +3 -2
  25. package/dist/modules/core/globals.cjs +2 -2
  26. package/dist/modules/core/globals.js +2 -2
  27. package/dist/modules/core/helpers.cjs +5 -5
  28. package/dist/modules/core/helpers.js +6 -6
  29. package/dist/modules/core/render.cjs +1 -1
  30. package/dist/modules/core/render.js +1 -1
  31. package/dist/modules/core/styles.cjs +1 -1
  32. package/dist/modules/core/styles.js +1 -1
  33. package/dist/modules/core/targets.cjs +1 -1
  34. package/dist/modules/core/targets.js +1 -1
  35. package/dist/modules/core/transforms.cjs +1 -1
  36. package/dist/modules/core/transforms.js +1 -1
  37. package/dist/modules/core/units.cjs +1 -1
  38. package/dist/modules/core/units.js +1 -1
  39. package/dist/modules/core/values.cjs +1 -1
  40. package/dist/modules/core/values.js +1 -1
  41. package/dist/modules/draggable/draggable.cjs +1 -1
  42. package/dist/modules/draggable/draggable.js +1 -1
  43. package/dist/modules/draggable/index.cjs +1 -1
  44. package/dist/modules/draggable/index.js +1 -1
  45. package/dist/modules/easings/cubic-bezier/index.cjs +1 -1
  46. package/dist/modules/easings/cubic-bezier/index.js +1 -1
  47. package/dist/modules/easings/eases/index.cjs +1 -1
  48. package/dist/modules/easings/eases/index.js +1 -1
  49. package/dist/modules/easings/eases/parser.cjs +1 -1
  50. package/dist/modules/easings/eases/parser.js +1 -1
  51. package/dist/modules/easings/index.cjs +1 -1
  52. package/dist/modules/easings/index.js +1 -1
  53. package/dist/modules/easings/irregular/index.cjs +1 -1
  54. package/dist/modules/easings/irregular/index.js +1 -1
  55. package/dist/modules/easings/linear/index.cjs +1 -1
  56. package/dist/modules/easings/linear/index.js +1 -1
  57. package/dist/modules/easings/none.cjs +1 -1
  58. package/dist/modules/easings/none.js +1 -1
  59. package/dist/modules/easings/spring/index.cjs +1 -1
  60. package/dist/modules/easings/spring/index.js +1 -1
  61. package/dist/modules/easings/steps/index.cjs +1 -1
  62. package/dist/modules/easings/steps/index.js +1 -1
  63. package/dist/modules/engine/engine.cjs +1 -1
  64. package/dist/modules/engine/engine.js +1 -1
  65. package/dist/modules/engine/index.cjs +1 -1
  66. package/dist/modules/engine/index.js +1 -1
  67. package/dist/modules/events/index.cjs +1 -1
  68. package/dist/modules/events/index.js +1 -1
  69. package/dist/modules/events/scroll.cjs +1 -1
  70. package/dist/modules/events/scroll.js +1 -1
  71. package/dist/modules/index.cjs +1 -1
  72. package/dist/modules/index.js +1 -1
  73. package/dist/modules/layout/index.cjs +1 -1
  74. package/dist/modules/layout/index.js +1 -1
  75. package/dist/modules/layout/layout.cjs +74 -46
  76. package/dist/modules/layout/layout.js +74 -46
  77. package/dist/modules/scope/index.cjs +1 -1
  78. package/dist/modules/scope/index.js +1 -1
  79. package/dist/modules/scope/scope.cjs +1 -1
  80. package/dist/modules/scope/scope.js +1 -1
  81. package/dist/modules/svg/drawable.cjs +1 -1
  82. package/dist/modules/svg/drawable.js +1 -1
  83. package/dist/modules/svg/helpers.cjs +1 -1
  84. package/dist/modules/svg/helpers.js +1 -1
  85. package/dist/modules/svg/index.cjs +1 -1
  86. package/dist/modules/svg/index.js +1 -1
  87. package/dist/modules/svg/morphto.cjs +1 -1
  88. package/dist/modules/svg/morphto.js +1 -1
  89. package/dist/modules/svg/motionpath.cjs +1 -1
  90. package/dist/modules/svg/motionpath.js +1 -1
  91. package/dist/modules/text/index.cjs +1 -1
  92. package/dist/modules/text/index.js +1 -1
  93. package/dist/modules/text/split.cjs +1 -1
  94. package/dist/modules/text/split.js +1 -1
  95. package/dist/modules/timeline/index.cjs +1 -1
  96. package/dist/modules/timeline/index.js +1 -1
  97. package/dist/modules/timeline/position.cjs +1 -1
  98. package/dist/modules/timeline/position.js +1 -1
  99. package/dist/modules/timeline/timeline.cjs +1 -1
  100. package/dist/modules/timeline/timeline.js +1 -1
  101. package/dist/modules/timer/index.cjs +1 -1
  102. package/dist/modules/timer/index.js +1 -1
  103. package/dist/modules/timer/timer.cjs +1 -1
  104. package/dist/modules/timer/timer.js +1 -1
  105. package/dist/modules/utils/chainable.cjs +1 -1
  106. package/dist/modules/utils/chainable.js +1 -1
  107. package/dist/modules/utils/index.cjs +1 -1
  108. package/dist/modules/utils/index.js +1 -1
  109. package/dist/modules/utils/number.cjs +1 -1
  110. package/dist/modules/utils/number.js +1 -1
  111. package/dist/modules/utils/random.cjs +1 -1
  112. package/dist/modules/utils/random.js +1 -1
  113. package/dist/modules/utils/stagger.cjs +1 -1
  114. package/dist/modules/utils/stagger.js +1 -1
  115. package/dist/modules/utils/target.cjs +1 -1
  116. package/dist/modules/utils/target.js +1 -1
  117. package/dist/modules/utils/time.cjs +1 -1
  118. package/dist/modules/utils/time.js +1 -1
  119. package/dist/modules/waapi/composition.cjs +2 -2
  120. package/dist/modules/waapi/composition.js +2 -2
  121. package/dist/modules/waapi/index.cjs +1 -1
  122. package/dist/modules/waapi/index.js +1 -1
  123. package/dist/modules/waapi/waapi.cjs +1 -1
  124. package/dist/modules/waapi/waapi.js +1 -1
  125. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - CJS
3
- * @version v4.3.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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,
@@ -1075,6 +1081,12 @@ class AutoLayout {
1075
1081
  }
1076
1082
  }
1077
1083
  tlParams.onComplete = () => {
1084
+ const ap = /** @type {ScrollObserver} */(params.autoplay);
1085
+ const isScrollControled = ap && ap.linked;
1086
+ if (isScrollControled) {
1087
+ if (onComplete) onComplete(this.timeline);
1088
+ return;
1089
+ }
1078
1090
  // Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
1079
1091
  if (this.transformAnimation) this.transformAnimation.cancel();
1080
1092
  newState.forEachRootNode(node => {
@@ -1096,6 +1108,13 @@ class AutoLayout {
1096
1108
  });
1097
1109
  };
1098
1110
  tlParams.onPause = () => {
1111
+ const ap = /** @type {ScrollObserver} */(params.autoplay);
1112
+ const isScrollControled = ap && ap.linked;
1113
+ if (isScrollControled) {
1114
+ if (onComplete) onComplete(this.timeline);
1115
+ if (onPause) onPause(this.timeline);
1116
+ return;
1117
+ }
1099
1118
  if (!this.root.classList.contains('is-animated')) return;
1100
1119
  if (this.transformAnimation) this.transformAnimation.cancel();
1101
1120
  newState.forEachRootNode(restoreNodeVisualState);
@@ -1309,7 +1328,7 @@ class AutoLayout {
1309
1328
  // const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
1310
1329
 
1311
1330
  if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
1312
- if (!node.isInlined && (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none')) {
1331
+ if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
1313
1332
  node.hasTransform = true;
1314
1333
  transformed.push($el);
1315
1334
  }
@@ -1325,7 +1344,7 @@ class AutoLayout {
1325
1344
  if (!node.isTarget) {
1326
1345
  swapping.push($el);
1327
1346
  if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
1328
- if (!node.isInlined && swapAtProps.transform) {
1347
+ if (swapAtProps.transform) {
1329
1348
  node.hasTransform = true;
1330
1349
  transformed.push($el);
1331
1350
  }
@@ -1365,7 +1384,7 @@ class AutoLayout {
1365
1384
 
1366
1385
  // muteNodeTransition(newNode);
1367
1386
 
1368
- // Don't animate dimensions and positions of inlined elements
1387
+ // Don't animate positions of inlined elements (to avoid text reflow)
1369
1388
  if (!newNode.isInlined) {
1370
1389
  // Display grid can mess with the absolute positioning, so set it to block during transition
1371
1390
  if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
@@ -1384,14 +1403,15 @@ class AutoLayout {
1384
1403
  $el.style.left = '0px';
1385
1404
  $el.style.top = '0px';
1386
1405
  }
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
1406
  }
1407
+ // Animate dimensions for all elements (including inlined)
1408
+ $el.style.width = `${oldNodeState.width}px`;
1409
+ $el.style.height = `${oldNodeState.height}px`;
1410
+ // Overrides user defined min and max to prevents width and height clamping
1411
+ $el.style.minWidth = `auto`;
1412
+ $el.style.minHeight = `auto`;
1413
+ $el.style.maxWidth = `none`;
1414
+ $el.style.maxHeight = `none`;
1395
1415
  }
1396
1416
 
1397
1417
  // Restore the scroll position if the oldState differs from the current state
@@ -1412,21 +1432,19 @@ class AutoLayout {
1412
1432
  const animatedProps = {
1413
1433
  composition: 'none',
1414
1434
  };
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
- }
1435
+ if (oldNodeState.width !== newNodeState.width) {
1436
+ animatedProps.width = [oldNodeState.width, newNodeState.width];
1437
+ nodeHasChanged = true;
1438
+ }
1439
+ if (oldNodeState.height !== newNodeState.height) {
1440
+ animatedProps.height = [oldNodeState.height, newNodeState.height];
1441
+ nodeHasChanged = true;
1442
+ }
1443
+ // If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
1444
+ // And we don't animate the position of inlined elements
1445
+ if (!newNode.hasTransform && !newNode.isInlined) {
1446
+ animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
1447
+ nodeHasChanged = true;
1430
1448
  }
1431
1449
  this.properties.forEach(prop => {
1432
1450
  const oldVal = oldNodeState[prop];
@@ -1448,15 +1466,16 @@ class AutoLayout {
1448
1466
  for (let i = 0, l = swapping.length; i < l; i++) {
1449
1467
  const $el = swapping[i];
1450
1468
  const oldNode = oldState.getNode($el);
1469
+ const oldNodeProps = oldNode.properties;
1470
+ $el.style.width = `${oldNodeProps.width}px`;
1471
+ $el.style.height = `${oldNodeProps.height}px`;
1472
+ // Overrides user defined min and max to prevents width and height clamping
1473
+ $el.style.minWidth = `auto`;
1474
+ $el.style.minHeight = `auto`;
1475
+ $el.style.maxWidth = `none`;
1476
+ $el.style.maxHeight = `none`;
1477
+ // We don't animate the position of inlined elements
1451
1478
  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
1479
  $el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
1461
1480
  }
1462
1481
  this.properties.forEach(prop => {
@@ -1471,14 +1490,15 @@ class AutoLayout {
1471
1490
  const newNode = newState.getNode($el);
1472
1491
  const newNodeProps = newNode.properties;
1473
1492
  this.timeline.call(() => {
1493
+ $el.style.width = `${newNodeProps.width}px`;
1494
+ $el.style.height = `${newNodeProps.height}px`;
1495
+ // Overrides user defined min and max to prevents width and height clamping
1496
+ $el.style.minWidth = `auto`;
1497
+ $el.style.minHeight = `auto`;
1498
+ $el.style.maxWidth = `none`;
1499
+ $el.style.maxHeight = `none`;
1500
+ // Don't set translate for inlined elements (to avoid text reflow)
1474
1501
  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
1502
  $el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
1483
1503
  }
1484
1504
  this.properties.forEach(prop => {
@@ -1511,19 +1531,27 @@ class AutoLayout {
1511
1531
  const transformedLength = transformed.length;
1512
1532
 
1513
1533
  if (transformedLength) {
1514
- // We only need to set the transform property here since translate is alread defined in the targets loop
1534
+ // We only need to set the transform property here since translate is already defined in the targets loop
1515
1535
  for (let i = 0; i < transformedLength; i++) {
1516
1536
  const $el = transformed[i];
1517
- $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`,
1537
+ const node = newState.getNode($el);
1538
+ // Don't set translate for inlined elements (to avoid text reflow)
1539
+ if (!node.isInlined) {
1540
+ $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
1541
+ }
1518
1542
  $el.style.transform = oldState.getComputedValue($el, 'transform');
1519
1543
  if (animatedSwap.includes($el)) {
1520
- const node = newState.getNode($el);
1521
1544
  node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
1522
1545
  node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
1523
1546
  }
1524
1547
  }
1525
1548
  this.transformAnimation = waapi.waapi.animate(transformed, {
1526
- translate: (/** @type {HTMLElement} */$el) => `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`,
1549
+ translate: (/** @type {HTMLElement} */$el) => {
1550
+ const node = newState.getNode($el);
1551
+ // Don't animate translate for inlined elements (to avoid text reflow)
1552
+ if (node.isInlined) return '0px 0px';
1553
+ return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
1554
+ },
1527
1555
  transform: (/** @type {HTMLElement} */$el) => {
1528
1556
  const newValue = newState.getComputedValue($el, 'transform');
1529
1557
  if (!animatedSwap.includes($el)) return newValue;
@@ -1532,7 +1560,7 @@ class AutoLayout {
1532
1560
  return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
1533
1561
  },
1534
1562
  autoplay: false,
1535
- persist: true,
1563
+ // persist: true,
1536
1564
  ...timingParams,
1537
1565
  });
1538
1566
  this.timeline.sync(this.transformAnimation, 0);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - layout - ESM
3
- * @version v4.3.4
3
+ * @version v4.3.6
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */
@@ -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,
@@ -1073,6 +1079,12 @@ class AutoLayout {
1073
1079
  }
1074
1080
  }
1075
1081
  tlParams.onComplete = () => {
1082
+ const ap = /** @type {ScrollObserver} */(params.autoplay);
1083
+ const isScrollControled = ap && ap.linked;
1084
+ if (isScrollControled) {
1085
+ if (onComplete) onComplete(this.timeline);
1086
+ return;
1087
+ }
1076
1088
  // Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
1077
1089
  if (this.transformAnimation) this.transformAnimation.cancel();
1078
1090
  newState.forEachRootNode(node => {
@@ -1094,6 +1106,13 @@ class AutoLayout {
1094
1106
  });
1095
1107
  };
1096
1108
  tlParams.onPause = () => {
1109
+ const ap = /** @type {ScrollObserver} */(params.autoplay);
1110
+ const isScrollControled = ap && ap.linked;
1111
+ if (isScrollControled) {
1112
+ if (onComplete) onComplete(this.timeline);
1113
+ if (onPause) onPause(this.timeline);
1114
+ return;
1115
+ }
1097
1116
  if (!this.root.classList.contains('is-animated')) return;
1098
1117
  if (this.transformAnimation) this.transformAnimation.cancel();
1099
1118
  newState.forEachRootNode(restoreNodeVisualState);
@@ -1307,7 +1326,7 @@ class AutoLayout {
1307
1326
  // const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
1308
1327
 
1309
1328
  if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
1310
- if (!node.isInlined && (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none')) {
1329
+ if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
1311
1330
  node.hasTransform = true;
1312
1331
  transformed.push($el);
1313
1332
  }
@@ -1323,7 +1342,7 @@ class AutoLayout {
1323
1342
  if (!node.isTarget) {
1324
1343
  swapping.push($el);
1325
1344
  if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
1326
- if (!node.isInlined && swapAtProps.transform) {
1345
+ if (swapAtProps.transform) {
1327
1346
  node.hasTransform = true;
1328
1347
  transformed.push($el);
1329
1348
  }
@@ -1363,7 +1382,7 @@ class AutoLayout {
1363
1382
 
1364
1383
  // muteNodeTransition(newNode);
1365
1384
 
1366
- // Don't animate dimensions and positions of inlined elements
1385
+ // Don't animate positions of inlined elements (to avoid text reflow)
1367
1386
  if (!newNode.isInlined) {
1368
1387
  // Display grid can mess with the absolute positioning, so set it to block during transition
1369
1388
  if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
@@ -1382,14 +1401,15 @@ class AutoLayout {
1382
1401
  $el.style.left = '0px';
1383
1402
  $el.style.top = '0px';
1384
1403
  }
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
1404
  }
1405
+ // Animate dimensions for all elements (including inlined)
1406
+ $el.style.width = `${oldNodeState.width}px`;
1407
+ $el.style.height = `${oldNodeState.height}px`;
1408
+ // Overrides user defined min and max to prevents width and height clamping
1409
+ $el.style.minWidth = `auto`;
1410
+ $el.style.minHeight = `auto`;
1411
+ $el.style.maxWidth = `none`;
1412
+ $el.style.maxHeight = `none`;
1393
1413
  }
1394
1414
 
1395
1415
  // Restore the scroll position if the oldState differs from the current state
@@ -1410,21 +1430,19 @@ class AutoLayout {
1410
1430
  const animatedProps = {
1411
1431
  composition: 'none',
1412
1432
  };
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
- }
1433
+ if (oldNodeState.width !== newNodeState.width) {
1434
+ animatedProps.width = [oldNodeState.width, newNodeState.width];
1435
+ nodeHasChanged = true;
1436
+ }
1437
+ if (oldNodeState.height !== newNodeState.height) {
1438
+ animatedProps.height = [oldNodeState.height, newNodeState.height];
1439
+ nodeHasChanged = true;
1440
+ }
1441
+ // If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
1442
+ // And we don't animate the position of inlined elements
1443
+ if (!newNode.hasTransform && !newNode.isInlined) {
1444
+ animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
1445
+ nodeHasChanged = true;
1428
1446
  }
1429
1447
  this.properties.forEach(prop => {
1430
1448
  const oldVal = oldNodeState[prop];
@@ -1446,15 +1464,16 @@ class AutoLayout {
1446
1464
  for (let i = 0, l = swapping.length; i < l; i++) {
1447
1465
  const $el = swapping[i];
1448
1466
  const oldNode = oldState.getNode($el);
1467
+ const oldNodeProps = oldNode.properties;
1468
+ $el.style.width = `${oldNodeProps.width}px`;
1469
+ $el.style.height = `${oldNodeProps.height}px`;
1470
+ // Overrides user defined min and max to prevents width and height clamping
1471
+ $el.style.minWidth = `auto`;
1472
+ $el.style.minHeight = `auto`;
1473
+ $el.style.maxWidth = `none`;
1474
+ $el.style.maxHeight = `none`;
1475
+ // We don't animate the position of inlined elements
1449
1476
  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
1477
  $el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
1459
1478
  }
1460
1479
  this.properties.forEach(prop => {
@@ -1469,14 +1488,15 @@ class AutoLayout {
1469
1488
  const newNode = newState.getNode($el);
1470
1489
  const newNodeProps = newNode.properties;
1471
1490
  this.timeline.call(() => {
1491
+ $el.style.width = `${newNodeProps.width}px`;
1492
+ $el.style.height = `${newNodeProps.height}px`;
1493
+ // Overrides user defined min and max to prevents width and height clamping
1494
+ $el.style.minWidth = `auto`;
1495
+ $el.style.minHeight = `auto`;
1496
+ $el.style.maxWidth = `none`;
1497
+ $el.style.maxHeight = `none`;
1498
+ // Don't set translate for inlined elements (to avoid text reflow)
1472
1499
  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
1500
  $el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
1481
1501
  }
1482
1502
  this.properties.forEach(prop => {
@@ -1509,19 +1529,27 @@ class AutoLayout {
1509
1529
  const transformedLength = transformed.length;
1510
1530
 
1511
1531
  if (transformedLength) {
1512
- // We only need to set the transform property here since translate is alread defined in the targets loop
1532
+ // We only need to set the transform property here since translate is already defined in the targets loop
1513
1533
  for (let i = 0; i < transformedLength; i++) {
1514
1534
  const $el = transformed[i];
1515
- $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`,
1535
+ const node = newState.getNode($el);
1536
+ // Don't set translate for inlined elements (to avoid text reflow)
1537
+ if (!node.isInlined) {
1538
+ $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
1539
+ }
1516
1540
  $el.style.transform = oldState.getComputedValue($el, 'transform');
1517
1541
  if (animatedSwap.includes($el)) {
1518
- const node = newState.getNode($el);
1519
1542
  node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
1520
1543
  node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
1521
1544
  }
1522
1545
  }
1523
1546
  this.transformAnimation = waapi.animate(transformed, {
1524
- translate: (/** @type {HTMLElement} */$el) => `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`,
1547
+ translate: (/** @type {HTMLElement} */$el) => {
1548
+ const node = newState.getNode($el);
1549
+ // Don't animate translate for inlined elements (to avoid text reflow)
1550
+ if (node.isInlined) return '0px 0px';
1551
+ return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
1552
+ },
1525
1553
  transform: (/** @type {HTMLElement} */$el) => {
1526
1554
  const newValue = newState.getComputedValue($el, 'transform');
1527
1555
  if (!animatedSwap.includes($el)) return newValue;
@@ -1530,7 +1558,7 @@ class AutoLayout {
1530
1558
  return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
1531
1559
  },
1532
1560
  autoplay: false,
1533
- persist: true,
1561
+ // persist: true,
1534
1562
  ...timingParams,
1535
1563
  });
1536
1564
  this.timeline.sync(this.transformAnimation, 0);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Anime.js - scope - CJS
3
- * @version v4.3.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
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.4
3
+ * @version v4.3.6
4
4
  * @license MIT
5
5
  * @copyright 2026 - Julian Garnier
6
6
  */