animejs 4.4.0 → 4.5.0

package/dist/modules/animation/animation.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - animation - CJS
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -11,6 +11,7 @@ var consts = require('../core/consts.cjs');
 var helpers = require('../core/helpers.cjs');
 var globals = require('../core/globals.cjs');
 var targets = require('../core/targets.cjs');
+var registry = require('../adapters/registry.cjs');
 var values = require('../core/values.cjs');
 var styles = require('../core/styles.cjs');
 var units = require('../core/units.cjs');
@@ -176,6 +177,11 @@ class JSAnimation extends timer.Timer {
 
     super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
 
+    /** @type {Tween} */
+    this._head;
+    /** @type {Tween} */
+    this._tail;
+
     ++JSAnimationId;
 
     const parsedTargets = targets.registerTargets(targets$1);
@@ -232,6 +238,7 @@ class JSAnimation extends timer.Timer {
         if (helpers.isKey(p)) {
 
           const tweenType = values.getTweenType(target, p);
+          const adapterProp = registry.resolveAdapterEntry(target, p);
 
           const propName = styles.sanitizePropertyName(p, target, tweenType);
 
@@ -315,7 +322,7 @@ class JSAnimation extends timer.Timer {
             } else {
               tweenToValue = computedToValue;
             }
-            const tweenFromValue = values.getFunctionValue(key.from, target, ti, tl, null, prevSiblingTween);
+            const tweenFromValue = values.getFunctionValue(key.from, target, ti, tl, fromFunctionStore, prevSiblingTween);
             const easeToParse = key.ease || tEasing;
 
             const easeFunctionResult = values.getFunctionValue(easeToParse, target, ti, tl, null, prevSiblingTween);
@@ -333,9 +340,13 @@ class JSAnimation extends timer.Timer {
             const hasToValue = !helpers.isUnd(tweenToValue);
             const isFromToArray = helpers.isArr(tweenToValue);
             const isFromToValue = isFromToArray || (hasFromvalue && hasToValue);
+            // Capture the update-start in local time, the previous sibling's end for keyframes after the first, zero for the first keyframe. Used to derive a precision-matched _absoluteUpdateStartTime below.
+            const tweenUpdateStartLocal = prevTween ? lastTweenChangeEndTime : 0;
             const tweenStartTime = prevTween ? lastTweenChangeEndTime + tweenDelay : tweenDelay;
             // Rounding is necessary here to minimize floating point errors when working in seconds
             const absoluteStartTime = helpers.round(absoluteOffsetTime + tweenStartTime, 12);
+            // Match the rounding pattern of prevSibling._absoluteEndTime so the composition overlap check compares cleanly when keyframes touch at a boundary.
+            const absoluteUpdateStartTime = helpers.round(absoluteOffsetTime + tweenUpdateStartLocal, 12);
 
             // Force a onRender callback if the animation contains at least one from value and autoplay is set to false
             if (!shouldTriggerRender && (hasFromvalue || isFromToArray)) shouldTriggerRender = 1;
@@ -344,9 +355,9 @@ class JSAnimation extends timer.Timer {
 
             if (tweenComposition !== consts.compositionTypes.none) {
               let nextSibling = siblings._head;
-              // Iterate trough all the next siblings until we find a sibling with an equal or inferior start time
-              while (nextSibling && !nextSibling._isOverridden && nextSibling._absoluteStartTime <= absoluteStartTime) {
-                prevSibling = nextSibling;
+              // Walk prior siblings up to the new tween, skipping overridden ones so the chain resolves to the latest live value instead of stopping at the first override.
+              while (nextSibling && nextSibling._absoluteStartTime <= absoluteStartTime) {
+                if (!nextSibling._isOverridden) prevSibling = nextSibling;
                 nextSibling = nextSibling._nextRep;
                 // Overrides all the next siblings if the next sibling starts at the same time of after as the new tween start time
                 if (nextSibling && nextSibling._absoluteStartTime >= absoluteStartTime) {
@@ -400,8 +411,8 @@ class JSAnimation extends timer.Timer {
                 if (prevTween) {
                   values.decomposeTweenValue(prevTween, fromTargetObject);
                 } else {
-                  values.decomposeRawValue(parent && prevSibling && prevSibling.parent.parent === parent ? prevSibling._value :
                   // No need to get and parse the original value if the tween is part of a timeline and has a previous sibling part of the same timeline
+                  values.decomposeRawValue(parent && prevSibling && prevSibling.parent.parent === parent ? prevSibling._value :
                   values.getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore), fromTargetObject);
                 }
               }
@@ -440,8 +451,7 @@ class JSAnimation extends timer.Timer {
                 const colorValue = fromTargetObject.t === consts.valueTypes.COLOR ? fromTargetObject : toTargetObject;
                 const notColorValue = fromTargetObject.t === consts.valueTypes.COLOR ? toTargetObject : fromTargetObject;
                 notColorValue.t = consts.valueTypes.COLOR;
-                notColorValue.s = colorValue.s;
-                notColorValue.d = [0, 0, 0, 1];
+                notColorValue.d = colorValue.d.map(() => 0);
               }
             }
 
@@ -471,6 +481,16 @@ class JSAnimation extends timer.Timer {
             let inlineValue = inlineStylesStore[propName];
             if (!helpers.isNil(inlineValue)) inlineStylesStore[propName] = null;
 
+            // Resolve the adapter setter once so render skips the lookup per frame.
+            const tweenSetter = adapterProp ? adapterProp.set : null;
+
+            // Rounding is necessary here to minimize floating point errors when working in seconds
+            lastTweenChangeEndTime = helpers.round(tweenStartTime + tweenUpdateDuration, 12);
+
+            const fromD = fromTargetObject.d;
+            const toD = toTargetObject.d;
+            const toS = toTargetObject.s;
+
             /** @type {Tween} */
             const tween = {
               parent: this,
@@ -481,12 +501,12 @@ class JSAnimation extends timer.Timer {
               _toFunc: toFunctionStore.func,
               _fromFunc: fromFunctionStore.func,
               _ease: parser.parseEase(tweenEasing),
-              _fromNumbers: helpers.cloneArray(fromTargetObject.d),
-              _toNumbers: helpers.cloneArray(toTargetObject.d),
-              _strings: helpers.cloneArray(toTargetObject.s),
+              _fromNumbers: fromD ? helpers.cloneArray(fromD) : consts.emptyArray,
+              _toNumbers: toD ? helpers.cloneArray(toD) : consts.emptyArray,
+              _strings: toS ? helpers.cloneArray(toS) : consts.emptyArray,
               _fromNumber: fromTargetObject.n,
               _toNumber: toTargetObject.n,
-              _numbers: helpers.cloneArray(fromTargetObject.d), // For additive tween and animatables
+              _numbers: fromD ? helpers.cloneArray(fromD) : consts.emptyArray, // For additive tween and animatables
               _number: fromTargetObject.n, // For additive tween and animatables
               _unit: toTargetObject.u,
               _modifier: tweenModifier,
@@ -496,8 +516,12 @@ class JSAnimation extends timer.Timer {
               _updateDuration: tweenUpdateDuration,
               _changeDuration: tweenUpdateDuration,
               _absoluteStartTime: absoluteStartTime,
+              _absoluteUpdateStartTime: absoluteUpdateStartTime,
+              _absoluteEndTime: helpers.round(absoluteOffsetTime + lastTweenChangeEndTime, 12),
+              _hasFromValue: hasFromvalue || isFromToArray ? 1 : 0,
               // NOTE: Investigate bit packing to stores ENUM / BOOL
               _tweenType: tweenType,
+              _setter: tweenSetter,
               _valueType: toTargetObject.t,
               _composition: tweenComposition,
               _isOverlapped: 0,
@@ -520,10 +544,11 @@ class JSAnimation extends timer.Timer {
             const vt = tween._valueType;
             if (vt === consts.valueTypes.COMPLEX) {
               tween._value = values.composeComplexValue(tween, 1, -1);
-            } else if (vt === consts.valueTypes.COLOR) {
-              tween._value = values.composeColorValue(tween, 1, -1);
             } else if (vt === consts.valueTypes.UNIT) {
               tween._value = `${tweenModifier(tween._toNumber)}${tween._unit}`;
+            } else if (vt === consts.valueTypes.COLOR) {
+              const d = toTargetObject.d;
+              tween._value = `rgba(${helpers.round(d[0], 0)},${helpers.round(d[1], 0)},${helpers.round(d[2], 0)},${d[3]})`;
             } else {
               tween._value = tweenModifier(tween._toNumber);
             }
@@ -531,8 +556,7 @@ class JSAnimation extends timer.Timer {
             if (isNaN(firstTweenChangeStartTime)) {
               firstTweenChangeStartTime = tween._startTime;
             }
-            // Rounding is necessary here to minimize floating point errors when working in seconds
-            lastTweenChangeEndTime = helpers.round(tweenStartTime + tweenUpdateDuration, 12);
+
             prevTween = tween;
             animationAnimationLength++;
 
@@ -638,8 +662,11 @@ class JSAnimation extends timer.Timer {
       tween._updateDuration = helpers.normalizeTime(tween._updateDuration * timeScale);
       tween._changeDuration = helpers.normalizeTime(tween._changeDuration * timeScale);
       tween._currentTime *= timeScale;
+      tween._delay *= timeScale;
       tween._startTime *= timeScale;
       tween._absoluteStartTime *= timeScale;
+      tween._absoluteUpdateStartTime *= timeScale;
+      tween._absoluteEndTime *= timeScale;
     });
     return super.stretch(newDuration);
   }

package/dist/modules/animation/animation.d.ts

@@ -9,6 +9,10 @@ export class JSAnimation extends Timer {
      * @param {TargetsArray} [allTargets]
      */
     constructor(targets: TargetsParam, parameters: AnimationParams, parent?: Timeline, parentPosition?: number, fastSet?: boolean, index?: number, allTargets?: TargetsArray);
+    /** @type {Tween} */
+    _head: Tween;
+    /** @type {Tween} */
+    _tail: Tween;
     /** @type {TargetsArray} */
     targets: TargetsArray;
     /** @type {Callback<this>} */
@@ -42,6 +46,7 @@ export class JSAnimation extends Timer {
 }
 export function animate(targets: TargetsParam, parameters: AnimationParams): JSAnimation;
 import { Timer } from '../timer/timer.js';
+import type { Tween } from '../types/index.js';
 import type { TargetsArray } from '../types/index.js';
 import type { Callback } from '../types/index.js';
 import type { EasingFunction } from '../types/index.js';

package/dist/modules/animation/animation.js

@@ -1,15 +1,16 @@
 /**
  * Anime.js - animation - ESM
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { K, compositionTypes, valueTypes, minValue, isDomSymbol, tweenTypes } from '../core/consts.js';
+import { K, compositionTypes, valueTypes, emptyArray, minValue, isDomSymbol, tweenTypes } from '../core/consts.js';
 import { mergeObjects, isUnd, isKey, isObj, cloneArray, isNil, round, addChild, forEachChildren, clampInfinity, normalizeTime, isArr, isNum, isFnc, isStr } from '../core/helpers.js';
 import { globals } from '../core/globals.js';
 import { registerTargets } from '../core/targets.js';
-import { setValue, getTweenType, getFunctionValue, decomposeRawValue, getOriginalAnimatableValue, createDecomposedValueTargetObject, decomposedOriginalValue, getRelativeValue, composeComplexValue, composeColorValue, decomposeTweenValue } from '../core/values.js';
+import { resolveAdapterEntry } from '../adapters/registry.js';
+import { setValue, getTweenType, getFunctionValue, decomposeRawValue, getOriginalAnimatableValue, createDecomposedValueTargetObject, decomposedOriginalValue, getRelativeValue, composeComplexValue, decomposeTweenValue } from '../core/values.js';
 import { sanitizePropertyName, revertValues } from '../core/styles.js';
 import { convertValueUnit } from '../core/units.js';
 import { parseEase } from '../easings/eases/parser.js';
@@ -174,6 +175,11 @@ class JSAnimation extends Timer {
 
     super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
 
+    /** @type {Tween} */
+    this._head;
+    /** @type {Tween} */
+    this._tail;
+
     ++JSAnimationId;
 
     const parsedTargets = registerTargets(targets);
@@ -230,6 +236,7 @@ class JSAnimation extends Timer {
         if (isKey(p)) {
 
           const tweenType = getTweenType(target, p);
+          const adapterProp = resolveAdapterEntry(target, p);
 
           const propName = sanitizePropertyName(p, target, tweenType);
 
@@ -313,7 +320,7 @@ class JSAnimation extends Timer {
             } else {
               tweenToValue = computedToValue;
             }
-            const tweenFromValue = getFunctionValue(key.from, target, ti, tl, null, prevSiblingTween);
+            const tweenFromValue = getFunctionValue(key.from, target, ti, tl, fromFunctionStore, prevSiblingTween);
             const easeToParse = key.ease || tEasing;
 
             const easeFunctionResult = getFunctionValue(easeToParse, target, ti, tl, null, prevSiblingTween);
@@ -331,9 +338,13 @@ class JSAnimation extends Timer {
             const hasToValue = !isUnd(tweenToValue);
             const isFromToArray = isArr(tweenToValue);
             const isFromToValue = isFromToArray || (hasFromvalue && hasToValue);
+            // Capture the update-start in local time, the previous sibling's end for keyframes after the first, zero for the first keyframe. Used to derive a precision-matched _absoluteUpdateStartTime below.
+            const tweenUpdateStartLocal = prevTween ? lastTweenChangeEndTime : 0;
             const tweenStartTime = prevTween ? lastTweenChangeEndTime + tweenDelay : tweenDelay;
             // Rounding is necessary here to minimize floating point errors when working in seconds
             const absoluteStartTime = round(absoluteOffsetTime + tweenStartTime, 12);
+            // Match the rounding pattern of prevSibling._absoluteEndTime so the composition overlap check compares cleanly when keyframes touch at a boundary.
+            const absoluteUpdateStartTime = round(absoluteOffsetTime + tweenUpdateStartLocal, 12);
 
             // Force a onRender callback if the animation contains at least one from value and autoplay is set to false
             if (!shouldTriggerRender && (hasFromvalue || isFromToArray)) shouldTriggerRender = 1;
@@ -342,9 +353,9 @@ class JSAnimation extends Timer {
 
             if (tweenComposition !== compositionTypes.none) {
               let nextSibling = siblings._head;
-              // Iterate trough all the next siblings until we find a sibling with an equal or inferior start time
-              while (nextSibling && !nextSibling._isOverridden && nextSibling._absoluteStartTime <= absoluteStartTime) {
-                prevSibling = nextSibling;
+              // Walk prior siblings up to the new tween, skipping overridden ones so the chain resolves to the latest live value instead of stopping at the first override.
+              while (nextSibling && nextSibling._absoluteStartTime <= absoluteStartTime) {
+                if (!nextSibling._isOverridden) prevSibling = nextSibling;
                 nextSibling = nextSibling._nextRep;
                 // Overrides all the next siblings if the next sibling starts at the same time of after as the new tween start time
                 if (nextSibling && nextSibling._absoluteStartTime >= absoluteStartTime) {
@@ -398,8 +409,8 @@ class JSAnimation extends Timer {
                 if (prevTween) {
                   decomposeTweenValue(prevTween, fromTargetObject);
                 } else {
-                  decomposeRawValue(parent && prevSibling && prevSibling.parent.parent === parent ? prevSibling._value :
                   // No need to get and parse the original value if the tween is part of a timeline and has a previous sibling part of the same timeline
+                  decomposeRawValue(parent && prevSibling && prevSibling.parent.parent === parent ? prevSibling._value :
                   getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore), fromTargetObject);
                 }
               }
@@ -438,8 +449,7 @@ class JSAnimation extends Timer {
                 const colorValue = fromTargetObject.t === valueTypes.COLOR ? fromTargetObject : toTargetObject;
                 const notColorValue = fromTargetObject.t === valueTypes.COLOR ? toTargetObject : fromTargetObject;
                 notColorValue.t = valueTypes.COLOR;
-                notColorValue.s = colorValue.s;
-                notColorValue.d = [0, 0, 0, 1];
+                notColorValue.d = colorValue.d.map(() => 0);
               }
             }
 
@@ -469,6 +479,16 @@ class JSAnimation extends Timer {
             let inlineValue = inlineStylesStore[propName];
             if (!isNil(inlineValue)) inlineStylesStore[propName] = null;
 
+            // Resolve the adapter setter once so render skips the lookup per frame.
+            const tweenSetter = adapterProp ? adapterProp.set : null;
+
+            // Rounding is necessary here to minimize floating point errors when working in seconds
+            lastTweenChangeEndTime = round(tweenStartTime + tweenUpdateDuration, 12);
+
+            const fromD = fromTargetObject.d;
+            const toD = toTargetObject.d;
+            const toS = toTargetObject.s;
+
             /** @type {Tween} */
             const tween = {
               parent: this,
@@ -479,12 +499,12 @@ class JSAnimation extends Timer {
               _toFunc: toFunctionStore.func,
               _fromFunc: fromFunctionStore.func,
               _ease: parseEase(tweenEasing),
-              _fromNumbers: cloneArray(fromTargetObject.d),
-              _toNumbers: cloneArray(toTargetObject.d),
-              _strings: cloneArray(toTargetObject.s),
+              _fromNumbers: fromD ? cloneArray(fromD) : emptyArray,
+              _toNumbers: toD ? cloneArray(toD) : emptyArray,
+              _strings: toS ? cloneArray(toS) : emptyArray,
               _fromNumber: fromTargetObject.n,
               _toNumber: toTargetObject.n,
-              _numbers: cloneArray(fromTargetObject.d), // For additive tween and animatables
+              _numbers: fromD ? cloneArray(fromD) : emptyArray, // For additive tween and animatables
               _number: fromTargetObject.n, // For additive tween and animatables
               _unit: toTargetObject.u,
               _modifier: tweenModifier,
@@ -494,8 +514,12 @@ class JSAnimation extends Timer {
               _updateDuration: tweenUpdateDuration,
               _changeDuration: tweenUpdateDuration,
               _absoluteStartTime: absoluteStartTime,
+              _absoluteUpdateStartTime: absoluteUpdateStartTime,
+              _absoluteEndTime: round(absoluteOffsetTime + lastTweenChangeEndTime, 12),
+              _hasFromValue: hasFromvalue || isFromToArray ? 1 : 0,
               // NOTE: Investigate bit packing to stores ENUM / BOOL
               _tweenType: tweenType,
+              _setter: tweenSetter,
               _valueType: toTargetObject.t,
               _composition: tweenComposition,
               _isOverlapped: 0,
@@ -518,10 +542,11 @@ class JSAnimation extends Timer {
             const vt = tween._valueType;
             if (vt === valueTypes.COMPLEX) {
               tween._value = composeComplexValue(tween, 1, -1);
-            } else if (vt === valueTypes.COLOR) {
-              tween._value = composeColorValue(tween, 1, -1);
             } else if (vt === valueTypes.UNIT) {
               tween._value = `${tweenModifier(tween._toNumber)}${tween._unit}`;
+            } else if (vt === valueTypes.COLOR) {
+              const d = toTargetObject.d;
+              tween._value = `rgba(${round(d[0], 0)},${round(d[1], 0)},${round(d[2], 0)},${d[3]})`;
             } else {
               tween._value = tweenModifier(tween._toNumber);
             }
@@ -529,8 +554,7 @@ class JSAnimation extends Timer {
             if (isNaN(firstTweenChangeStartTime)) {
               firstTweenChangeStartTime = tween._startTime;
             }
-            // Rounding is necessary here to minimize floating point errors when working in seconds
-            lastTweenChangeEndTime = round(tweenStartTime + tweenUpdateDuration, 12);
+
             prevTween = tween;
             animationAnimationLength++;
 
@@ -636,8 +660,11 @@ class JSAnimation extends Timer {
       tween._updateDuration = normalizeTime(tween._updateDuration * timeScale);
       tween._changeDuration = normalizeTime(tween._changeDuration * timeScale);
       tween._currentTime *= timeScale;
+      tween._delay *= timeScale;
       tween._startTime *= timeScale;
       tween._absoluteStartTime *= timeScale;
+      tween._absoluteUpdateStartTime *= timeScale;
+      tween._absoluteEndTime *= timeScale;
     });
     return super.stretch(newDuration);
   }

package/dist/modules/animation/composition.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - animation - CJS
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -98,7 +98,7 @@ const composeTween = (tween, siblings) => {
     if (prevSibling) {
 
       const prevParent = prevSibling.parent;
-      const prevAbsEndTime = prevSibling._absoluteStartTime + prevSibling._changeDuration;
+      const prevAbsEndTime = prevSibling._absoluteEndTime;
 
       // Handle looped animations tween
 
@@ -124,7 +124,8 @@ const composeTween = (tween, siblings) => {
 
       }
 
-      const absoluteUpdateStartTime = tweenAbsStartTime - tween._delay;
+      // Read the precision-matched update-start instead of subtracting tween._delay live so sequential keyframes touching at a boundary don't trigger a phantom overlap from float drift.
+      const absoluteUpdateStartTime = tween._absoluteUpdateStartTime;
 
       if (prevAbsEndTime > absoluteUpdateStartTime) {
 
@@ -144,37 +145,41 @@ const composeTween = (tween, siblings) => {
         }
       }
 
-      // Pause (and cancel) the parent if it only contains overlapped tweens
+      // Skip the cancel cascade when both tweens share the same parent timeline, a timeline cannot replace itself.
+      const tweenParentTL = tween.parent.parent;
+      if (!tweenParentTL || tweenParentTL !== prevParent.parent) {
 
-      let pausePrevParentAnimation = true;
+        let pausePrevParentAnimation = true;
 
-      helpers.forEachChildren(prevParent, (/** @type Tween */t) => {
-        if (!t._isOverlapped) pausePrevParentAnimation = false;
-      });
+        helpers.forEachChildren(prevParent, (/** @type Tween */t) => {
+          if (!t._isOverlapped) pausePrevParentAnimation = false;
+        });
 
-      if (pausePrevParentAnimation) {
-        const prevParentTL = prevParent.parent;
-        if (prevParentTL) {
-          let pausePrevParentTL = true;
-          helpers.forEachChildren(prevParentTL, (/** @type JSAnimation */a) => {
-            if (a !== prevParent) {
-              helpers.forEachChildren(a, (/** @type Tween */t) => {
-                if (!t._isOverlapped) pausePrevParentTL = false;
-              });
+        if (pausePrevParentAnimation) {
+          const prevParentTL = prevParent.parent;
+          if (prevParentTL) {
+            let pausePrevParentTL = true;
+            helpers.forEachChildren(prevParentTL, (/** @type JSAnimation */a) => {
+              if (a !== prevParent) {
+                helpers.forEachChildren(a, (/** @type Tween */t) => {
+                  if (!t._isOverlapped) pausePrevParentTL = false;
+                });
+              }
+            });
+            if (pausePrevParentTL) {
+              prevParentTL.cancel();
             }
-          });
-          if (pausePrevParentTL) {
-            prevParentTL.cancel();
+          } else {
+            prevParent.cancel();
+            // Previously, calling .cancel() on a timeline child would affect the render order of other children
+            // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
+            // This is no longer needed since timeline tween composition is now handled separately
+            // Keeping this here for reference
+            // prevParent.completed = true;
+            // prevParent.pause();
           }
-        } else {
-          prevParent.cancel();
-          // Previously, calling .cancel() on a timeline child would affect the render order of other children
-          // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
-          // This is no longer needed since timeline tween composition is now handled separately
-          // Keeping this here for reference
-          // prevParent.completed = true;
-          // prevParent.pause();
         }
+
       }
 
     }
@@ -229,14 +234,12 @@ const composeTween = (tween, siblings) => {
     tween._number = 0;
     lookupTween._fromNumber = toNumber;
 
-    if (tween._toNumbers) {
+    if (tween._toNumbers.length) {
       const toNumbers = helpers.cloneArray(tween._toNumbers);
-      if (toNumbers) {
-        toNumbers.forEach((value, i) => {
-          tween._fromNumbers[i] = lookupTween._fromNumbers[i] - value;
-          tween._toNumbers[i] = 0;
-        });
-      }
+      toNumbers.forEach((value, i) => {
+        tween._fromNumbers[i] = lookupTween._fromNumbers[i] - value;
+        tween._toNumbers[i] = 0;
+      });
       lookupTween._fromNumbers = toNumbers;
     }
 

package/dist/modules/animation/composition.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - animation - ESM
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -96,7 +96,7 @@ const composeTween = (tween, siblings) => {
     if (prevSibling) {
 
       const prevParent = prevSibling.parent;
-      const prevAbsEndTime = prevSibling._absoluteStartTime + prevSibling._changeDuration;
+      const prevAbsEndTime = prevSibling._absoluteEndTime;
 
       // Handle looped animations tween
 
@@ -122,7 +122,8 @@ const composeTween = (tween, siblings) => {
 
       }
 
-      const absoluteUpdateStartTime = tweenAbsStartTime - tween._delay;
+      // Read the precision-matched update-start instead of subtracting tween._delay live so sequential keyframes touching at a boundary don't trigger a phantom overlap from float drift.
+      const absoluteUpdateStartTime = tween._absoluteUpdateStartTime;
 
       if (prevAbsEndTime > absoluteUpdateStartTime) {
 
@@ -142,37 +143,41 @@ const composeTween = (tween, siblings) => {
         }
       }
 
-      // Pause (and cancel) the parent if it only contains overlapped tweens
+      // Skip the cancel cascade when both tweens share the same parent timeline, a timeline cannot replace itself.
+      const tweenParentTL = tween.parent.parent;
+      if (!tweenParentTL || tweenParentTL !== prevParent.parent) {
 
-      let pausePrevParentAnimation = true;
+        let pausePrevParentAnimation = true;
 
-      forEachChildren(prevParent, (/** @type Tween */t) => {
-        if (!t._isOverlapped) pausePrevParentAnimation = false;
-      });
+        forEachChildren(prevParent, (/** @type Tween */t) => {
+          if (!t._isOverlapped) pausePrevParentAnimation = false;
+        });
 
-      if (pausePrevParentAnimation) {
-        const prevParentTL = prevParent.parent;
-        if (prevParentTL) {
-          let pausePrevParentTL = true;
-          forEachChildren(prevParentTL, (/** @type JSAnimation */a) => {
-            if (a !== prevParent) {
-              forEachChildren(a, (/** @type Tween */t) => {
-                if (!t._isOverlapped) pausePrevParentTL = false;
-              });
+        if (pausePrevParentAnimation) {
+          const prevParentTL = prevParent.parent;
+          if (prevParentTL) {
+            let pausePrevParentTL = true;
+            forEachChildren(prevParentTL, (/** @type JSAnimation */a) => {
+              if (a !== prevParent) {
+                forEachChildren(a, (/** @type Tween */t) => {
+                  if (!t._isOverlapped) pausePrevParentTL = false;
+                });
+              }
+            });
+            if (pausePrevParentTL) {
+              prevParentTL.cancel();
             }
-          });
-          if (pausePrevParentTL) {
-            prevParentTL.cancel();
+          } else {
+            prevParent.cancel();
+            // Previously, calling .cancel() on a timeline child would affect the render order of other children
+            // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
+            // This is no longer needed since timeline tween composition is now handled separately
+            // Keeping this here for reference
+            // prevParent.completed = true;
+            // prevParent.pause();
           }
-        } else {
-          prevParent.cancel();
-          // Previously, calling .cancel() on a timeline child would affect the render order of other children
-          // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
-          // This is no longer needed since timeline tween composition is now handled separately
-          // Keeping this here for reference
-          // prevParent.completed = true;
-          // prevParent.pause();
         }
+
       }
 
     }
@@ -227,14 +232,12 @@ const composeTween = (tween, siblings) => {
     tween._number = 0;
     lookupTween._fromNumber = toNumber;
 
-    if (tween._toNumbers) {
+    if (tween._toNumbers.length) {
       const toNumbers = cloneArray(tween._toNumbers);
-      if (toNumbers) {
-        toNumbers.forEach((value, i) => {
-          tween._fromNumbers[i] = lookupTween._fromNumbers[i] - value;
-          tween._toNumbers[i] = 0;
-        });
-      }
+      toNumbers.forEach((value, i) => {
+        tween._fromNumbers[i] = lookupTween._fromNumbers[i] - value;
+        tween._toNumbers[i] = 0;
+      });
       lookupTween._fromNumbers = toNumbers;
     }
 

package/dist/modules/animation/index.cjs

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

package/dist/modules/animation/index.js

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