animejs 4.4.1 → 4.5.0

package/dist/modules/core/values.js

@@ -1,13 +1,14 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { tweenTypes, isDomSymbol, isSvgSymbol, validTransforms, shortTransforms, valueTypes, unitsExecRgx, digitWithExponentRgx, compositionTypes, proxyTargetSymbol, cssVarPrefix, cssVariableMatchRgx, emptyString } from './consts.js';
-import { isUnd, isValidSVGAttribute, stringStartsWith, isCol, isFnc, isStr, round, lerp, clamp, cloneArray } from './helpers.js';
+import { valueTypes, unitsExecRgx, digitWithExponentRgx, tweenTypes, isDomSymbol, isSvgSymbol, validTransforms, shortTransforms, proxyTargetSymbol, cssVariableMatchRgx, emptyString, cssVarPrefix } from './consts.js';
+import { isUnd, isCol, isValidSVGAttribute, stringStartsWith, isFnc, isStr, round, lerp, cloneArray } from './helpers.js';
 import { parseInlineTransforms } from './transforms.js';
+import { resolveAdapterEntry } from '../adapters/registry.js';
 import { convertColorStringValuesToRgbaArray } from './colors.js';
 
 /**
@@ -31,6 +32,21 @@ const setValue = (targetValue, defaultValue) => {
   return isUnd(targetValue) ? defaultValue : targetValue;
 };
 
+/**
+ * Resolve against the target when it's a DOM element, otherwise fall back to :root so non-DOM targets like three.js meshes and custom adapters still pick up CSS variables defined on the document.
+ *
+ * @param  {String} value
+ * @param  {Target} target
+ * @return {String|Number}
+ */
+const resolveCssVar = (value, target) => {
+  const match = value.match(cssVariableMatchRgx);
+  const el = target[isDomSymbol] ? target : document.documentElement;
+  let computed = getComputedStyle(/** @type {HTMLElement} */(el))?.getPropertyValue(match[1]);
+  if ((!computed || computed.trim() === emptyString) && match[2]) computed = match[2].trim();
+  return computed || 0;
+};
+
 /**
  * @param  {TweenPropValue} value
  * @param  {Target} target
@@ -41,30 +57,26 @@ const setValue = (targetValue, defaultValue) => {
  * @return {any}
  */
 const getFunctionValue = (value, target, index, targets, store, prevTween) => {
-  let func;
   if (isFnc(value)) {
-    func = () => {
+    if (!store) {
+      const computed = /** @type {Function} */(value)(target, index, targets, prevTween);
+      // Fallback to 0 if the function returns undefined, NaN, null, false or 0
+      return !isNaN(+computed) ? +computed : computed || 0;
+    }
+    const func = () => {
       const computed = /** @type {Function} */(value)(target, index, targets, prevTween);
-      // Fallback to 0 if the function returns undefined / NaN / null / false / 0
       return !isNaN(+computed) ? +computed : computed || 0;
     };
-  } else if (isStr(value) && stringStartsWith(value, cssVarPrefix)) {
-    func = () => {
-      const match = value.match(cssVariableMatchRgx);
-      const cssVarName = match[1];
-      const fallbackValue = match[2];
-      let computed = getComputedStyle(/** @type {HTMLElement} */(target))?.getPropertyValue(cssVarName);
-      // Use fallback if CSS variable is not set or empty
-      if ((!computed || computed.trim() === emptyString) && fallbackValue) {
-        computed = fallbackValue.trim();
-      }
-      return computed || 0;
-    };
-  } else {
-    return value;
+    store.func = func;
+    return func();
   }
-  if (store) store.func = func;
-  return func();
+  if (isStr(value) && stringStartsWith(value, cssVarPrefix)) {
+    if (!store) return resolveCssVar(/** @type {String} */(value), target);
+    const func = () => resolveCssVar(/** @type {String} */(value), target);
+    store.func = func;
+    return func();
+  }
+  return value;
 };
 
 /**
@@ -111,6 +123,12 @@ const getCSSValue = (target, propName, animationInlineStyles) => {
  */
 const getOriginalAnimatableValue = (target, propName, tweenType, animationInlineStyles) => {
   const type = !isUnd(tweenType) ? tweenType : getTweenType(target, propName);
+  const adapterProp = resolveAdapterEntry(target, propName);
+  if (adapterProp) {
+    const value = adapterProp.get(target);
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value == null ? 0 : value;
+  }
   if (type === tweenTypes.OBJECT) {
     const value = target[propName];
     if (value && animationInlineStyles) animationInlineStyles[propName] = value;
@@ -152,7 +170,7 @@ const createDecomposedValueTargetObject = () => {
 };
 
 /**
- * @param  {String|Number} rawValue
+ * @param  {String|Number|Object} rawValue
  * @param  {TweenDecomposedValue} targetObject
  * @return {TweenDecomposedValue}
  */
@@ -170,39 +188,38 @@ const decomposeRawValue = (rawValue, targetObject) => {
     // It's a number
     targetObject.n = num;
     return targetObject;
+  }
+  // let str = /** @type {String} */(rawValue).trim();
+  let str = /** @type {String} */(rawValue);
+  // Parsing operators (+=, -=, *=) manually is much faster than using regex here
+  if (str[1] === '=') {
+    targetObject.o = str[0];
+    str = str.slice(2);
+  }
+  // Skip exec regex if the value type is complex or color to avoid long regex backtracking
+  const unitMatch = str.includes(' ') ? false : unitsExecRgx.exec(str);
+  if (unitMatch) {
+    // Has a number and a unit
+    targetObject.t = valueTypes.UNIT;
+    targetObject.n = +unitMatch[1];
+    targetObject.u = unitMatch[2];
+    return targetObject;
+  } else if (targetObject.o) {
+    // Has an operator (+=, -=, *=)
+    targetObject.n = +str;
+    return targetObject;
+  } else if (isCol(str)) {
+    // Color string
+    targetObject.t = valueTypes.COLOR;
+    targetObject.d = convertColorStringValuesToRgbaArray(str);
+    return targetObject;
   } else {
-    // let str = /** @type {String} */(rawValue).trim();
-    let str = /** @type {String} */(rawValue);
-    // Parsing operators (+=, -=, *=) manually is much faster than using regex here
-    if (str[1] === '=') {
-      targetObject.o = str[0];
-      str = str.slice(2);
-    }
-    // Skip exec regex if the value type is complex or color to avoid long regex backtracking
-    const unitMatch = str.includes(' ') ? false : unitsExecRgx.exec(str);
-    if (unitMatch) {
-      // Has a number and a unit
-      targetObject.t = valueTypes.UNIT;
-      targetObject.n = +unitMatch[1];
-      targetObject.u = unitMatch[2];
-      return targetObject;
-    } else if (targetObject.o) {
-      // Has an operator (+=, -=, *=)
-      targetObject.n = +str;
-      return targetObject;
-    } else if (isCol(str)) {
-      // Is a color
-      targetObject.t = valueTypes.COLOR;
-      targetObject.d = convertColorStringValuesToRgbaArray(str);
-      return targetObject;
-    } else {
-      // Is a more complex string (generally svg coords, calc() or filters CSS values)
-      const matchedNumbers = str.match(digitWithExponentRgx);
-      targetObject.t = valueTypes.COMPLEX;
-      targetObject.d = matchedNumbers ? matchedNumbers.map(Number) : [];
-      targetObject.s = str.split(digitWithExponentRgx) || [];
-      return targetObject;
-    }
+    // Is a more complex string (generally svg coords, calc() or filters CSS values)
+    const matchedNumbers = str.match(digitWithExponentRgx);
+    targetObject.t = valueTypes.COMPLEX;
+    targetObject.d = matchedNumbers ? matchedNumbers.map(Number) : [];
+    targetObject.s = str.split(digitWithExponentRgx) || [];
+    return targetObject;
   }
 };
 
@@ -223,30 +240,6 @@ const decomposeTweenValue = (tween, targetObject) => {
 
 const decomposedOriginalValue = createDecomposedValueTargetObject();
 
-/**
- * @param  {Tween} tween
- * @param  {Number} progress
- * @param  {Number} precision
- * @return {String}
- */
-const composeColorValue = (tween, progress, precision) => {
-  const mod = tween._modifier;
-  const fn = tween._fromNumbers;
-  const tn = tween._toNumbers;
-  const r = round(clamp(/** @type {Number} */(mod(lerp(fn[0], tn[0], progress))), 0, 255), 0);
-  const g = round(clamp(/** @type {Number} */(mod(lerp(fn[1], tn[1], progress))), 0, 255), 0);
-  const b = round(clamp(/** @type {Number} */(mod(lerp(fn[2], tn[2], progress))), 0, 255), 0);
-  const a = clamp(/** @type {Number} */(mod(round(lerp(fn[3], tn[3], progress), precision))), 0, 1);
-  if (tween._composition !== compositionTypes.none) {
-    const ns = tween._numbers;
-    ns[0] = r;
-    ns[1] = g;
-    ns[2] = b;
-    ns[3] = a;
-  }
-  return `rgba(${r},${g},${b},${a})`;
-};
-
 /**
  * @param  {Tween} tween
  * @param  {Number} progress
@@ -258,17 +251,16 @@ const composeComplexValue = (tween, progress, precision) => {
   const fn = tween._fromNumbers;
   const tn = tween._toNumbers;
   const ts = tween._strings;
-  const hasComposition = tween._composition !== compositionTypes.none;
   let v = ts[0];
   for (let j = 0, l = tn.length; j < l; j++) {
     const n = /** @type {Number} */(mod(round(lerp(fn[j], tn[j], progress), precision)));
     const s = ts[j + 1];
     v += `${s ? n + s : n}`;
-    if (hasComposition) {
-      tween._numbers[j] = n;
-    }
+    // Keep _numbers fresh for every tween, not only composed ones, so a non-composition setter that reads the lerped triplet such as three transformOrigin still animates.
+    // Potential optimization, skip the write when nothing reads it: if (hasComposition || tween._setter) tween._numbers[j] = n;
+    tween._numbers[j] = n;
   }
   return v;
 };
 
-export { composeColorValue, composeComplexValue, createDecomposedValueTargetObject, decomposeRawValue, decomposeTweenValue, decomposedOriginalValue, getFunctionValue, getOriginalAnimatableValue, getRelativeValue, getTweenType, setValue };
+export { composeComplexValue, createDecomposedValueTargetObject, decomposeRawValue, decomposeTweenValue, decomposedOriginalValue, getFunctionValue, getOriginalAnimatableValue, getRelativeValue, getTweenType, setValue };

package/dist/modules/draggable/draggable.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/draggable/draggable.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/draggable/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/draggable/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/cubic-bezier/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/cubic-bezier/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/eases/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/eases/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/eases/parser.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -81,8 +81,8 @@ const easeInFunctions = {
 
 /**
  * @typedef  {Object} EasesFunctions
- * @property {typeof none} linear
- * @property {typeof none} none
+ * @property {EasingFunction} linear
+ * @property {EasingFunction} none
  * @property {PowerEasing} in
  * @property {PowerEasing} out
  * @property {PowerEasing} inOut

package/dist/modules/easings/eases/parser.d.ts

@@ -18,8 +18,8 @@ export const easeInPower: PowerEasing;
 /** @type {Record<String, EaseType>} */
 export const easeTypes: Record<string, EaseType>;
 export namespace eases {
-    export let linear: typeof import("../none.js").none;
-    export let none: typeof import("../none.js").none;
+    export let linear: EasingFunction;
+    export let none: EasingFunction;
     let _in: PowerEasing;
     export { _in as in };
     export let out: PowerEasing;
@@ -70,8 +70,8 @@ export function parseEaseString(string: string): EasingFunction;
 export function parseEase(ease: EasingParam): EasingFunction;
 export type EaseType = (Ease: EasingFunction) => EasingFunction;
 export type EasesFunctions = {
-    linear: typeof none;
-    none: typeof none;
+    linear: EasingFunction;
+    none: EasingFunction;
     in: PowerEasing;
     out: PowerEasing;
     inOut: PowerEasing;
@@ -122,4 +122,3 @@ import type { EasingFunction } from '../../types/index.js';
 import type { BackEasing } from '../../types/index.js';
 import type { ElasticEasing } from '../../types/index.js';
 import type { EasingParam } from '../../types/index.js';
-import { none as none_1 } from '../none.js';

package/dist/modules/easings/eases/parser.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -79,8 +79,8 @@ const easeInFunctions = {
 
 /**
  * @typedef  {Object} EasesFunctions
- * @property {typeof none} linear
- * @property {typeof none} none
+ * @property {EasingFunction} linear
+ * @property {EasingFunction} none
  * @property {PowerEasing} in
  * @property {PowerEasing} out
  * @property {PowerEasing} inOut

package/dist/modules/easings/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/irregular/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/irregular/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/linear/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/linear/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/none.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/none.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/spring/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/spring/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/steps/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/easings/steps/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/engine/engine.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - engine - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -103,7 +103,9 @@ class Engine extends clock.Clock {
   }
 
   set speed(playbackRate) {
-    this._speed = playbackRate * globals.globals.timeScale;
+    const speed = playbackRate * globals.globals.timeScale;
+    if (this._speed === speed) return;
+    this._speed = speed;
     helpers.forEachChildren(this, (/** @type {Tickable} */child) => child.speed = child._speed);
   }
 

package/dist/modules/engine/engine.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - engine - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -101,7 +101,9 @@ class Engine extends Clock {
   }
 
   set speed(playbackRate) {
-    this._speed = playbackRate * globals.timeScale;
+    const speed = playbackRate * globals.timeScale;
+    if (this._speed === speed) return;
+    this._speed = speed;
     forEachChildren(this, (/** @type {Tickable} */child) => child.speed = child._speed);
   }
 

package/dist/modules/engine/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - engine - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/engine/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - engine - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/events/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - events - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/events/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - events - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/events/scroll.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - events - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -216,12 +216,14 @@ class ScrollContainer {
 
   refreshScrollObservers() {
     helpers.forEachChildren(this, (/** @type {ScrollObserver} */child) => {
+      if (!child.ready) return;
       if (child._debug) {
         child.removeDebug();
       }
     });
     this.updateBounds();
     helpers.forEachChildren(this, (/** @type {ScrollObserver} */child) => {
+      if (!child.ready) return;
       child.refresh();
       child.onResize(child);
       if (child._debug) {

package/dist/modules/events/scroll.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - events - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -214,12 +214,14 @@ class ScrollContainer {
 
   refreshScrollObservers() {
     forEachChildren(this, (/** @type {ScrollObserver} */child) => {
+      if (!child.ready) return;
       if (child._debug) {
         child.removeDebug();
       }
     });
     this.updateBounds();
     forEachChildren(this, (/** @type {ScrollObserver} */child) => {
+      if (!child.ready) return;
       child.refresh();
       child.onResize(child);
       if (child._debug) {

package/dist/modules/index.cjs

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

package/dist/modules/index.js

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

package/dist/modules/layout/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/layout/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/layout/layout.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/layout/layout.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */