animejs 4.3.6 → 4.4.0

package/dist/modules/utils/stagger.js

@@ -1,12 +1,12 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 import { unitsExecRgx, emptyString } from '../core/consts.js';
-import { isUnd, parseNumber, isFnc, abs, floor, sqrt, round, isArr, isNum, isStr, max } from '../core/helpers.js';
+import { isUnd, parseNumber, isFnc, isNum, sqrt, abs, floor, max, round, isArr, isStr } from '../core/helpers.js';
 import { parseEase } from '../easings/eases/parser.js';
 import { parseTimelinePosition } from '../timeline/position.js';
 import { getOriginalAnimatableValue } from '../core/values.js';
@@ -17,6 +17,7 @@ import { shuffle } from './random.js';
  * @import {
  *   StaggerParams,
  *   StaggerFunction,
+ *   JSTarget,
  * } from '../types/index.js'
 */
 
@@ -32,24 +33,28 @@ import { shuffle } from './random.js';
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<Number>}
  */
+
 /**
  * @overload
  * @param {String} val
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<String>}
  */
+
 /**
  * @overload
  * @param {[Number, Number]} val
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<Number>}
  */
+
 /**
  * @overload
  * @param {[String, String]} val
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<String>}
  */
+
 /**
  * @param {Number|String|[Number, Number]|[String, String]} val The staggered value or range
  * @param {StaggerParams} [params] The stagger parameters
@@ -58,6 +63,7 @@ import { shuffle } from './random.js';
 const stagger = (val, params = {}) => {
   let values = [];
   let maxValue = 0;
+  let cachedOffset;
   const from = params.from;
   const reversed = params.reversed;
   const ease = params.ease;
@@ -65,12 +71,14 @@ const stagger = (val, params = {}) => {
   const hasSpring = hasEasing && !isUnd(/** @type {Spring} */(ease).ease);
   const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? parseEase(ease) : null;
   const grid = params.grid;
+  const autoGrid = grid === true;
   const axis = params.axis;
   const customTotal = params.total;
   const fromFirst = isUnd(from) || from === 0 || from === 'first';
   const fromCenter = from === 'center';
   const fromLast = from === 'last';
   const fromRandom = from === 'random';
+  const fromArr = isArr(from);
   const isRange = isArr(val);
   const useProp = params.use;
   const val1 = isRange ? parseNumber(val[0]) : parseNumber(val);
@@ -78,40 +86,129 @@ const stagger = (val, params = {}) => {
   const unitMatch = unitsExecRgx.exec((isRange ? val[1] : val) + emptyString);
   const start = params.start || 0 + (isRange ? val1 : 0);
   let fromIndex = fromFirst ? 0 : isNum(from) ? from : 0;
-  return (target, i, t, tl) => {
+  return (target, i, t, _, tl) => {
     const [ registeredTarget ] = registerTargets(target);
-    const total = isUnd(customTotal) ? t : customTotal;
+    const total = isUnd(customTotal) ? t.length : customTotal;
     const customIndex = !isUnd(useProp) ? isFnc(useProp) ? useProp(registeredTarget, i, total) : getOriginalAnimatableValue(registeredTarget, useProp) : false;
     const staggerIndex = isNum(customIndex) || isStr(customIndex) && isNum(+customIndex) ? +customIndex : i;
     if (fromCenter) fromIndex = (total - 1) / 2;
     if (fromLast) fromIndex = total - 1;
     if (!values.length) {
-      for (let index = 0; index < total; index++) {
-        if (!grid) {
-          values.push(abs(fromIndex - index));
+      if (autoGrid) {
+        let hasPositions = true;
+        let minPosX = Infinity;
+        let minPosY = Infinity;
+        let maxPosX = -Infinity;
+        let maxPosY = -Infinity;
+        const pxArr = [];
+        const pyArr = [];
+        for (let index = 0; index < total; index++) {
+          const el = t[index];
+          let px = 0;
+          let py = 0;
+          let found = false;
+          if (el && isFnc(el.getBoundingClientRect)) {
+            const rect = el.getBoundingClientRect();
+            px = rect.left + rect.width / 2;
+            py = rect.top + rect.height / 2;
+            found = true;
+          } else {
+            const obj = /** @type {JSTarget} */(el);
+            if (obj && isNum(obj.x) && isNum(obj.y)) {
+              px = obj.x;
+              py = obj.y;
+              found = true;
+            }
+          }
+          if (!found) {
+            hasPositions = false;
+            break;
+          }
+          pxArr.push(px);
+          pyArr.push(py);
+          if (px < minPosX) minPosX = px;
+          if (py < minPosY) minPosY = py;
+          if (px > maxPosX) maxPosX = px;
+          if (py > maxPosY) maxPosY = py;
+        }
+        if (hasPositions) {
+          let fX = pxArr[0];
+          let fY = pyArr[0];
+          if (fromArr) {
+            fX = minPosX + from[0] * (maxPosX - minPosX);
+            fY = minPosY + from[1] * (maxPosY - minPosY);
+          } else if (fromCenter) {
+            fX = (minPosX + maxPosX) / 2;
+            fY = (minPosY + maxPosY) / 2;
+          } else if (fromLast) {
+            fX = pxArr[total - 1];
+            fY = pyArr[total - 1];
+          } else if (isNum(from)) {
+            fX = pxArr[from];
+            fY = pyArr[from];
+          }
+          for (let index = 0; index < total; index++) {
+            const distanceX = fX - pxArr[index];
+            const distanceY = fY - pyArr[index];
+            let value = sqrt(distanceX * distanceX + distanceY * distanceY);
+            if (axis === 'x') value = -distanceX;
+            if (axis === 'y') value = -distanceY;
+            values.push(value);
+          }
+          let minDist = Infinity;
+          for (let index = 0, l = values.length; index < l; index++) {
+            const absVal = abs(values[index]);
+            if (absVal > 0 && absVal < minDist) minDist = absVal;
+          }
+          if (minDist > 0 && minDist < Infinity) {
+            for (let index = 0, l = values.length; index < l; index++) {
+              values[index] = values[index] / minDist;
+            }
+          }
         } else {
-          const fromX = !fromCenter ? fromIndex % grid[0] : (grid[0] - 1) / 2;
-          const fromY = !fromCenter ? floor(fromIndex / grid[0]) : (grid[1] - 1) / 2;
-          const toX = index % grid[0];
-          const toY = floor(index / grid[0]);
-          const distanceX = fromX - toX;
-          const distanceY = fromY - toY;
-          let value = sqrt(distanceX * distanceX + distanceY * distanceY);
-          if (axis === 'x') value = -distanceX;
-          if (axis === 'y') value = -distanceY;
-          values.push(value);
+          for (let index = 0; index < total; index++) {
+            values.push(abs(fromIndex - index));
+          }
+        }
+      } else {
+        for (let index = 0; index < total; index++) {
+          if (!grid) {
+            values.push(abs(fromIndex - index));
+          } else {
+            let fromX, fromY;
+            if (fromArr) {
+              fromX = from[0] * (grid[0] - 1);
+              fromY = from[1] * (grid[1] - 1);
+            } else if (fromCenter) {
+              fromX = (grid[0] - 1) / 2;
+              fromY = (grid[1] - 1) / 2;
+            } else {
+              fromX = fromIndex % grid[0];
+              fromY = floor(fromIndex / grid[0]);
+            }
+            const toX = index % grid[0];
+            const toY = floor(index / grid[0]);
+            const distanceX = fromX - toX;
+            const distanceY = fromY - toY;
+            let value = sqrt(distanceX * distanceX + distanceY * distanceY);
+            if (axis === 'x') value = -distanceX;
+            if (axis === 'y') value = -distanceY;
+            values.push(value);
+          }
         }
-        maxValue = max(...values);
       }
+      maxValue = max(...values);
       if (staggerEase) values = values.map(val => staggerEase(val / maxValue) * maxValue);
       if (reversed) values = values.map(val => axis ? (val < 0) ? val * -1 : -val : abs(maxValue - val));
       if (fromRandom) values = shuffle(values);
     }
     const spacing = isRange ? (val2 - val1) / maxValue : val1;
-    const offset = tl ? parseTimelinePosition(tl, isUnd(params.start) ? tl.iterationDuration : start) : /** @type {Number} */(start);
+    if (isUnd(cachedOffset)) {
+      cachedOffset = tl ? parseTimelinePosition(tl, isUnd(params.start) ? tl.iterationDuration : start) : /** @type {Number} */(start);
+    }
     /** @type {String|Number} */
-    let output = offset + ((spacing * round(values[staggerIndex], 2)) || 0);
-    if (params.modifier) output = params.modifier(output);
+    let output = cachedOffset + ((spacing * round(values[staggerIndex], 2)) || 0);
+    if (params.modifier) output = params.modifier(/** @type {Number} */(output));
     if (unitMatch) output = `${output}${unitMatch[2]}`;
     return output;
   }

package/dist/modules/utils/target.cjs

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

package/dist/modules/utils/target.js

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

package/dist/modules/utils/time.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -28,19 +28,20 @@ const sync = (callback = consts.noop) => {
 };
 
 /**
- * @param  {(...args: any[]) => Tickable | ((...args: any[]) => void)} constructor
+ * @param  {(...args: any[]) => Tickable | ((...args: any[]) => void) | void} constructor
  * @return {(...args: any[]) => Tickable | ((...args: any[]) => void)}
  */
 const keepTime = constructor => {
   /** @type {Tickable} */
   let tracked;
   return (...args) => {
-    let currentIteration, currentIterationProgress, reversed, alternate;
+    let currentIteration, currentIterationProgress, reversed, alternate, startTime;
     if (tracked) {
       currentIteration = tracked.currentIteration;
       currentIterationProgress = tracked.iterationProgress;
       reversed = tracked.reversed;
       alternate = tracked._alternate;
+      startTime = tracked._startTime;
       tracked.revert();
     }
     const cleanup = constructor(...args);
@@ -48,6 +49,7 @@ const keepTime = constructor => {
     if (!helpers.isUnd(currentIterationProgress)) {
       /** @type {Tickable} */(tracked).currentIteration = currentIteration;
       /** @type {Tickable} */(tracked).iterationProgress = (alternate ? !(currentIteration % 2) ? reversed : !reversed : reversed) ? 1 - currentIterationProgress : currentIterationProgress;
+      /** @type {Tickable} */(tracked)._startTime = startTime;
     }
     return cleanup || consts.noop;
   }

package/dist/modules/utils/time.d.ts

@@ -1,5 +1,5 @@
 export function sync(callback?: Callback<Timer>): Timer;
-export function keepTime(constructor: (...args: any[]) => Tickable | ((...args: any[]) => void)): (...args: any[]) => Tickable | ((...args: any[]) => void);
+export function keepTime(constructor: (...args: any[]) => Tickable | ((...args: any[]) => void) | void): (...args: any[]) => Tickable | ((...args: any[]) => void);
 import { Timer } from '../timer/timer.js';
 import type { Callback } from '../types/index.js';
 import type { Tickable } from '../types/index.js';

package/dist/modules/utils/time.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -26,19 +26,20 @@ const sync = (callback = noop) => {
 };
 
 /**
- * @param  {(...args: any[]) => Tickable | ((...args: any[]) => void)} constructor
+ * @param  {(...args: any[]) => Tickable | ((...args: any[]) => void) | void} constructor
  * @return {(...args: any[]) => Tickable | ((...args: any[]) => void)}
  */
 const keepTime = constructor => {
   /** @type {Tickable} */
   let tracked;
   return (...args) => {
-    let currentIteration, currentIterationProgress, reversed, alternate;
+    let currentIteration, currentIterationProgress, reversed, alternate, startTime;
     if (tracked) {
       currentIteration = tracked.currentIteration;
       currentIterationProgress = tracked.iterationProgress;
       reversed = tracked.reversed;
       alternate = tracked._alternate;
+      startTime = tracked._startTime;
       tracked.revert();
     }
     const cleanup = constructor(...args);
@@ -46,6 +47,7 @@ const keepTime = constructor => {
     if (!isUnd(currentIterationProgress)) {
       /** @type {Tickable} */(tracked).currentIteration = currentIteration;
       /** @type {Tickable} */(tracked).iterationProgress = (alternate ? !(currentIteration % 2) ? reversed : !reversed : reversed) ? 1 - currentIterationProgress : currentIterationProgress;
+      /** @type {Tickable} */(tracked)._startTime = startTime;
     }
     return cleanup || noop;
   }

package/dist/modules/waapi/composition.cjs

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

package/dist/modules/waapi/composition.js

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

package/dist/modules/waapi/index.cjs

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

package/dist/modules/waapi/index.js

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

package/dist/modules/waapi/waapi.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -116,12 +116,12 @@ let transformsPropertiesRegistered = null;
  * @param  {WAAPIKeyframeValue} value
  * @param  {DOMTarget} $el
  * @param  {Number} i
- * @param  {Number} targetsLength
+ * @param  {DOMTargetsArray} parsedTargets
  * @return {String}
  */
-const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
+const normalizeTweenValue = (propName, value, $el, i, parsedTargets) => {
   // Do not try to compute strings with getFunctionValue otherwise it will convert CSS variables
-  let v = helpers.isStr(value) ? value : values.getFunctionValue(/** @type {any} */(value), $el, i, targetsLength);
+  let v = helpers.isStr(value) ? value : values.getFunctionValue(/** @type {any} */(value), $el, i, parsedTargets, null, null);
   if (!helpers.isNum(v)) return v;
   if (commonDefaultPXProperties.includes(propName) || helpers.stringStartsWith(propName, 'translate')) return `${v}px`;
   if (helpers.stringStartsWith(propName, 'rotate') || helpers.stringStartsWith(propName, 'skew')) return `${v}deg`;
@@ -134,18 +134,18 @@ const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
  * @param  {WAAPIKeyframeValue} from
  * @param  {WAAPIKeyframeValue} to
  * @param  {Number} i
- * @param  {Number} targetsLength
+ * @param  {DOMTargetsArray} parsedTargets
  * @return {WAAPITweenValue}
  */
-const parseIndividualTweenValue = ($el, propName, from, to, i, targetsLength) => {
+const parseIndividualTweenValue = ($el, propName, from, to, i, parsedTargets) => {
   /** @type {WAAPITweenValue} */
   let tweenValue = '0';
-  const computedTo = !helpers.isUnd(to) ? normalizeTweenValue(propName, to, $el, i, targetsLength) : getComputedStyle($el)[propName];
+  const computedTo = !helpers.isUnd(to) ? normalizeTweenValue(propName, to, $el, i, parsedTargets) : getComputedStyle($el)[propName];
   if (!helpers.isUnd(from)) {
-    const computedFrom = normalizeTweenValue(propName, from, $el, i, targetsLength);
+    const computedFrom = normalizeTweenValue(propName, from, $el, i, parsedTargets);
     tweenValue = [computedFrom, computedTo];
   } else {
-    tweenValue = helpers.isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, targetsLength)) : computedTo;
+    tweenValue = helpers.isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, parsedTargets)) : computedTo;
   }
   return tweenValue;
 };
@@ -184,9 +184,8 @@ class WAAPIAnimation {
     }
 
     const parsedTargets = targets.registerTargets(targets$1);
-    const targetsLength = parsedTargets.length;
 
-    if (!targetsLength) {
+    if (!parsedTargets.length) {
       console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
     }
 
@@ -242,7 +241,7 @@ class WAAPIAnimation {
 
       const easeToParse = values.setValue(params.ease, globals.globals.defaults.ease);
 
-      const easeFunctionResult = values.getFunctionValue(easeToParse, $el, i, targetsLength);
+      const easeFunctionResult = values.getFunctionValue(easeToParse, $el, i, parsedTargets, null, null);
       const keyEasing = helpers.isFnc(easeFunctionResult) || helpers.isStr(easeFunctionResult) ? easeFunctionResult : easeToParse;
 
       const spring = /** @type {Spring} */(easeToParse).ease && easeToParse;
@@ -250,9 +249,9 @@ class WAAPIAnimation {
       const easing = parseWAAPIEasing(keyEasing);
 
       /** @type {Number} */
-      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : values.getFunctionValue(values.setValue(params.duration, globals.globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : values.getFunctionValue(values.setValue(params.duration, globals.globals.defaults.duration), $el, i, parsedTargets, null, null)) * timeScale;
       /** @type {Number} */
-      const delay = values.getFunctionValue(values.setValue(params.delay, globals.globals.defaults.delay), $el, i, targetsLength) * timeScale;
+      const delay = values.getFunctionValue(values.setValue(params.delay, globals.globals.defaults.delay), $el, i, parsedTargets, null, null) * timeScale;
       /** @type {CompositeOperation} */
       const composite = /** @type {CompositeOperation} */(values.setValue(params.composition, 'replace'));
 
@@ -278,19 +277,19 @@ class WAAPIAnimation {
           const to = /** @type {WAAPITweenOptions} */(tweenOptions).to;
           const from = /** @type {WAAPITweenOptions} */(tweenOptions).from;
           /** @type {Number} */
-          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : values.getFunctionValue(values.setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
+          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : values.getFunctionValue(values.setValue(tweenOptions.duration, duration), $el, i, parsedTargets, null, null)) * timeScale;
           /** @type {Number} */
-          tweenParams.delay = values.getFunctionValue(values.setValue(tweenOptions.delay, delay), $el, i, targetsLength) * timeScale;
+          tweenParams.delay = values.getFunctionValue(values.setValue(tweenOptions.delay, delay), $el, i, parsedTargets, null, null) * timeScale;
           /** @type {CompositeOperation} */
           tweenParams.composite = /** @type {CompositeOperation} */(values.setValue(tweenOptions.composition, composite));
           /** @type {String} */
           tweenParams.easing = parseWAAPIEasing(tweenOptionsEase);
-          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, parsedTargets);
           if (individualTransformProperty) {
             keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
             cachedTransforms[individualTransformProperty] = parsedPropertyValue;
           } else {
-            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, parsedTargets);
           }
           composition.addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
           if (!helpers.isUnd(from)) {
@@ -303,8 +302,8 @@ class WAAPIAnimation {
           }
         } else {
           parsedPropertyValue = helpers.isArr(propertyValue) ?
-                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, targetsLength)) :
-                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, targetsLength);
+                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, parsedTargets)) :
+                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, parsedTargets);
           if (individualTransformProperty) {
             keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
             cachedTransforms[individualTransformProperty] = parsedPropertyValue;

package/dist/modules/waapi/waapi.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -9,7 +9,7 @@ import { isNil, isUnd, stringStartsWith, isKey, isObj, isArr, isStr, toLowerCase
 import { scope, globals } from '../core/globals.js';
 import { registerTargets } from '../core/targets.js';
 import { setValue, getFunctionValue } from '../core/values.js';
-import { isBrowser, validTransforms, noop, transformsSymbol, shortTransforms, transformsFragmentStrings, emptyString, K } from '../core/consts.js';
+import { isBrowser, validTransforms, K, noop, transformsSymbol, shortTransforms, transformsFragmentStrings, emptyString } from '../core/consts.js';
 import { none } from '../easings/none.js';
 import { parseEaseString } from '../easings/eases/parser.js';
 import { addWAAPIAnimation } from './composition.js';
@@ -114,12 +114,12 @@ let transformsPropertiesRegistered = null;
  * @param  {WAAPIKeyframeValue} value
  * @param  {DOMTarget} $el
  * @param  {Number} i
- * @param  {Number} targetsLength
+ * @param  {DOMTargetsArray} parsedTargets
  * @return {String}
  */
-const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
+const normalizeTweenValue = (propName, value, $el, i, parsedTargets) => {
   // Do not try to compute strings with getFunctionValue otherwise it will convert CSS variables
-  let v = isStr(value) ? value : getFunctionValue(/** @type {any} */(value), $el, i, targetsLength);
+  let v = isStr(value) ? value : getFunctionValue(/** @type {any} */(value), $el, i, parsedTargets, null, null);
   if (!isNum(v)) return v;
   if (commonDefaultPXProperties.includes(propName) || stringStartsWith(propName, 'translate')) return `${v}px`;
   if (stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew')) return `${v}deg`;
@@ -132,18 +132,18 @@ const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
  * @param  {WAAPIKeyframeValue} from
  * @param  {WAAPIKeyframeValue} to
  * @param  {Number} i
- * @param  {Number} targetsLength
+ * @param  {DOMTargetsArray} parsedTargets
  * @return {WAAPITweenValue}
  */
-const parseIndividualTweenValue = ($el, propName, from, to, i, targetsLength) => {
+const parseIndividualTweenValue = ($el, propName, from, to, i, parsedTargets) => {
   /** @type {WAAPITweenValue} */
   let tweenValue = '0';
-  const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, targetsLength) : getComputedStyle($el)[propName];
+  const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, parsedTargets) : getComputedStyle($el)[propName];
   if (!isUnd(from)) {
-    const computedFrom = normalizeTweenValue(propName, from, $el, i, targetsLength);
+    const computedFrom = normalizeTweenValue(propName, from, $el, i, parsedTargets);
     tweenValue = [computedFrom, computedTo];
   } else {
-    tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, targetsLength)) : computedTo;
+    tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, parsedTargets)) : computedTo;
   }
   return tweenValue;
 };
@@ -182,9 +182,8 @@ class WAAPIAnimation {
     }
 
     const parsedTargets = registerTargets(targets);
-    const targetsLength = parsedTargets.length;
 
-    if (!targetsLength) {
+    if (!parsedTargets.length) {
       console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
     }
 
@@ -240,7 +239,7 @@ class WAAPIAnimation {
 
       const easeToParse = setValue(params.ease, globals.defaults.ease);
 
-      const easeFunctionResult = getFunctionValue(easeToParse, $el, i, targetsLength);
+      const easeFunctionResult = getFunctionValue(easeToParse, $el, i, parsedTargets, null, null);
       const keyEasing = isFnc(easeFunctionResult) || isStr(easeFunctionResult) ? easeFunctionResult : easeToParse;
 
       const spring = /** @type {Spring} */(easeToParse).ease && easeToParse;
@@ -248,9 +247,9 @@ class WAAPIAnimation {
       const easing = parseWAAPIEasing(keyEasing);
 
       /** @type {Number} */
-      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, parsedTargets, null, null)) * timeScale;
       /** @type {Number} */
-      const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, targetsLength) * timeScale;
+      const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, parsedTargets, null, null) * timeScale;
       /** @type {CompositeOperation} */
       const composite = /** @type {CompositeOperation} */(setValue(params.composition, 'replace'));
 
@@ -276,19 +275,19 @@ class WAAPIAnimation {
           const to = /** @type {WAAPITweenOptions} */(tweenOptions).to;
           const from = /** @type {WAAPITweenOptions} */(tweenOptions).from;
           /** @type {Number} */
-          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : getFunctionValue(setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
+          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : getFunctionValue(setValue(tweenOptions.duration, duration), $el, i, parsedTargets, null, null)) * timeScale;
           /** @type {Number} */
-          tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, targetsLength) * timeScale;
+          tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, parsedTargets, null, null) * timeScale;
           /** @type {CompositeOperation} */
           tweenParams.composite = /** @type {CompositeOperation} */(setValue(tweenOptions.composition, composite));
           /** @type {String} */
           tweenParams.easing = parseWAAPIEasing(tweenOptionsEase);
-          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, parsedTargets);
           if (individualTransformProperty) {
             keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
             cachedTransforms[individualTransformProperty] = parsedPropertyValue;
           } else {
-            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, parsedTargets);
           }
           addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
           if (!isUnd(from)) {
@@ -301,8 +300,8 @@ class WAAPIAnimation {
           }
         } else {
           parsedPropertyValue = isArr(propertyValue) ?
-                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, targetsLength)) :
-                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, targetsLength);
+                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, parsedTargets)) :
+                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, parsedTargets);
           if (individualTransformProperty) {
             keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
             cachedTransforms[individualTransformProperty] = parsedPropertyValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "animejs",
-  "version": "4.3.6",
+  "version": "4.4.0",
   "description": "JavaScript animation engine",
   "homepage": "https://animejs.com",
   "author": "Julian Garnier <julian@animejs.com>",
@@ -187,6 +187,7 @@
     "nodemon": "^3.1.10",
     "rollup": "^4.9.1",
     "three": "^0.160.0",
+    "tweaks": "^0.3.4",
     "typescript": "^5.9.2"
   },
   "scripts": {