animejs 4.4.0 → 4.5.0

package/dist/modules/core/targets.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -113,18 +113,16 @@ function parseTargets(targets) {
 function registerTargets(targets) {
   const parsedTargetsArray = parseTargets(targets);
   const parsedTargetsLength = parsedTargetsArray.length;
-  if (parsedTargetsLength) {
-    for (let i = 0; i < parsedTargetsLength; i++) {
-      const target = parsedTargetsArray[i];
-      if (!target[consts.isRegisteredTargetSymbol]) {
-        target[consts.isRegisteredTargetSymbol] = true;
-        const isSvgType = helpers.isSvg(target);
-        const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
-        if (isDom) {
-          target[consts.isDomSymbol] = true;
-          target[consts.isSvgSymbol] = isSvgType;
-          target[consts.transformsSymbol] = {};
-        }
+  for (let i = 0; i < parsedTargetsLength; i++) {
+    const target = parsedTargetsArray[i];
+    if (!target[consts.isRegisteredTargetSymbol]) {
+      target[consts.isRegisteredTargetSymbol] = true;
+      const isSvgType = helpers.isSvg(target);
+      const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
+      if (isDom) {
+        target[consts.isDomSymbol] = true;
+        target[consts.isSvgSymbol] = isSvgType;
+        target[consts.transformsSymbol] = {};
       }
     }
   }

package/dist/modules/core/targets.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -111,18 +111,16 @@ function parseTargets(targets) {
 function registerTargets(targets) {
   const parsedTargetsArray = parseTargets(targets);
   const parsedTargetsLength = parsedTargetsArray.length;
-  if (parsedTargetsLength) {
-    for (let i = 0; i < parsedTargetsLength; i++) {
-      const target = parsedTargetsArray[i];
-      if (!target[isRegisteredTargetSymbol]) {
-        target[isRegisteredTargetSymbol] = true;
-        const isSvgType = isSvg(target);
-        const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
-        if (isDom) {
-          target[isDomSymbol] = true;
-          target[isSvgSymbol] = isSvgType;
-          target[transformsSymbol] = {};
-        }
+  for (let i = 0; i < parsedTargetsLength; i++) {
+    const target = parsedTargetsArray[i];
+    if (!target[isRegisteredTargetSymbol]) {
+      target[isRegisteredTargetSymbol] = true;
+      const isSvgType = isSvg(target);
+      const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
+      if (isDom) {
+        target[isDomSymbol] = true;
+        target[isSvgSymbol] = isSvgType;
+        target[transformsSymbol] = {};
       }
     }
   }

package/dist/modules/core/transforms.cjs

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

package/dist/modules/core/transforms.js

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

package/dist/modules/core/units.cjs

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

package/dist/modules/core/units.js

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

package/dist/modules/core/values.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -10,6 +10,7 @@
 var consts = require('./consts.cjs');
 var helpers = require('./helpers.cjs');
 var transforms = require('./transforms.cjs');
+var registry = require('../adapters/registry.cjs');
 var colors = require('./colors.cjs');
 
 /**
@@ -33,6 +34,21 @@ const setValue = (targetValue, defaultValue) => {
   return helpers.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(consts.cssVariableMatchRgx);
+  const el = target[consts.isDomSymbol] ? target : document.documentElement;
+  let computed = getComputedStyle(/** @type {HTMLElement} */(el))?.getPropertyValue(match[1]);
+  if ((!computed || computed.trim() === consts.emptyString) && match[2]) computed = match[2].trim();
+  return computed || 0;
+};
+
 /**
  * @param  {TweenPropValue} value
  * @param  {Target} target
@@ -43,30 +59,26 @@ const setValue = (targetValue, defaultValue) => {
  * @return {any}
  */
 const getFunctionValue = (value, target, index, targets, store, prevTween) => {
-  let func;
   if (helpers.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 (helpers.isStr(value) && helpers.stringStartsWith(value, consts.cssVarPrefix)) {
-    func = () => {
-      const match = value.match(consts.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() === consts.emptyString) && fallbackValue) {
-        computed = fallbackValue.trim();
-      }
-      return computed || 0;
-    };
-  } else {
-    return value;
+    store.func = func;
+    return func();
   }
-  if (store) store.func = func;
-  return func();
+  if (helpers.isStr(value) && helpers.stringStartsWith(value, consts.cssVarPrefix)) {
+    if (!store) return resolveCssVar(/** @type {String} */(value), target);
+    const func = () => resolveCssVar(/** @type {String} */(value), target);
+    store.func = func;
+    return func();
+  }
+  return value;
 };
 
 /**
@@ -113,6 +125,12 @@ const getCSSValue = (target, propName, animationInlineStyles) => {
  */
 const getOriginalAnimatableValue = (target, propName, tweenType, animationInlineStyles) => {
   const type = !helpers.isUnd(tweenType) ? tweenType : getTweenType(target, propName);
+  const adapterProp = registry.resolveAdapterEntry(target, propName);
+  if (adapterProp) {
+    const value = adapterProp.get(target);
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value == null ? 0 : value;
+  }
   if (type === consts.tweenTypes.OBJECT) {
     const value = target[propName];
     if (value && animationInlineStyles) animationInlineStyles[propName] = value;
@@ -154,7 +172,7 @@ const createDecomposedValueTargetObject = () => {
 };
 
 /**
- * @param  {String|Number} rawValue
+ * @param  {String|Number|Object} rawValue
  * @param  {TweenDecomposedValue} targetObject
  * @return {TweenDecomposedValue}
  */
@@ -172,39 +190,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 : consts.unitsExecRgx.exec(str);
+  if (unitMatch) {
+    // Has a number and a unit
+    targetObject.t = consts.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 (helpers.isCol(str)) {
+    // Color string
+    targetObject.t = consts.valueTypes.COLOR;
+    targetObject.d = colors.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 : consts.unitsExecRgx.exec(str);
-    if (unitMatch) {
-      // Has a number and a unit
-      targetObject.t = consts.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 (helpers.isCol(str)) {
-      // Is a color
-      targetObject.t = consts.valueTypes.COLOR;
-      targetObject.d = colors.convertColorStringValuesToRgbaArray(str);
-      return targetObject;
-    } else {
-      // Is a more complex string (generally svg coords, calc() or filters CSS values)
-      const matchedNumbers = str.match(consts.digitWithExponentRgx);
-      targetObject.t = consts.valueTypes.COMPLEX;
-      targetObject.d = matchedNumbers ? matchedNumbers.map(Number) : [];
-      targetObject.s = str.split(consts.digitWithExponentRgx) || [];
-      return targetObject;
-    }
+    // Is a more complex string (generally svg coords, calc() or filters CSS values)
+    const matchedNumbers = str.match(consts.digitWithExponentRgx);
+    targetObject.t = consts.valueTypes.COMPLEX;
+    targetObject.d = matchedNumbers ? matchedNumbers.map(Number) : [];
+    targetObject.s = str.split(consts.digitWithExponentRgx) || [];
+    return targetObject;
   }
 };
 
@@ -225,30 +242,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 = helpers.round(helpers.clamp(/** @type {Number} */(mod(helpers.lerp(fn[0], tn[0], progress))), 0, 255), 0);
-  const g = helpers.round(helpers.clamp(/** @type {Number} */(mod(helpers.lerp(fn[1], tn[1], progress))), 0, 255), 0);
-  const b = helpers.round(helpers.clamp(/** @type {Number} */(mod(helpers.lerp(fn[2], tn[2], progress))), 0, 255), 0);
-  const a = helpers.clamp(/** @type {Number} */(mod(helpers.round(helpers.lerp(fn[3], tn[3], progress), precision))), 0, 1);
-  if (tween._composition !== consts.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
@@ -260,20 +253,18 @@ const composeComplexValue = (tween, progress, precision) => {
   const fn = tween._fromNumbers;
   const tn = tween._toNumbers;
   const ts = tween._strings;
-  const hasComposition = tween._composition !== consts.compositionTypes.none;
   let v = ts[0];
   for (let j = 0, l = tn.length; j < l; j++) {
     const n = /** @type {Number} */(mod(helpers.round(helpers.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;
 };
 
-exports.composeColorValue = composeColorValue;
 exports.composeComplexValue = composeComplexValue;
 exports.createDecomposedValueTargetObject = createDecomposedValueTargetObject;
 exports.decomposeRawValue = decomposeRawValue;

package/dist/modules/core/values.d.ts

@@ -4,10 +4,9 @@ export function getTweenType(target: Target, prop: string): tweenTypes;
 export function getOriginalAnimatableValue(target: Target, propName: string, tweenType?: tweenTypes, animationInlineStyles?: any | void): string | number;
 export function getRelativeValue(x: number, y: number, operator: string): number;
 export function createDecomposedValueTargetObject(): TweenDecomposedValue;
-export function decomposeRawValue(rawValue: string | number, targetObject: TweenDecomposedValue): TweenDecomposedValue;
+export function decomposeRawValue(rawValue: string | number | any, targetObject: TweenDecomposedValue): TweenDecomposedValue;
 export function decomposeTweenValue(tween: Tween, targetObject: TweenDecomposedValue): TweenDecomposedValue;
 export const decomposedOriginalValue: TweenDecomposedValue;
-export function composeColorValue(tween: Tween, progress: number, precision: number): string;
 export function composeComplexValue(tween: Tween, progress: number, precision: number): string;
 import type { TweenPropValue } from '../types/index.js';
 import type { Target } from '../types/index.js';

package/dist/modules/core/values.js

@@ -1,13 +1,14 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */