animejs 4.3.6 → 4.4.0

package/dist/modules/layout/layout.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -79,6 +79,7 @@ var globals = require('../core/globals.cjs');
 
 /**
  * @typedef {Object} LayoutSpecificAnimationParams
+ * @property {Number|String} [id]
  * @property {Number|FunctionValue} [delay]
  * @property {Number|FunctionValue} [duration]
  * @property {EasingParam|FunctionValue} [ease]
@@ -121,7 +122,7 @@ var globals = require('../core/globals.cjs');
  * @property {String} id
  * @property {DOMTarget} $el
  * @property {Number} index
- * @property {Number} total
+ * @property {Array<DOMTarget>} targets
  * @property {Number} delay
  * @property {Number} duration
  * @property {EasingParam} ease
@@ -265,7 +266,7 @@ const createNode = ($el, parentNode, state, recycledNode) => {
   node.$measure = $el;
   node.id = dataId;
   node.index = 0;
-  node.total = 1;
+  node.targets = null;
   node.delay = 0;
   node.duration = 0;
   node.ease = null;
@@ -451,12 +452,12 @@ const updateNodeProperties = (node, props) => {
  * @param  {LayoutAnimationTimingsParams} params
  */
 const updateNodeTimingParams = (node, params) => {
-  const easeFunctionResult = values.getFunctionValue(params.ease, node.$el, node.index, node.total);
+  const easeFunctionResult = values.getFunctionValue(params.ease, node.$el, node.index, node.targets, null, null);
   const keyEasing = helpers.isFnc(easeFunctionResult) ? easeFunctionResult : params.ease;
   const hasSpring = !helpers.isUnd(keyEasing) && !helpers.isUnd(/** @type {Spring} */(keyEasing).ease);
   node.ease = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
-  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : values.getFunctionValue(params.duration, node.$el, node.index, node.total);
-  node.delay = values.getFunctionValue(params.delay, node.$el, node.index, node.total);
+  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : values.getFunctionValue(params.duration, node.$el, node.index, node.targets, null, null);
+  node.delay = values.getFunctionValue(params.delay, node.$el, node.index, node.targets, null, null);
 };
 
 /**
@@ -829,10 +830,12 @@ class LayoutSnapshot {
 
     const inRootNodeIds = new Set();
     // Update index and total for inital timing calculation
-    let index = 0, total = this.nodes.size;
+    let index = 0;
+    const allNodeTargets = [];
+    this.nodes.forEach((node) => { allNodeTargets.push(node.$el); });
     this.nodes.forEach((node, id) => {
       node.index = index++;
-      node.total = total;
+      node.targets = allNodeTargets;
       // Track ids of nodes that belong to the current root to filter detached matches
       if (node && node.measuredIsInsideRoot) {
         inRootNodeIds.add(id);
@@ -944,8 +947,8 @@ class AutoLayout {
     this.params = params;
     /** @type {DOMTarget} */
     this.root = /** @type {DOMTarget} */(targets.registerTargets(root)[0]);
-    /** @type {Number} */
-    this.id = layoutId++;
+    /** @type {Number|String} */
+    this.id = params.id || layoutId++;
     /** @type {LayoutChildrenParam} */
     this.children = params.children || '*';
     /** @type {Boolean} */
@@ -1068,7 +1071,9 @@ class AutoLayout {
       duration: values.setValue(params.duration, this.params.duration),
     };
     /** @type {TimelineParams} */
-    const tlParams = {};
+    const tlParams = {
+      id: this.id
+    };
     const onComplete = values.setValue(params.onComplete, this.params.onComplete);
     const onPause = values.setValue(params.onPause, this.params.onPause);
     for (let name in globals.defaults) {
@@ -1082,7 +1087,8 @@ class AutoLayout {
     }
     tlParams.onComplete = () => {
       const ap = /** @type {ScrollObserver} */(params.autoplay);
-      const isScrollControled = ap && ap.linked;
+      const ed = globals.globals.editor;
+      const isScrollControled = (ap && ap.linked) || (ed && ed.showPanel);
       if (isScrollControled) {
         if (onComplete) onComplete(this.timeline);
         return;
@@ -1281,41 +1287,39 @@ class AutoLayout {
         animatedParent = animatedParent.parentNode;
       }
 
-      const animatingTotal = animating.length;
-
       // Root is always animated first in sync with the first child (animating.length is the total of children)
       if (node === rootNode) {
         node.index = 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else if (node.isEntering) {
         node.index = animatedParent ? animatedParent.index : enteringIndex;
-        node.total = animatedParent ? animatingTotal : entering.length;
+        node.targets = animatedParent ? animating : entering;
         updateNodeTimingParams(node, enterFromTimings);
         enteringIndex++;
       } else if (node.isLeaving) {
         node.index = animatedParent ? animatedParent.index : leavingIndex;
-        node.total = animatedParent ? animatingTotal : leaving.length;
+        node.targets = animatedParent ? animating : leaving;
         leavingIndex++;
         updateNodeTimingParams(node, leaveToTimings);
       } else if (node.isTarget) {
         node.index = animatingIndex++;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else {
         node.index = animatedParent ? animatedParent.index : 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, swapAtTimings);
       }
 
       // Make sure the old state node has its inex and total values up to date for valid "from" function values calculation
       oldStateNode.index = node.index;
-      oldStateNode.total = node.total;
+      oldStateNode.targets = node.targets;
 
       // Computes all values up front so we can check for changes and we don't have to re-compute them inside the animation props
       for (let prop in nodeProperties) {
-        nodeProperties[prop] = values.getFunctionValue(nodeProperties[prop], $el, node.index, node.total);
-        oldStateNodeProperties[prop] = values.getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.total);
+        nodeProperties[prop] = values.getFunctionValue(nodeProperties[prop], $el, node.index, node.targets, null, null);
+        oldStateNodeProperties[prop] = values.getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.targets, null, null);
       }
 
       // Use a 1px tolerance to detect dimensions changes to prevent width / height animations on barelly visible elements
@@ -1541,8 +1545,8 @@ class AutoLayout {
         }
         $el.style.transform = oldState.getComputedValue($el, 'transform');
         if (animatedSwap.includes($el)) {
-          node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
-          node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
+          node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.targets, null, null);
+          node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.targets, null, null);
         }
       }
       this.transformAnimation = waapi.waapi.animate(transformed, {
@@ -1557,7 +1561,7 @@ class AutoLayout {
           if (!animatedSwap.includes($el)) return newValue;
           const oldValue = oldState.getComputedValue($el, 'transform');
           const node = newState.getNode($el);
-          return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
+          return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.targets, null, null), newValue]
         },
         autoplay: false,
         // persist: true,

package/dist/modules/layout/layout.d.ts

@@ -8,8 +8,8 @@ export class AutoLayout {
     params: AutoLayoutParams;
     /** @type {DOMTarget} */
     root: DOMTarget;
-    /** @type {Number} */
-    id: number;
+    /** @type {Number|String} */
+    id: number | string;
     /** @type {LayoutChildrenParam} */
     children: LayoutChildrenParam;
     /** @type {Boolean} */
@@ -74,6 +74,7 @@ export type LayoutAnimationTimingsParams = {
 export type LayoutStateAnimationProperties = Record<string, number | string | FunctionValue>;
 export type LayoutStateParams = LayoutStateAnimationProperties & LayoutAnimationTimingsParams;
 export type LayoutSpecificAnimationParams = {
+    id?: number | string;
     delay?: number | FunctionValue;
     duration?: number | FunctionValue;
     ease?: EasingParam | FunctionValue;
@@ -103,7 +104,7 @@ export type LayoutNode = {
     id: string;
     $el: DOMTarget;
     index: number;
-    total: number;
+    targets: Array<DOMTarget>;
     delay: number;
     duration: number;
     ease: EasingParam;

package/dist/modules/layout/layout.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -11,7 +11,7 @@ import { parseEase } from '../easings/eases/parser.js';
 import { setValue, getFunctionValue } from '../core/values.js';
 import { createTimeline } from '../timeline/timeline.js';
 import { waapi } from '../waapi/waapi.js';
-import { scope, defaults } from '../core/globals.js';
+import { scope, defaults, globals } from '../core/globals.js';
 
 /**
  * @import {
@@ -77,6 +77,7 @@ import { scope, defaults } from '../core/globals.js';
 
 /**
  * @typedef {Object} LayoutSpecificAnimationParams
+ * @property {Number|String} [id]
  * @property {Number|FunctionValue} [delay]
  * @property {Number|FunctionValue} [duration]
  * @property {EasingParam|FunctionValue} [ease]
@@ -119,7 +120,7 @@ import { scope, defaults } from '../core/globals.js';
  * @property {String} id
  * @property {DOMTarget} $el
  * @property {Number} index
- * @property {Number} total
+ * @property {Array<DOMTarget>} targets
  * @property {Number} delay
  * @property {Number} duration
  * @property {EasingParam} ease
@@ -263,7 +264,7 @@ const createNode = ($el, parentNode, state, recycledNode) => {
   node.$measure = $el;
   node.id = dataId;
   node.index = 0;
-  node.total = 1;
+  node.targets = null;
   node.delay = 0;
   node.duration = 0;
   node.ease = null;
@@ -449,12 +450,12 @@ const updateNodeProperties = (node, props) => {
  * @param  {LayoutAnimationTimingsParams} params
  */
 const updateNodeTimingParams = (node, params) => {
-  const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.total);
+  const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.targets, null, null);
   const keyEasing = isFnc(easeFunctionResult) ? easeFunctionResult : params.ease;
   const hasSpring = !isUnd(keyEasing) && !isUnd(/** @type {Spring} */(keyEasing).ease);
   node.ease = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
-  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.total);
-  node.delay = getFunctionValue(params.delay, node.$el, node.index, node.total);
+  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.targets, null, null);
+  node.delay = getFunctionValue(params.delay, node.$el, node.index, node.targets, null, null);
 };
 
 /**
@@ -827,10 +828,12 @@ class LayoutSnapshot {
 
     const inRootNodeIds = new Set();
     // Update index and total for inital timing calculation
-    let index = 0, total = this.nodes.size;
+    let index = 0;
+    const allNodeTargets = [];
+    this.nodes.forEach((node) => { allNodeTargets.push(node.$el); });
     this.nodes.forEach((node, id) => {
       node.index = index++;
-      node.total = total;
+      node.targets = allNodeTargets;
       // Track ids of nodes that belong to the current root to filter detached matches
       if (node && node.measuredIsInsideRoot) {
         inRootNodeIds.add(id);
@@ -942,8 +945,8 @@ class AutoLayout {
     this.params = params;
     /** @type {DOMTarget} */
     this.root = /** @type {DOMTarget} */(registerTargets(root)[0]);
-    /** @type {Number} */
-    this.id = layoutId++;
+    /** @type {Number|String} */
+    this.id = params.id || layoutId++;
     /** @type {LayoutChildrenParam} */
     this.children = params.children || '*';
     /** @type {Boolean} */
@@ -1066,7 +1069,9 @@ class AutoLayout {
       duration: setValue(params.duration, this.params.duration),
     };
     /** @type {TimelineParams} */
-    const tlParams = {};
+    const tlParams = {
+      id: this.id
+    };
     const onComplete = setValue(params.onComplete, this.params.onComplete);
     const onPause = setValue(params.onPause, this.params.onPause);
     for (let name in defaults) {
@@ -1080,7 +1085,8 @@ class AutoLayout {
     }
     tlParams.onComplete = () => {
       const ap = /** @type {ScrollObserver} */(params.autoplay);
-      const isScrollControled = ap && ap.linked;
+      const ed = globals.editor;
+      const isScrollControled = (ap && ap.linked) || (ed && ed.showPanel);
       if (isScrollControled) {
         if (onComplete) onComplete(this.timeline);
         return;
@@ -1279,41 +1285,39 @@ class AutoLayout {
         animatedParent = animatedParent.parentNode;
       }
 
-      const animatingTotal = animating.length;
-
       // Root is always animated first in sync with the first child (animating.length is the total of children)
       if (node === rootNode) {
         node.index = 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else if (node.isEntering) {
         node.index = animatedParent ? animatedParent.index : enteringIndex;
-        node.total = animatedParent ? animatingTotal : entering.length;
+        node.targets = animatedParent ? animating : entering;
         updateNodeTimingParams(node, enterFromTimings);
         enteringIndex++;
       } else if (node.isLeaving) {
         node.index = animatedParent ? animatedParent.index : leavingIndex;
-        node.total = animatedParent ? animatingTotal : leaving.length;
+        node.targets = animatedParent ? animating : leaving;
         leavingIndex++;
         updateNodeTimingParams(node, leaveToTimings);
       } else if (node.isTarget) {
         node.index = animatingIndex++;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else {
         node.index = animatedParent ? animatedParent.index : 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, swapAtTimings);
       }
 
       // Make sure the old state node has its inex and total values up to date for valid "from" function values calculation
       oldStateNode.index = node.index;
-      oldStateNode.total = node.total;
+      oldStateNode.targets = node.targets;
 
       // Computes all values up front so we can check for changes and we don't have to re-compute them inside the animation props
       for (let prop in nodeProperties) {
-        nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.total);
-        oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.total);
+        nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.targets, null, null);
+        oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.targets, null, null);
       }
 
       // Use a 1px tolerance to detect dimensions changes to prevent width / height animations on barelly visible elements
@@ -1539,8 +1543,8 @@ class AutoLayout {
         }
         $el.style.transform = oldState.getComputedValue($el, 'transform');
         if (animatedSwap.includes($el)) {
-          node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
-          node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
+          node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.targets, null, null);
+          node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.targets, null, null);
         }
       }
       this.transformAnimation = waapi.animate(transformed, {
@@ -1555,7 +1559,7 @@ class AutoLayout {
           if (!animatedSwap.includes($el)) return newValue;
           const oldValue = oldState.getComputedValue($el, 'transform');
           const node = newState.getNode($el);
-          return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
+          return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.targets, null, null), newValue]
         },
         autoplay: false,
         // persist: true,

package/dist/modules/scope/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/scope/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/scope/scope.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/scope/scope.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/drawable.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/drawable.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/helpers.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/helpers.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/morphto.cjs

@@ -1,13 +1,12 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 'use strict';
 
-var consts = require('../core/consts.cjs');
 var helpers$1 = require('../core/helpers.cjs');
 var helpers = require('./helpers.cjs');
 
@@ -23,7 +22,7 @@ var helpers = require('./helpers.cjs');
  * @param  {Number} [precision]
  * @return {FunctionValue}
  */
-const morphTo = (path2, precision = .33) => ($path1) => {
+const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
   const tagName1 = ($path1.tagName || '').toLowerCase();
   if (!tagName1.match(/^(path|polygon|polyline)$/)) {
     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) => {
   }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
-  const previousPoints = $path1[consts.morphPointsSymbol];
+  const previousPoints = prevTween ? prevTween._value : null;
   if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
 
   let v1 = '', v2 = '';
@@ -60,8 +59,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
     }
   }
 
-  $path1[consts.morphPointsSymbol] = v2;
-
   return [v1, v2];
 };
 

package/dist/modules/svg/morphto.js

@@ -1,11 +1,10 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { morphPointsSymbol } from '../core/consts.js';
 import { round } from '../core/helpers.js';
 import { getPath } from './helpers.js';
 
@@ -21,7 +20,7 @@ import { getPath } from './helpers.js';
  * @param  {Number} [precision]
  * @return {FunctionValue}
  */
-const morphTo = (path2, precision = .33) => ($path1) => {
+const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
   const tagName1 = ($path1.tagName || '').toLowerCase();
   if (!tagName1.match(/^(path|polygon|polyline)$/)) {
     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) => {
   }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
-  const previousPoints = $path1[morphPointsSymbol];
+  const previousPoints = prevTween ? prevTween._value : null;
   if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
 
   let v1 = '', v2 = '';
@@ -58,8 +57,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
     }
   }
 
-  $path1[morphPointsSymbol] = v2;
-
   return [v1, v2];
 };
 

package/dist/modules/svg/motionpath.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/motionpath.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/text/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - text - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -8,9 +8,11 @@
 'use strict';
 
 var split = require('./split.cjs');
+var scramble = require('./scramble.cjs');
 
 
 
 exports.TextSplitter = split.TextSplitter;
 exports.split = split.split;
 exports.splitText = split.splitText;
+exports.scrambleText = scramble.scrambleText;

package/dist/modules/text/index.d.ts

@@ -1 +1,2 @@
 export * from "./split.js";
+export * from "./scramble.js";

package/dist/modules/text/index.js

@@ -1,8 +1,9 @@
 /**
  * Anime.js - text - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 export { TextSplitter, split, splitText } from './split.js';
+export { scrambleText } from './scramble.js';