animejs 4.4.1 → 4.5.0

package/dist/modules/core/render.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -9,7 +9,7 @@ import { globals } from './globals.js';
 import { minValue, tickModes, valueTypes, compositionTypes, tweenTypes, transformsSymbol } from './consts.js';
 import { forEachChildren, round, now, clamp, lerp } from './helpers.js';
 import { buildTransformString } from './transforms.js';
-import { composeColorValue, composeComplexValue } from './values.js';
+import { composeComplexValue } from './values.js';
 
 /**
  * @import {
@@ -74,12 +74,14 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   // Execute the "expensive" iterations calculations only when necessary
   if (iterationCount > 1) {
     // bitwise NOT operator seems to be generally faster than Math.floor() across browsers
-    const currentIteration = ~~(tickableCurrentTime / (iterationDuration + (isCurrentTimeEqualOrAboveDuration ? 0 : _loopDelay)));
+    const period = iterationDuration + (isCurrentTimeEqualOrAboveDuration ? 0 : _loopDelay);
+    const currentIteration = ~~(tickableCurrentTime / period);
     tickable._currentIteration = clamp(currentIteration, 0, iterationCount);
     // Prevent the iteration count to go above the max iterations when reaching the end of the animation
     if (isCurrentTimeEqualOrAboveDuration) tickable._currentIteration--;
     isOdd = tickable._currentIteration % 2;
-    iterationElapsedTime = tickableCurrentTime % (iterationDuration + _loopDelay) || 0;
+    // Derive elapsed from the same `~~` truncation that gave currentIteration. Using `% period` here can disagree with `~~(/period)` under float drift at iteration boundaries and write the wrong end of the tween for one frame.
+    iterationElapsedTime = tickableCurrentTime - currentIteration * period || 0;
   }
 
   // Checks if exactly one of _reversed and (_alternate && isOdd) is true
@@ -111,12 +113,14 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   if (
     forcedTick ||
     tickMode === tickModes.AUTO && (
-      time >= tickableDelay && time <= tickableEndTime || // Normal render
+      // Timeline children render from their offset instead of their delay so the gap left by a truncated sibling is covered on seek.
+      time >= (parent && tickableDelay > 0 ? 0 : tickableDelay) && time <= tickableEndTime || // Normal render
       time <= tickableDelay && tickablePrevTime > tickableDelay || // Playhead is before the animation start time so make sure the animation is at its initial state
       time >= tickableEndTime && tickablePrevTime !== duration // Playhead is after the animation end time so make sure the animation is at its end state
     ) ||
     iterationTime >= tickableEndTime && tickablePrevTime !== duration ||
-    iterationTime <= tickableDelay && tickablePrevTime > 0 ||
+    // iterationTime is per-iteration, compared to the delay to catch a backward seek into a looped iteration's delay region. Exclude the final settled end, where iterationTime clamps to duration and would falsely match the delay region when the delay exceeds the duration.
+    iterationTime <= tickableDelay && tickablePrevTime > 0 && !isCurrentTimeEqualOrAboveDuration ||
     time <= tickablePrevTime && tickablePrevTime === duration && completed || // Force a render if a seek occurs on an completed animation
     isCurrentTimeEqualOrAboveDuration && !completed && isSetter // This prevents 0 duration tickables to be skipped
   ) {
@@ -132,7 +136,8 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
       // Time has jumped more than globals.tickThreshold so consider this tick manual
       const forcedRender = forcedTick || (isRunningBackwards ? deltaTime * -1 : deltaTime) >= globals.tickThreshold;
-      const absoluteTime = tickable._offset + (parent ? parent._offset : 0) + tickableDelay + iterationTime;
+      // Round to match the precision of tween._absoluteStartTime so equal-time boundary checks compare cleanly without floating point drift from the unrounded _offset.
+      const absoluteTime = round(tickable._offset + (parent ? parent._offset : 0) + tickableDelay + iterationTime, 12);
 
       // Only Animation can have tweens, Timer returns undefined
       let tween = /** @type {Tween} */(/** @type {JSAnimation} */(tickable)._head);
@@ -151,15 +156,38 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
         const tweenNextRep = tween._nextRep;
         const tweenPrevRep = tween._prevRep;
         const tweenHasComposition = tweenComposition !== compositionTypes.none;
+        // The previous sibling stops writing at its truncated end, so this tween takes over the hold from that point.
+        const tweenPrevRepEndTime = tweenPrevRep ? tweenPrevRep._absoluteStartTime + tweenPrevRep._changeDuration : 0;
+        const tweenPrevRepIsCrossParent = tweenPrevRep && tweenPrevRep.parent !== tween.parent;
+        // Same parent keyframes take over at their own start, end plus delay equals the next start by construction.
+        // Cross parent siblings take over at their update start.
+        // Negative delay siblings take over at their own start instead.
+        const tweenNextRepTakeover = !tweenNextRep || tweenNextRep._isOverridden ? tweenAbsEndTime :
+          tweenNextRep.parent === tween.parent ? tweenAbsEndTime + tweenNextRep._delay :
+          tweenNextRep._absoluteStartTime < tweenNextRep._absoluteUpdateStartTime ? tweenNextRep._absoluteStartTime : tweenNextRep._absoluteUpdateStartTime;
 
         if ((forcedRender || (
-            (tweenCurrentTime !== tweenChangeDuration || absoluteTime <= tweenAbsEndTime + (tweenNextRep ? tweenNextRep._delay : 0)) &&
-            (tweenCurrentTime !== 0 || absoluteTime >= tween._absoluteStartTime)
-          )) && (!tweenHasComposition || (
+            // Tail keyframes always re-evaluate the gate so an earlier keyframe cannot leave the target stale by writing past its own range after a backward seek.
+            (tweenCurrentTime !== tweenChangeDuration || absoluteTime <= tweenNextRepTakeover ||
+            (tweenPrevRep && !tweenPrevRepIsCrossParent && (!tweenNextRep || tweenNextRep.parent !== tween.parent))) &&
+            // A cross parent tween re-renders its from value from the previous sibling truncated end so the handoff gap holds.
+            // A keyframe re-renders its from revert while the next keyframe time is stale so a backward jump over its range cannot leave the next value in place.
+            (tweenCurrentTime !== 0 || absoluteTime >= tween._absoluteStartTime ||
+            (tweenPrevRepIsCrossParent && !tween._hasFromValue && !tweenPrevRep._isOverridden && absoluteTime >= tweenPrevRepEndTime) ||
+            (tweenNextRep && !tweenNextRep._isOverridden && tweenNextRep.parent === tween.parent && tweenNextRep._currentTime !== 0 && iterationTime < tweenNextRep._startTime))
+          )) &&
+          // Non-first keyframes wait until the iteration reaches their own start before rendering, so the previous keyframe can handle the from-revert when scrubbed backward past this tween's range.
+          (!tweenPrevRep || tweenPrevRepIsCrossParent || iterationTime >= tween._startTime) &&
+          (!tweenHasComposition || (
             !tween._isOverridden &&
             (!tween._isOverlapped || absoluteTime <= tweenAbsEndTime) &&
-            (!tweenNextRep || (tweenNextRep._isOverridden || absoluteTime <= tweenNextRep._absoluteStartTime)) &&
-            (!tweenPrevRep || (tweenPrevRep._isOverridden || (absoluteTime >= (tweenPrevRep._absoluteStartTime + tweenPrevRep._changeDuration) + tween._delay)))
+            // The next sibling owns the value past its takeover point, so yielding there keeps writes single owner in both directions.
+            (!tweenNextRep || tweenNextRep._isOverridden || absoluteTime <= tweenNextRepTakeover) &&
+            // The previous sibling owns the value up to its truncated end.
+            // Cross parent tweens take over the hold from that point, explicit from values wait for their own start.
+            (!tweenPrevRep || (tweenPrevRep._isOverridden || (!tweenPrevRepIsCrossParent ?
+              absoluteTime >= tweenPrevRepEndTime + tween._delay :
+              absoluteTime >= tween._absoluteStartTime || (!tween._hasFromValue && absoluteTime >= tweenPrevRepEndTime))))
           ))
         ) {
 
@@ -170,7 +198,7 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
           const tweenType = tween._tweenType;
           const tweenIsObject = tweenType === tweenTypes.OBJECT;
           const tweenIsNumber = tweenValueType === valueTypes.NUMBER;
-          // Only round the in-between frames values if the final value is a string
+          // Only round the in-between frames values if the final value is a string. Object targets consume raw numbers, so rounding is dead work there.
           const tweenPrecision = (tweenIsNumber && tweenIsObject) || tweenProgress === 0 || tweenProgress === 1 ? -1 : globals.precision;
 
           // Recompose tween value
@@ -186,7 +214,22 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             number = /** @type {Number} */(tweenModifier(round(lerp(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision)));
             value = `${number}${tween._unit}`;
           } else if (tweenValueType === valueTypes.COLOR) {
-            value = composeColorValue(tween, tweenProgress, tweenPrecision);
+            const ns = tween._numbers;
+            const fn = tween._fromNumbers;
+            const tn = tween._toNumbers;
+            const omt = 1 - tweenProgress;
+            const fr = fn[0], fg = fn[1], fb = fn[2];
+            const tr = tn[0], tg = tn[1], tb = tn[2];
+            // RGB channels lerp in pseudo-linear space (square inputs, sqrt result) to approximate gamma-correct blending.
+            // See https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear.
+            ns[0] = /** @type {Number} */(tweenModifier(Math.sqrt(fr * fr * omt + tr * tr * tweenProgress)));
+            ns[1] = /** @type {Number} */(tweenModifier(Math.sqrt(fg * fg * omt + tg * tg * tweenProgress)));
+            ns[2] = /** @type {Number} */(tweenModifier(Math.sqrt(fb * fb * omt + tb * tb * tweenProgress)));
+            ns[3] = /** @type {Number} */(tweenModifier(lerp(fn[3], tn[3], tweenProgress)));
+            // The rgba string is built only for the dispatch path or the internalRender composition tick (setters handles the color comp)
+            if (!tween._setter || internalRender) {
+              value = `rgba(${round(ns[0], 0)},${round(ns[1], 0)},${round(ns[2], 0)},${ns[3]})`;
+            }
           } else if (tweenValueType === valueTypes.COMPLEX) {
             value = composeComplexValue(tween, tweenProgress, tweenPrecision);
           }
@@ -201,7 +244,9 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             const tweenProperty = tween.property;
             tweenTarget = tween.target;
 
-            if (tweenIsObject) {
+            if (tween._setter) {
+              tween._setter(tweenTarget, number, tween);
+            } else if (tweenIsObject) {
               tweenTarget[tweenProperty] = value;
             } else if (tweenType === tweenTypes.ATTRIBUTE) {
               /** @type {DOMTarget} */(tweenTarget).setAttribute(tweenProperty, /** @type {String} */(value));
@@ -229,6 +274,9 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             tween._value = value;
           }
 
+        } else if (tweenCurrentTime && tweenPrevRep && !tweenPrevRepIsCrossParent && iterationTime < tween._startTime) {
+          // Mark the keyframe as reverted when the playhead moves before its start, the previous keyframe owns the from revert and writes it once.
+          tween._currentTime = 0;
         }
 
         if (tweenTransformsNeedUpdate && tween._renderTransforms) {
@@ -336,6 +384,8 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
     forEachChildren(tl, (/** @type {JSAnimation} */child) => {
       const childTime = round((tlChildrenTime - child._offset) * child._speed, 12); // Rounding is needed when using seconds
+      // Skip past-end siblings on backward iteration so their progress=1 to-values don't render last and overwrite the active sibling's write. Compare against _delay + duration so children with a normalized delay are not skipped while still inside their active range.
+      if (tlIsRunningBackwards && childTime > child._delay + child.duration) return;
       const childTickMode = child._fps < tl._fps ? child.requestTick(tlCildrenTickTime) : tickMode;
       tlChildrenHasRendered += render(child, childTime, muteCallbacks, internalRender, childTickMode);
       if (!child.completed && tlChildrenHaveCompleted) tlChildrenHaveCompleted = false;

package/dist/modules/core/styles.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @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 values = require('./values.cjs');
 
 /**
  * @import {
@@ -76,7 +77,20 @@ const revertValues = (renderable, inlineStylesOnly = false) => {
       const tweenType = tween._tweenType;
       const originalInlinedValue = tween._inlineValue;
       const tweenHadNoInlineValue = helpers.isNil(originalInlinedValue) || originalInlinedValue === consts.emptyString;
-      if (tweenType === consts.tweenTypes.OBJECT) {
+      if (tween._setter) {
+        if (!inlineStylesOnly && !tweenHadNoInlineValue) {
+          // Re-seed the original value to the _number / _numbers props so the setter can write the original state instead of re-applying the current frame.
+          values.decomposeRawValue(originalInlinedValue, values.decomposedOriginalValue);
+          if (values.decomposedOriginalValue.d) {
+            const src = values.decomposedOriginalValue.d;
+            const dst = tween._numbers;
+            for (let i = 0, l = src.length; i < l; i++) dst[i] = src[i];
+          } else {
+            tween._number = values.decomposedOriginalValue.n;
+          }
+          tween._setter(tween.target, tween._number, tween);
+        }
+      } else if (tweenType === consts.tweenTypes.OBJECT) {
         if (!inlineStylesOnly && !tweenHadNoInlineValue) {
           tweenTarget[tweenProperty] = originalInlinedValue;
         }

package/dist/modules/core/styles.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -8,6 +8,7 @@
 import { tweenTypes, isDomSymbol, transformsSymbol, emptyString, shortTransforms } from './consts.js';
 import { forEachChildren, toLowerCase, isNil, isSvg } from './helpers.js';
 import { buildTransformString } from './transforms.js';
+import { decomposeRawValue, decomposedOriginalValue } from './values.js';
 
 /**
  * @import {
@@ -74,7 +75,20 @@ const revertValues = (renderable, inlineStylesOnly = false) => {
       const tweenType = tween._tweenType;
       const originalInlinedValue = tween._inlineValue;
       const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
-      if (tweenType === tweenTypes.OBJECT) {
+      if (tween._setter) {
+        if (!inlineStylesOnly && !tweenHadNoInlineValue) {
+          // Re-seed the original value to the _number / _numbers props so the setter can write the original state instead of re-applying the current frame.
+          decomposeRawValue(originalInlinedValue, decomposedOriginalValue);
+          if (decomposedOriginalValue.d) {
+            const src = decomposedOriginalValue.d;
+            const dst = tween._numbers;
+            for (let i = 0, l = src.length; i < l; i++) dst[i] = src[i];
+          } else {
+            tween._number = decomposedOriginalValue.n;
+          }
+          tween._setter(tween.target, tween._number, tween);
+        }
+      } else if (tweenType === tweenTypes.OBJECT) {
         if (!inlineStylesOnly && !tweenHadNoInlineValue) {
           tweenTarget[tweenProperty] = originalInlinedValue;
         }

package/dist/modules/core/targets.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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';