animejs 4.4.0 → 4.5.0

package/dist/modules/core/render.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -76,12 +76,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 = helpers.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
@@ -113,12 +115,14 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   if (
     forcedTick ||
     tickMode === consts.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
   ) {
@@ -134,7 +138,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.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 = helpers.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);
@@ -153,15 +158,38 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
         const tweenNextRep = tween._nextRep;
         const tweenPrevRep = tween._prevRep;
         const tweenHasComposition = tweenComposition !== consts.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))))
           ))
         ) {
 
@@ -172,7 +200,7 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
           const tweenType = tween._tweenType;
           const tweenIsObject = tweenType === consts.tweenTypes.OBJECT;
           const tweenIsNumber = tweenValueType === consts.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.globals.precision;
 
           // Recompose tween value
@@ -188,7 +216,22 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             number = /** @type {Number} */(tweenModifier(helpers.round(helpers.lerp(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision)));
             value = `${number}${tween._unit}`;
           } else if (tweenValueType === consts.valueTypes.COLOR) {
-            value = values.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(helpers.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(${helpers.round(ns[0], 0)},${helpers.round(ns[1], 0)},${helpers.round(ns[2], 0)},${ns[3]})`;
+            }
           } else if (tweenValueType === consts.valueTypes.COMPLEX) {
             value = values.composeComplexValue(tween, tweenProgress, tweenPrecision);
           }
@@ -203,7 +246,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 === consts.tweenTypes.ATTRIBUTE) {
               /** @type {DOMTarget} */(tweenTarget).setAttribute(tweenProperty, /** @type {String} */(value));
@@ -231,6 +276,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) {
@@ -291,50 +339,6 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   return hasRendered;
 };
 
-// Shared context for extracted forEachChildren callbacks in tick()
-// Avoids closure allocation every frame
-
-let renderCtxChildrenTime = 0;
-let renderCtxTlFps = 0;
-let renderCtxTickTime = 0;
-let renderCtxTickMode = 0;
-let renderCtxMuteCallbacks = 0;
-let renderCtxInternalRender = 0;
-let renderCtxChildrenHasRendered = 0;
-let renderCtxChildrenHaveCompleted = true;
-let loopCtxIsRunningBackwards = false;
-let loopCtxIterationDuration = 0;
-let loopCtxMuteCallbacks = 0;
-
-/** @param {JSAnimation} child */
-const tickLoopChild = (child) => {
-  if (!loopCtxIsRunningBackwards) {
-    // Force an internal render to trigger the callbacks if the child has not completed on loop
-    if (!child.completed && !child.backwards && child._currentTime < child.iterationDuration) {
-      render(child, loopCtxIterationDuration, loopCtxMuteCallbacks, 1, consts.tickModes.FORCE);
-    }
-    // Reset their began and completed flags to allow retrigering callbacks on the next iteration
-    child.began = false;
-    child.completed = false;
-  } else {
-    const childDuration = child.duration;
-    const childStartTime = child._offset + child._delay;
-    const childEndTime = childStartTime + childDuration;
-    // Triggers the onComplete callback on reverse for children on the edges of the timeline
-    if (!loopCtxMuteCallbacks && childDuration <= consts.minValue && (!childStartTime || childEndTime === loopCtxIterationDuration)) {
-      child.onComplete(child);
-    }
-  }
-};
-
-/** @param {JSAnimation} child */
-const tickRenderChild = (child) => {
-  const childTime = helpers.round((renderCtxChildrenTime - child._offset) * child._speed, 12); // Rounding is needed when using seconds
-  const childTickMode = child._fps < renderCtxTlFps ? child.requestTick(renderCtxTickTime) : renderCtxTickMode;
-  renderCtxChildrenHasRendered += render(child, childTime, renderCtxMuteCallbacks, renderCtxInternalRender, childTickMode);
-  if (!child.completed && renderCtxChildrenHaveCompleted) renderCtxChildrenHaveCompleted = false;
-};
-
 /**
  * @param  {Tickable} tickable
  * @param  {Number} time
@@ -351,28 +355,44 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
     const tlIsRunningBackwards = tl.backwards;
     const tlChildrenTime = internalRender ? time : tl._iterationTime;
     const tlCildrenTickTime = helpers.now();
+
     let tlChildrenHasRendered = 0;
     let tlChildrenHaveCompleted = true;
+
     // If the timeline has looped forward, we need to manually triggers children skipped callbacks
     if (!internalRender && tl._currentIteration !== _currentIteration) {
       const tlIterationDuration = tl.iterationDuration;
-      loopCtxIsRunningBackwards = tlIsRunningBackwards;
-      loopCtxIterationDuration = tlIterationDuration;
-      loopCtxMuteCallbacks = muteCallbacks;
-      helpers.forEachChildren(tl, tickLoopChild);
+      helpers.forEachChildren(tl, (/** @type {JSAnimation} */child) => {
+        if (!tlIsRunningBackwards) {
+          // Force an internal render to trigger the callbacks if the child has not completed on loop
+          if (!child.completed && !child.backwards && child._currentTime < child.iterationDuration) {
+            render(child, tlIterationDuration, muteCallbacks, 1, consts.tickModes.FORCE);
+          }
+          // Reset their began and completed flags to allow retrigering callbacks on the next iteration
+          child.began = false;
+          child.completed = false;
+        } else {
+          const childDuration = child.duration;
+          const childStartTime = child._offset + child._delay;
+          const childEndTime = childStartTime + childDuration;
+          // Triggers the onComplete callback on reverse for children on the edges of the timeline
+          if (!muteCallbacks && childDuration <= consts.minValue && (!childStartTime || childEndTime === tlIterationDuration)) {
+            child.onComplete(child);
+          }
+        }
+      });
       if (!muteCallbacks) tl.onLoop(/** @type {CallbackArgument} */(tl));
     }
-    renderCtxChildrenTime = tlChildrenTime;
-    renderCtxTlFps = tl._fps;
-    renderCtxTickTime = tlCildrenTickTime;
-    renderCtxTickMode = tickMode;
-    renderCtxMuteCallbacks = muteCallbacks;
-    renderCtxInternalRender = internalRender;
-    renderCtxChildrenHasRendered = 0;
-    renderCtxChildrenHaveCompleted = true;
-    helpers.forEachChildren(tl, tickRenderChild, tlIsRunningBackwards);
-    tlChildrenHasRendered = renderCtxChildrenHasRendered;
-    tlChildrenHaveCompleted = renderCtxChildrenHaveCompleted;
+
+    helpers.forEachChildren(tl, (/** @type {JSAnimation} */child) => {
+      const childTime = helpers.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;
+    }, tlIsRunningBackwards);
+
     // Renders on timeline are triggered by its children so it needs to be set after rendering the children
     if (!muteCallbacks && tlChildrenHasRendered) tl.onRender(/** @type {CallbackArgument} */(tl));
     // Triggers the timeline onComplete() once all chindren all completed and the current time has reached the end

package/dist/modules/core/render.js

@@ -1,15 +1,15 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.0
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 import { globals } from './globals.js';
-import { tickModes, valueTypes, compositionTypes, tweenTypes, transformsSymbol, minValue } from './consts.js';
-import { forEachChildren, clamp, round, lerp, now } from './helpers.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) {
@@ -289,50 +337,6 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   return hasRendered;
 };
 
-// Shared context for extracted forEachChildren callbacks in tick()
-// Avoids closure allocation every frame
-
-let renderCtxChildrenTime = 0;
-let renderCtxTlFps = 0;
-let renderCtxTickTime = 0;
-let renderCtxTickMode = 0;
-let renderCtxMuteCallbacks = 0;
-let renderCtxInternalRender = 0;
-let renderCtxChildrenHasRendered = 0;
-let renderCtxChildrenHaveCompleted = true;
-let loopCtxIsRunningBackwards = false;
-let loopCtxIterationDuration = 0;
-let loopCtxMuteCallbacks = 0;
-
-/** @param {JSAnimation} child */
-const tickLoopChild = (child) => {
-  if (!loopCtxIsRunningBackwards) {
-    // Force an internal render to trigger the callbacks if the child has not completed on loop
-    if (!child.completed && !child.backwards && child._currentTime < child.iterationDuration) {
-      render(child, loopCtxIterationDuration, loopCtxMuteCallbacks, 1, tickModes.FORCE);
-    }
-    // Reset their began and completed flags to allow retrigering callbacks on the next iteration
-    child.began = false;
-    child.completed = false;
-  } else {
-    const childDuration = child.duration;
-    const childStartTime = child._offset + child._delay;
-    const childEndTime = childStartTime + childDuration;
-    // Triggers the onComplete callback on reverse for children on the edges of the timeline
-    if (!loopCtxMuteCallbacks && childDuration <= minValue && (!childStartTime || childEndTime === loopCtxIterationDuration)) {
-      child.onComplete(child);
-    }
-  }
-};
-
-/** @param {JSAnimation} child */
-const tickRenderChild = (child) => {
-  const childTime = round((renderCtxChildrenTime - child._offset) * child._speed, 12); // Rounding is needed when using seconds
-  const childTickMode = child._fps < renderCtxTlFps ? child.requestTick(renderCtxTickTime) : renderCtxTickMode;
-  renderCtxChildrenHasRendered += render(child, childTime, renderCtxMuteCallbacks, renderCtxInternalRender, childTickMode);
-  if (!child.completed && renderCtxChildrenHaveCompleted) renderCtxChildrenHaveCompleted = false;
-};
-
 /**
  * @param  {Tickable} tickable
  * @param  {Number} time
@@ -349,28 +353,44 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
     const tlIsRunningBackwards = tl.backwards;
     const tlChildrenTime = internalRender ? time : tl._iterationTime;
     const tlCildrenTickTime = now();
+
     let tlChildrenHasRendered = 0;
     let tlChildrenHaveCompleted = true;
+
     // If the timeline has looped forward, we need to manually triggers children skipped callbacks
     if (!internalRender && tl._currentIteration !== _currentIteration) {
       const tlIterationDuration = tl.iterationDuration;
-      loopCtxIsRunningBackwards = tlIsRunningBackwards;
-      loopCtxIterationDuration = tlIterationDuration;
-      loopCtxMuteCallbacks = muteCallbacks;
-      forEachChildren(tl, tickLoopChild);
+      forEachChildren(tl, (/** @type {JSAnimation} */child) => {
+        if (!tlIsRunningBackwards) {
+          // Force an internal render to trigger the callbacks if the child has not completed on loop
+          if (!child.completed && !child.backwards && child._currentTime < child.iterationDuration) {
+            render(child, tlIterationDuration, muteCallbacks, 1, tickModes.FORCE);
+          }
+          // Reset their began and completed flags to allow retrigering callbacks on the next iteration
+          child.began = false;
+          child.completed = false;
+        } else {
+          const childDuration = child.duration;
+          const childStartTime = child._offset + child._delay;
+          const childEndTime = childStartTime + childDuration;
+          // Triggers the onComplete callback on reverse for children on the edges of the timeline
+          if (!muteCallbacks && childDuration <= minValue && (!childStartTime || childEndTime === tlIterationDuration)) {
+            child.onComplete(child);
+          }
+        }
+      });
       if (!muteCallbacks) tl.onLoop(/** @type {CallbackArgument} */(tl));
     }
-    renderCtxChildrenTime = tlChildrenTime;
-    renderCtxTlFps = tl._fps;
-    renderCtxTickTime = tlCildrenTickTime;
-    renderCtxTickMode = tickMode;
-    renderCtxMuteCallbacks = muteCallbacks;
-    renderCtxInternalRender = internalRender;
-    renderCtxChildrenHasRendered = 0;
-    renderCtxChildrenHaveCompleted = true;
-    forEachChildren(tl, tickRenderChild, tlIsRunningBackwards);
-    tlChildrenHasRendered = renderCtxChildrenHasRendered;
-    tlChildrenHaveCompleted = renderCtxChildrenHaveCompleted;
+
+    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;
+    }, tlIsRunningBackwards);
+
     // Renders on timeline are triggered by its children so it needs to be set after rendering the children
     if (!muteCallbacks && tlChildrenHasRendered) tl.onRender(/** @type {CallbackArgument} */(tl));
     // Triggers the timeline onComplete() once all chindren all completed and the current time has reached the end

package/dist/modules/core/styles.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 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.0
+ * @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;
         }