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

package/dist/bundles/anime.umd.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - UMD bundle
- * @version v4.3.0-beta.0
+ * @version v4.3.0-beta.2
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -807,7 +807,7 @@
 
   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 = [];
@@ -7802,8 +7802,8 @@
 
   /**
    * @typedef {Object} LayoutAnimationParams
-   * @property {Number} [duration]
    * @property {Number|FunctionValue} [delay]
+   * @property {Number|FunctionValue} [duration]
    * @property {EasingParam} [ease]
    * @property {LayoutStateParams} [frozen]
    * @property {LayoutStateParams} [added]
@@ -8606,12 +8606,12 @@
       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} */
@@ -8779,26 +8779,16 @@
 
         // 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) {
@@ -8948,8 +8938,7 @@
           // 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';