animejs 4.3.0-beta.0 → 4.3.0-beta.2

package/dist/bundles/anime.esm.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - ESM bundle
- * @version v4.3.0-beta.0
+ * @version v4.3.0-beta.2
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -801,7 +801,7 @@ const globals = {
 
 const devTools = isBrowser && win.AnimeJSDevTools;
 
-const globalVersions = { version: '4.3.0-beta.0', engine: null };
+const globalVersions = { version: '4.3.0-beta.2', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -7796,8 +7796,8 @@ const waapi = {
 
 /**
  * @typedef {Object} LayoutAnimationParams
- * @property {Number} [duration]
  * @property {Number|FunctionValue} [delay]
+ * @property {Number|FunctionValue} [duration]
  * @property {EasingParam} [ease]
  * @property {LayoutStateParams} [frozen]
  * @property {LayoutStateParams} [added]
@@ -8600,12 +8600,12 @@ class AutoLayout {
     this.children = params.children || '*';
     /** @type {Boolean} */
     this.absoluteCoords = false;
-    /** @type {Number} */
+    /** @type {Number|FunctionValue} */
     this.duration = setValue(params.duration, 500);
     /** @type {Number|FunctionValue} */
     this.delay = setValue(params.delay, 0);
     /** @type {EasingParam} */
-    this.ease = setValue(params.ease, 'inOutExpo');
+    this.ease = setValue(params.ease, 'inOut(3.5)');
     /** @type {Callback<this>} */
     this.onComplete = setValue(params.onComplete, /** @type {Callback<this>} */(noop));
     /** @type {LayoutStateParams} */
@@ -8773,26 +8773,16 @@ class AutoLayout {
 
       // Recalculate postion relative to their parent for elements that have been moved
       if (!oldStateNode.measuredIsRemoved && !isRemovedNow && !hasNoOldState && (parentChanged || elementChanged)) {
-        let offsetX = 0;
-        let offsetY = 0;
-        let current = node.parentNode;
-        while (current) {
-          offsetX += current.properties.x || 0;
-          offsetY += current.properties.y || 0;
-          if (current.parentNode === newState.rootNode) break;
-          current = current.parentNode;
-        }
-        let oldOffsetX = 0;
-        let oldOffsetY = 0;
-        let oldCurrent = oldStateNode.parentNode;
-        while (oldCurrent) {
-          oldOffsetX += oldCurrent.properties.x || 0;
-          oldOffsetY += oldCurrent.properties.y || 0;
-          if (oldCurrent.parentNode === oldState.rootNode) break;
-          oldCurrent = oldCurrent.parentNode;
-        }
-        oldStateNode.properties.x += oldOffsetX - offsetX;
-        oldStateNode.properties.y += oldOffsetY - offsetY;
+        const oldAbsoluteLeft = oldStateNode.properties.left;
+        const oldAbsoluteTop = oldStateNode.properties.top;
+        const newParent = parent || newState.rootNode;
+        const oldParent = newParent.id ? oldState.nodes.get(newParent.id) : null;
+        const parentLeft = oldParent ? oldParent.properties.left : newParent.properties.left;
+        const parentTop = oldParent ? oldParent.properties.top : newParent.properties.top;
+        const borderLeft = oldParent ? oldParent.properties.clientLeft : newParent.properties.clientLeft;
+        const borderTop = oldParent ? oldParent.properties.clientTop : newParent.properties.clientTop;
+        oldStateNode.properties.x = oldAbsoluteLeft - parentLeft - borderLeft;
+        oldStateNode.properties.y = oldAbsoluteTop - parentTop - borderTop;
       }
 
       if (node.hasVisibilitySwap) {
@@ -8942,8 +8932,7 @@ class AutoLayout {
         // Don't animate dimensions and positions of inlined elements
         if (!newNode.isInlined) {
           // Display grid can mess with the absolute positioning, so set it to block during transition
-          // if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.display = 'block';
-          $el.style.display = 'block';
+          if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.display = 'block';
           // All children must be in position absolue
           if ($el !== root || this.absoluteCoords) {
             $el.style.position = this.absoluteCoords ? 'fixed' : 'absolute';