animejs 4.3.6 → 4.4.1

package/dist/modules/core/transforms.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -24,26 +24,142 @@ var helpers = require('./helpers.cjs');
  */
 const parseInlineTransforms = (target, propName, animationInlineStyles) => {
   const inlineTransforms = target.style.transform;
-  let inlinedStylesPropertyValue;
   if (inlineTransforms) {
     const cachedTransforms = target[consts.transformsSymbol];
-    let t; while (t = consts.transformsExecRgx.exec(inlineTransforms)) {
-      const inlinePropertyName = t[1];
-      // const inlinePropertyValue = t[2];
-      const inlinePropertyValue = t[2].slice(1, -1);
-      cachedTransforms[inlinePropertyName] = inlinePropertyValue;
-      if (inlinePropertyName === propName) {
-        inlinedStylesPropertyValue = inlinePropertyValue;
-        // Store the new parsed inline styles if animationInlineStyles is provided
-        if (animationInlineStyles) {
-          animationInlineStyles[propName] = inlinePropertyValue;
+    let pos = 0;
+    const len = inlineTransforms.length;
+    let fullTranslateValue;
+    while (pos < len) {
+      // Skip whitespace
+      while (pos < len && inlineTransforms.charCodeAt(pos) === 32) pos++;
+      if (pos >= len) break;
+      // Read function name
+      const nameStart = pos;
+      while (pos < len && inlineTransforms.charCodeAt(pos) !== 40) pos++;
+      if (pos >= len) break;
+      const name = inlineTransforms.substring(nameStart, pos);
+      // Scan to closing paren, recording top-level comma positions
+      let depth = 1;
+      const valueStart = pos + 1;
+      let c1 = -1, c2 = -1;
+      pos++;
+      while (pos < len && depth > 0) {
+        const c = inlineTransforms.charCodeAt(pos);
+        if (c === 40) depth++;
+        else if (c === 41) depth--;
+        else if (c === 44 && depth === 1) {
+          if (c1 === -1) c1 = pos;
+          else if (c2 === -1) c2 = pos;
         }
+        pos++;
       }
+      const valueEnd = pos - 1;
+      // Decompose multi-arg functions into individual axis properties
+      if (name === 'translate' || name === 'translate3d') {
+        if (c1 === -1) {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.translateZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+        fullTranslateValue = inlineTransforms.substring(valueStart, valueEnd);
+      } else if (name === 'scale' || name === 'scale3d') {
+        if (c1 === -1) {
+          cachedTransforms.scale = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.scaleX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.scaleZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+      } else {
+        cachedTransforms[name] = inlineTransforms.substring(valueStart, valueEnd);
+      }
+    }
+    // Resolve the requested property from the cache
+    if (propName === 'translate3d' && fullTranslateValue) {
+      if (animationInlineStyles) animationInlineStyles[propName] = fullTranslateValue;
+      return fullTranslateValue;
+    }
+    const cached = cachedTransforms[propName];
+    if (!helpers.isUnd(cached)) {
+      if (animationInlineStyles) animationInlineStyles[propName] = cached;
+      return cached;
     }
   }
-  return inlineTransforms && !helpers.isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+  return propName === 'translate3d' ? '0px, 0px, 0px' :
+    propName === 'rotate3d' ? '0, 0, 0, 0deg' :
     helpers.stringStartsWith(propName, 'scale') ? '1' :
     helpers.stringStartsWith(propName, 'rotate') || helpers.stringStartsWith(propName, 'skew') ? '0deg' : '0px';
 };
 
+/**
+ * Builds a CSS transform string from the target's cached transform properties.
+ * Iterates validTransforms in order (perspective > translate > rotate > scale > skew > matrix).
+ * When adjacent axis properties are all present, emits a shorter shorthand (translateX + translateY -> translate(x, y))
+ * The index is advanced past consumed properties so they are not emitted twice.
+ * Properties without a grouping partner (e.g. translateY alone, scaleZ alone) emit individually.
+ *
+ * @param  {Record<String, String>} props
+ * @return {String}
+ */
+const buildTransformString = (props) => {
+  let str = consts.emptyString;
+  for (let i = 0, l = consts.validTransforms.length; i < l; i++) {
+    const key = consts.validTransforms[i];
+    const val = props[key];
+    if (val !== undefined) {
+      // Group translateX with adjacent translateY / translateZ
+      if (key === 'translateX') {
+        const next = props.translateY;
+        if (next !== undefined) {
+          const next2 = props.translateZ;
+          if (next2 !== undefined) {
+            str += `translate3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `translate(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // Group scaleX with adjacent scaleY / scaleZ (only when standalone scale is absent)
+      if (key === 'scaleX' && props.scale === undefined) {
+        const next = props.scaleY;
+        if (next !== undefined) {
+          const next2 = props.scaleZ;
+          if (next2 !== undefined) {
+            str += `scale3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `scale(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // All other properties: emit individually using pre-built fragment string
+      str += `${consts.transformsFragmentStrings[key]}${val}) `;
+    }
+    // Preserve non-animatable rotate3d in correct position (after rotateZ, before scale)
+    if (key === 'rotateZ') {
+      if (props.rotate3d !== undefined) str += `rotate3d(${props.rotate3d}) `;
+    }
+  }
+  // Preserve non-animatable matrix/matrix3d from inline styles
+  if (props.matrix !== undefined) str += `matrix(${props.matrix}) `;
+  if (props.matrix3d !== undefined) str += `matrix3d(${props.matrix3d}) `;
+  return str;
+};
+
+exports.buildTransformString = buildTransformString;
 exports.parseInlineTransforms = parseInlineTransforms;

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

@@ -1,2 +1,3 @@
 export function parseInlineTransforms(target: DOMTarget, propName: string, animationInlineStyles: any): string;
+export function buildTransformString(props: Record<string, string>): string;
 import type { DOMTarget } from '../types/index.js';

package/dist/modules/core/transforms.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { transformsSymbol, transformsExecRgx } from './consts.js';
+import { transformsFragmentStrings, emptyString, validTransforms, transformsSymbol } from './consts.js';
 import { isUnd, stringStartsWith } from './helpers.js';
 
 /**
@@ -22,26 +22,141 @@ import { isUnd, stringStartsWith } from './helpers.js';
  */
 const parseInlineTransforms = (target, propName, animationInlineStyles) => {
   const inlineTransforms = target.style.transform;
-  let inlinedStylesPropertyValue;
   if (inlineTransforms) {
     const cachedTransforms = target[transformsSymbol];
-    let t; while (t = transformsExecRgx.exec(inlineTransforms)) {
-      const inlinePropertyName = t[1];
-      // const inlinePropertyValue = t[2];
-      const inlinePropertyValue = t[2].slice(1, -1);
-      cachedTransforms[inlinePropertyName] = inlinePropertyValue;
-      if (inlinePropertyName === propName) {
-        inlinedStylesPropertyValue = inlinePropertyValue;
-        // Store the new parsed inline styles if animationInlineStyles is provided
-        if (animationInlineStyles) {
-          animationInlineStyles[propName] = inlinePropertyValue;
+    let pos = 0;
+    const len = inlineTransforms.length;
+    let fullTranslateValue;
+    while (pos < len) {
+      // Skip whitespace
+      while (pos < len && inlineTransforms.charCodeAt(pos) === 32) pos++;
+      if (pos >= len) break;
+      // Read function name
+      const nameStart = pos;
+      while (pos < len && inlineTransforms.charCodeAt(pos) !== 40) pos++;
+      if (pos >= len) break;
+      const name = inlineTransforms.substring(nameStart, pos);
+      // Scan to closing paren, recording top-level comma positions
+      let depth = 1;
+      const valueStart = pos + 1;
+      let c1 = -1, c2 = -1;
+      pos++;
+      while (pos < len && depth > 0) {
+        const c = inlineTransforms.charCodeAt(pos);
+        if (c === 40) depth++;
+        else if (c === 41) depth--;
+        else if (c === 44 && depth === 1) {
+          if (c1 === -1) c1 = pos;
+          else if (c2 === -1) c2 = pos;
         }
+        pos++;
       }
+      const valueEnd = pos - 1;
+      // Decompose multi-arg functions into individual axis properties
+      if (name === 'translate' || name === 'translate3d') {
+        if (c1 === -1) {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.translateZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+        fullTranslateValue = inlineTransforms.substring(valueStart, valueEnd);
+      } else if (name === 'scale' || name === 'scale3d') {
+        if (c1 === -1) {
+          cachedTransforms.scale = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.scaleX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.scaleZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+      } else {
+        cachedTransforms[name] = inlineTransforms.substring(valueStart, valueEnd);
+      }
+    }
+    // Resolve the requested property from the cache
+    if (propName === 'translate3d' && fullTranslateValue) {
+      if (animationInlineStyles) animationInlineStyles[propName] = fullTranslateValue;
+      return fullTranslateValue;
+    }
+    const cached = cachedTransforms[propName];
+    if (!isUnd(cached)) {
+      if (animationInlineStyles) animationInlineStyles[propName] = cached;
+      return cached;
     }
   }
-  return inlineTransforms && !isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+  return propName === 'translate3d' ? '0px, 0px, 0px' :
+    propName === 'rotate3d' ? '0, 0, 0, 0deg' :
     stringStartsWith(propName, 'scale') ? '1' :
     stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew') ? '0deg' : '0px';
 };
 
-export { parseInlineTransforms };
+/**
+ * Builds a CSS transform string from the target's cached transform properties.
+ * Iterates validTransforms in order (perspective > translate > rotate > scale > skew > matrix).
+ * When adjacent axis properties are all present, emits a shorter shorthand (translateX + translateY -> translate(x, y))
+ * The index is advanced past consumed properties so they are not emitted twice.
+ * Properties without a grouping partner (e.g. translateY alone, scaleZ alone) emit individually.
+ *
+ * @param  {Record<String, String>} props
+ * @return {String}
+ */
+const buildTransformString = (props) => {
+  let str = emptyString;
+  for (let i = 0, l = validTransforms.length; i < l; i++) {
+    const key = validTransforms[i];
+    const val = props[key];
+    if (val !== undefined) {
+      // Group translateX with adjacent translateY / translateZ
+      if (key === 'translateX') {
+        const next = props.translateY;
+        if (next !== undefined) {
+          const next2 = props.translateZ;
+          if (next2 !== undefined) {
+            str += `translate3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `translate(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // Group scaleX with adjacent scaleY / scaleZ (only when standalone scale is absent)
+      if (key === 'scaleX' && props.scale === undefined) {
+        const next = props.scaleY;
+        if (next !== undefined) {
+          const next2 = props.scaleZ;
+          if (next2 !== undefined) {
+            str += `scale3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `scale(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // All other properties: emit individually using pre-built fragment string
+      str += `${transformsFragmentStrings[key]}${val}) `;
+    }
+    // Preserve non-animatable rotate3d in correct position (after rotateZ, before scale)
+    if (key === 'rotateZ') {
+      if (props.rotate3d !== undefined) str += `rotate3d(${props.rotate3d}) `;
+    }
+  }
+  // Preserve non-animatable matrix/matrix3d from inline styles
+  if (props.matrix !== undefined) str += `matrix(${props.matrix}) `;
+  if (props.matrix3d !== undefined) str += `matrix3d(${props.matrix3d}) `;
+  return str;
+};
+
+export { buildTransformString, parseInlineTransforms };

package/dist/modules/core/units.cjs

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

package/dist/modules/core/units.js

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

package/dist/modules/core/values.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -19,6 +19,7 @@ var colors = require('./colors.cjs');
 *   Tween,
 *   TweenPropValue,
 *   TweenDecomposedValue,
+*   TargetsArray,
 * } from '../types/index.js'
 */
 
@@ -36,15 +37,16 @@ const setValue = (targetValue, defaultValue) => {
  * @param  {TweenPropValue} value
  * @param  {Target} target
  * @param  {Number} index
- * @param  {Number} total
- * @param  {Object} [store]
+ * @param  {TargetsArray} targets
+ * @param  {Object|null} store
+ * @param  {Tween|null} prevTween
  * @return {any}
  */
-const getFunctionValue = (value, target, index, total, store) => {
+const getFunctionValue = (value, target, index, targets, store, prevTween) => {
   let func;
   if (helpers.isFnc(value)) {
     func = () => {
-      const computed = /** @type {Function} */(value)(target, index, total);
+      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;
     };
@@ -111,9 +113,17 @@ const getCSSValue = (target, propName, animationInlineStyles) => {
  */
 const getOriginalAnimatableValue = (target, propName, tweenType, animationInlineStyles) => {
   const type = !helpers.isUnd(tweenType) ? tweenType : getTweenType(target, propName);
-  return type === consts.tweenTypes.OBJECT ? target[propName] || 0 :
-         type === consts.tweenTypes.ATTRIBUTE ? /** @type {DOMTarget} */(target).getAttribute(propName) :
-         type === consts.tweenTypes.TRANSFORM ? transforms.parseInlineTransforms(/** @type {DOMTarget} */(target), propName, animationInlineStyles) :
+  if (type === consts.tweenTypes.OBJECT) {
+    const value = target[propName];
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value || 0;
+  }
+  if (type === consts.tweenTypes.ATTRIBUTE) {
+    const value = /** @type {DOMTarget} */(target).getAttribute(propName);
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value;
+  }
+  return type === consts.tweenTypes.TRANSFORM ? transforms.parseInlineTransforms(/** @type {DOMTarget} */(target), propName, animationInlineStyles) :
          type === consts.tweenTypes.CSS_VAR ? getCSSValue(/** @type {DOMTarget} */(target), propName, animationInlineStyles).trimStart() :
          getCSSValue(/** @type {DOMTarget} */(target), propName, animationInlineStyles);
 };
@@ -215,6 +225,56 @@ 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
+ * @param  {Number} precision
+ * @return {String}
+ */
+const composeComplexValue = (tween, progress, precision) => {
+  const mod = tween._modifier;
+  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;
+    }
+  }
+  return v;
+};
+
+exports.composeColorValue = composeColorValue;
+exports.composeComplexValue = composeComplexValue;
 exports.createDecomposedValueTargetObject = createDecomposedValueTargetObject;
 exports.decomposeRawValue = decomposeRawValue;
 exports.decomposeTweenValue = decomposeTweenValue;

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

@@ -1,5 +1,5 @@
 export function setValue<T, D>(targetValue: T | undefined, defaultValue: D): T | D;
-export function getFunctionValue(value: TweenPropValue, target: Target, index: number, total: number, store?: any): any;
+export function getFunctionValue(value: TweenPropValue, target: Target, index: number, targets: TargetsArray, store: any | null, prevTween: Tween | null): any;
 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;
@@ -7,8 +7,11 @@ export function createDecomposedValueTargetObject(): TweenDecomposedValue;
 export function decomposeRawValue(rawValue: string | number, 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';
+import type { TargetsArray } from '../types/index.js';
+import type { Tween } from '../types/index.js';
 import { tweenTypes } from './consts.js';
 import type { TweenDecomposedValue } from '../types/index.js';
-import type { Tween } from '../types/index.js';

package/dist/modules/core/values.js

@@ -1,12 +1,12 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { tweenTypes, isDomSymbol, isSvgSymbol, validTransforms, shortTransforms, valueTypes, unitsExecRgx, digitWithExponentRgx, proxyTargetSymbol, cssVarPrefix, cssVariableMatchRgx, emptyString } from './consts.js';
-import { isUnd, isValidSVGAttribute, stringStartsWith, isCol, isFnc, isStr, cloneArray } from './helpers.js';
+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 { parseInlineTransforms } from './transforms.js';
 import { convertColorStringValuesToRgbaArray } from './colors.js';
 
@@ -17,6 +17,7 @@ import { convertColorStringValuesToRgbaArray } from './colors.js';
 *   Tween,
 *   TweenPropValue,
 *   TweenDecomposedValue,
+*   TargetsArray,
 * } from '../types/index.js'
 */
 
@@ -34,15 +35,16 @@ const setValue = (targetValue, defaultValue) => {
  * @param  {TweenPropValue} value
  * @param  {Target} target
  * @param  {Number} index
- * @param  {Number} total
- * @param  {Object} [store]
+ * @param  {TargetsArray} targets
+ * @param  {Object|null} store
+ * @param  {Tween|null} prevTween
  * @return {any}
  */
-const getFunctionValue = (value, target, index, total, store) => {
+const getFunctionValue = (value, target, index, targets, store, prevTween) => {
   let func;
   if (isFnc(value)) {
     func = () => {
-      const computed = /** @type {Function} */(value)(target, index, total);
+      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;
     };
@@ -109,9 +111,17 @@ const getCSSValue = (target, propName, animationInlineStyles) => {
  */
 const getOriginalAnimatableValue = (target, propName, tweenType, animationInlineStyles) => {
   const type = !isUnd(tweenType) ? tweenType : getTweenType(target, propName);
-  return type === tweenTypes.OBJECT ? target[propName] || 0 :
-         type === tweenTypes.ATTRIBUTE ? /** @type {DOMTarget} */(target).getAttribute(propName) :
-         type === tweenTypes.TRANSFORM ? parseInlineTransforms(/** @type {DOMTarget} */(target), propName, animationInlineStyles) :
+  if (type === tweenTypes.OBJECT) {
+    const value = target[propName];
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value || 0;
+  }
+  if (type === tweenTypes.ATTRIBUTE) {
+    const value = /** @type {DOMTarget} */(target).getAttribute(propName);
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value;
+  }
+  return type === tweenTypes.TRANSFORM ? parseInlineTransforms(/** @type {DOMTarget} */(target), propName, animationInlineStyles) :
          type === tweenTypes.CSS_VAR ? getCSSValue(/** @type {DOMTarget} */(target), propName, animationInlineStyles).trimStart() :
          getCSSValue(/** @type {DOMTarget} */(target), propName, animationInlineStyles);
 };
@@ -213,4 +223,52 @@ const decomposeTweenValue = (tween, targetObject) => {
 
 const decomposedOriginalValue = createDecomposedValueTargetObject();
 
-export { createDecomposedValueTargetObject, decomposeRawValue, decomposeTweenValue, decomposedOriginalValue, getFunctionValue, getOriginalAnimatableValue, getRelativeValue, getTweenType, setValue };
+/**
+ * @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
+ * @param  {Number} precision
+ * @return {String}
+ */
+const composeComplexValue = (tween, progress, precision) => {
+  const mod = tween._modifier;
+  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;
+    }
+  }
+  return v;
+};
+
+export { composeColorValue, 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.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/draggable/draggable.js

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

package/dist/modules/draggable/index.cjs

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

package/dist/modules/draggable/index.js

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

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

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

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

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