animejs 4.4.1 → 4.5.0

package/dist/modules/core/clock.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -36,8 +36,6 @@ class Clock {
     /** @type {Number} */
     this._lastTime = initTime;
     /** @type {Number} */
-    this._scheduledTime = 0;
-    /** @type {Number} */
     this._frameDuration = consts.K / consts.maxFps;
     /** @type {Number} */
     this._fps = consts.maxFps;
@@ -56,14 +54,12 @@ class Clock {
   }
 
   set fps(frameRate) {
-    const previousFrameDuration = this._frameDuration;
     const fr = +frameRate;
     const fps = fr < consts.minValue ? consts.minValue : fr;
     const frameDuration = consts.K / fps;
     if (fps > globals.defaults.frameRate) globals.defaults.frameRate = fps;
     this._fps = fps;
     this._frameDuration = frameDuration;
-    this._scheduledTime += frameDuration - previousFrameDuration;
   }
 
   get speed() {
@@ -80,17 +76,17 @@ class Clock {
    * @return {tickModes}
    */
   requestTick(time) {
-    const scheduledTime = this._scheduledTime;
-    this._lastTickTime = time;
-    // If the current time is lower than the scheduled time
-    // this means not enough time has passed to hit one frameDuration
-    // so skip that frame
-    if (time < scheduledTime) return consts.tickModes.NONE;
     const frameDuration = this._frameDuration;
-    const frameDelta = time - scheduledTime;
-    // Ensures that _scheduledTime progresses in steps of at least 1 frameDuration.
-    // Skips ahead if the actual elapsed time is higher.
-    this._scheduledTime += frameDelta < frameDuration ? frameDuration : frameDelta;
+    const elapsed = time - this._lastTickTime;
+    const scaled = frameDuration * .25;
+    const tolerance = scaled < 4 ? scaled : 4;
+    // Tolerance prevents dropping frames that arrive a bit early due to RAF jitter
+    // typically <= ~25% of frame duration and capped at 4ms so it doesn't dominate at high fps.
+    // e.g. at 60fps (frameDuration=16.667ms) a frame arriving after 15ms:
+    // - without tolerance: 15 < 16.667 -> skip
+    // - with tolerance: 15 + 4 >= 16.667 -> tick
+    if (elapsed + tolerance < frameDuration) return consts.tickModes.NONE;
+    this._lastTickTime = elapsed >= frameDuration ? time - (elapsed % frameDuration) : time;
     return consts.tickModes.AUTO;
   }
 

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

@@ -18,8 +18,6 @@ export class Clock {
     /** @type {Number} */
     _lastTime: number;
     /** @type {Number} */
-    _scheduledTime: number;
-    /** @type {Number} */
     _frameDuration: number;
     /** @type {Number} */
     _fps: number;

package/dist/modules/core/clock.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -34,8 +34,6 @@ class Clock {
     /** @type {Number} */
     this._lastTime = initTime;
     /** @type {Number} */
-    this._scheduledTime = 0;
-    /** @type {Number} */
     this._frameDuration = K / maxFps;
     /** @type {Number} */
     this._fps = maxFps;
@@ -54,14 +52,12 @@ class Clock {
   }
 
   set fps(frameRate) {
-    const previousFrameDuration = this._frameDuration;
     const fr = +frameRate;
     const fps = fr < minValue ? minValue : fr;
     const frameDuration = K / fps;
     if (fps > defaults.frameRate) defaults.frameRate = fps;
     this._fps = fps;
     this._frameDuration = frameDuration;
-    this._scheduledTime += frameDuration - previousFrameDuration;
   }
 
   get speed() {
@@ -78,17 +74,17 @@ class Clock {
    * @return {tickModes}
    */
   requestTick(time) {
-    const scheduledTime = this._scheduledTime;
-    this._lastTickTime = time;
-    // If the current time is lower than the scheduled time
-    // this means not enough time has passed to hit one frameDuration
-    // so skip that frame
-    if (time < scheduledTime) return tickModes.NONE;
     const frameDuration = this._frameDuration;
-    const frameDelta = time - scheduledTime;
-    // Ensures that _scheduledTime progresses in steps of at least 1 frameDuration.
-    // Skips ahead if the actual elapsed time is higher.
-    this._scheduledTime += frameDelta < frameDuration ? frameDuration : frameDelta;
+    const elapsed = time - this._lastTickTime;
+    const scaled = frameDuration * .25;
+    const tolerance = scaled < 4 ? scaled : 4;
+    // Tolerance prevents dropping frames that arrive a bit early due to RAF jitter
+    // typically <= ~25% of frame duration and capped at 4ms so it doesn't dominate at high fps.
+    // e.g. at 60fps (frameDuration=16.667ms) a frame arriving after 15ms:
+    // - without tolerance: 15 < 16.667 -> skip
+    // - with tolerance: 15 + 4 >= 16.667 -> tick
+    if (elapsed + tolerance < frameDuration) return tickModes.NONE;
+    this._lastTickTime = elapsed >= frameDuration ? time - (elapsed % frameDuration) : time;
     return tickModes.AUTO;
   }
 

package/dist/modules/core/colors.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/colors.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/consts.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -73,6 +73,11 @@ const maxFps = 240;
 const emptyString = '';
 const cssVarPrefix = 'var(';
 
+// Arrays
+
+// Shared sentinel for tween slots that don't hold array data. Never mutated, only read; COMPLEX and COLOR tweens always replace the slot before writing.
+const emptyArray = [];
+
 const shortTransforms = /*#__PURE__*/ (() => {
   const map = new Map();
   map.set('x', 'translateX');
@@ -106,6 +111,13 @@ const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) =>
 /** @return {void} */
 const noop = () => {};
 
+/**
+ * @template T
+ * @param  {T} v
+ * @return {T}
+ */
+const noopModifier = v => v;
+
 // Regex
 
 const validRgbHslRgx = /\)\s*[-.\d]/;
@@ -128,6 +140,7 @@ exports.cssVarPrefix = cssVarPrefix;
 exports.cssVariableMatchRgx = cssVariableMatchRgx;
 exports.digitWithExponentRgx = digitWithExponentRgx;
 exports.doc = doc;
+exports.emptyArray = emptyArray;
 exports.emptyString = emptyString;
 exports.hexTestRgx = hexTestRgx;
 exports.hslExecRgx = hslExecRgx;
@@ -141,6 +154,7 @@ exports.maxFps = maxFps;
 exports.maxValue = maxValue;
 exports.minValue = minValue;
 exports.noop = noop;
+exports.noopModifier = noopModifier;
 exports.proxyTargetSymbol = proxyTargetSymbol;
 exports.relativeValuesExecRgx = relativeValuesExecRgx;
 exports.rgbExecRgx = rgbExecRgx;

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

@@ -43,10 +43,12 @@ export const K: 1000;
 export const maxFps: 240;
 export const emptyString: "";
 export const cssVarPrefix: "var(";
+export const emptyArray: any[];
 export const shortTransforms: Map<any, any>;
 export const validTransforms: string[];
 export const transformsFragmentStrings: {};
 export function noop(): void;
+export function noopModifier<T>(v: T): T;
 export const validRgbHslRgx: RegExp;
 export const hexTestRgx: RegExp;
 export const rgbExecRgx: RegExp;

package/dist/modules/core/consts.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -71,6 +71,11 @@ const maxFps = 240;
 const emptyString = '';
 const cssVarPrefix = 'var(';
 
+// Arrays
+
+// Shared sentinel for tween slots that don't hold array data. Never mutated, only read; COMPLEX and COLOR tweens always replace the slot before writing.
+const emptyArray = [];
+
 const shortTransforms = /*#__PURE__*/ (() => {
   const map = new Map();
   map.set('x', 'translateX');
@@ -104,6 +109,13 @@ const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) =>
 /** @return {void} */
 const noop = () => {};
 
+/**
+ * @template T
+ * @param  {T} v
+ * @return {T}
+ */
+const noopModifier = v => v;
+
 // Regex
 
 const validRgbHslRgx = /\)\s*[-.\d]/;
@@ -120,4 +132,4 @@ const lowerCaseRgx = /([a-z])([A-Z])/g;
 const relativeValuesExecRgx = /(\*=|\+=|-=)/;
 const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
 
-export { K, compositionTypes, cssVarPrefix, cssVariableMatchRgx, digitWithExponentRgx, doc, emptyString, hexTestRgx, hslExecRgx, hslaExecRgx, isBrowser, isDomSymbol, isRegisteredTargetSymbol, isSvgSymbol, lowerCaseRgx, maxFps, maxValue, minValue, noop, proxyTargetSymbol, relativeValuesExecRgx, rgbExecRgx, rgbaExecRgx, shortTransforms, tickModes, transformsFragmentStrings, transformsSymbol, tweenTypes, unitsExecRgx, validRgbHslRgx, validTransforms, valueTypes, win };
+export { K, compositionTypes, cssVarPrefix, cssVariableMatchRgx, digitWithExponentRgx, doc, emptyArray, emptyString, hexTestRgx, hslExecRgx, hslaExecRgx, isBrowser, isDomSymbol, isRegisteredTargetSymbol, isSvgSymbol, lowerCaseRgx, maxFps, maxValue, minValue, noop, noopModifier, proxyTargetSymbol, relativeValuesExecRgx, rgbExecRgx, rgbaExecRgx, shortTransforms, tickModes, transformsFragmentStrings, transformsSymbol, tweenTypes, unitsExecRgx, validRgbHslRgx, validTransforms, valueTypes, win };

package/dist/modules/core/globals.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -23,10 +23,13 @@ var consts = require('./consts.cjs');
 /**
  * @typedef {Object} EditorGlobals
  * @property {boolean} showPanel
- * @property {boolean} synced
  * @property {Function} addAnimation
+ * @property {Function} addSet
  * @property {Function} addTimeline
  * @property {Function} addTimelineChild
+ * @property {Function} addTimelineLabel
+ * @property {Function} addTimelineCall
+ * @property {Function} addTimelineSync
  * @property {Function} resolveStagger
  * @property {Object|null} _head
  * @property {Object|null} _tail
@@ -49,7 +52,7 @@ const defaults = {
   loopDelay: 0,
   ease: 'out(2)',
   composition: consts.compositionTypes.replace,
-  modifier: v => v,
+  modifier: consts.noopModifier,
   onBegin: consts.noop,
   onBeforeUpdate: consts.noop,
   onUpdate: consts.noop,
@@ -79,7 +82,7 @@ const globals = {
   editor: null,
 };
 
-const globalVersions = { version: '4.4.1', engine: null };
+const globalVersions = { version: '4.5.0', engine: null };
 
 if (consts.isBrowser) {
   if (!consts.win.AnimeJS) consts.win.AnimeJS = [];

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

@@ -11,10 +11,13 @@
 /**
  * @typedef {Object} EditorGlobals
  * @property {boolean} showPanel
- * @property {boolean} synced
  * @property {Function} addAnimation
+ * @property {Function} addSet
  * @property {Function} addTimeline
  * @property {Function} addTimelineChild
+ * @property {Function} addTimelineLabel
+ * @property {Function} addTimelineCall
+ * @property {Function} addTimelineSync
  * @property {Function} resolveStagger
  * @property {Object|null} _head
  * @property {Object|null} _tail
@@ -38,10 +41,13 @@ export namespace globalVersions {
 }
 export type EditorGlobals = {
     showPanel: boolean;
-    synced: boolean;
     addAnimation: Function;
+    addSet: Function;
     addTimeline: Function;
     addTimelineChild: Function;
+    addTimelineLabel: Function;
+    addTimelineCall: Function;
+    addTimelineSync: Function;
     resolveStagger: Function;
     _head: any | null;
     _tail: any | null;

package/dist/modules/core/globals.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { isBrowser, win, noop, compositionTypes, K, maxFps, doc } from './consts.js';
+import { isBrowser, win, noop, noopModifier, compositionTypes, K, maxFps, doc } from './consts.js';
 
 /**
  * @import {
@@ -21,10 +21,13 @@ import { isBrowser, win, noop, compositionTypes, K, maxFps, doc } from './consts
 /**
  * @typedef {Object} EditorGlobals
  * @property {boolean} showPanel
- * @property {boolean} synced
  * @property {Function} addAnimation
+ * @property {Function} addSet
  * @property {Function} addTimeline
  * @property {Function} addTimelineChild
+ * @property {Function} addTimelineLabel
+ * @property {Function} addTimelineCall
+ * @property {Function} addTimelineSync
  * @property {Function} resolveStagger
  * @property {Object|null} _head
  * @property {Object|null} _tail
@@ -47,7 +50,7 @@ const defaults = {
   loopDelay: 0,
   ease: 'out(2)',
   composition: compositionTypes.replace,
-  modifier: v => v,
+  modifier: noopModifier,
   onBegin: noop,
   onBeforeUpdate: noop,
   onUpdate: noop,
@@ -77,7 +80,7 @@ const globals = {
   editor: null,
 };
 
-const globalVersions = { version: '4.4.1', engine: null };
+const globalVersions = { version: '4.5.0', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];

package/dist/modules/core/helpers.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -155,7 +155,7 @@ const snap = (v, increment) => isArr(increment) ? increment.reduce((closest, cv)
  * @param  {Number} factor - Interpolation factor in the range [0, 1]
  * @return {Number} The interpolated value
  */
-const lerp = (start, end, factor) => start + (end - start) * factor;
+const lerp = (start, end, factor) => factor === 1 ? end : factor === 0 ? start : start + (end - start) * factor;
 
 /**
  * Replaces infinity with maximum safe value

package/dist/modules/core/helpers.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - core - ESM
- * @version v4.4.1
+ * @version v4.5.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { isBrowser, maxValue, minValue, lowerCaseRgx, hexTestRgx, validRgbHslRgx } from './consts.js';
+import { isBrowser, maxValue, minValue, hexTestRgx, lowerCaseRgx, validRgbHslRgx } from './consts.js';
 import { globals } from './globals.js';
 
 /**
@@ -153,7 +153,7 @@ const snap = (v, increment) => isArr(increment) ? increment.reduce((closest, cv)
  * @param  {Number} factor - Interpolation factor in the range [0, 1]
  * @return {Number} The interpolated value
  */
-const lerp = (start, end, factor) => start + (end - start) * factor;
+const lerp = (start, end, factor) => factor === 1 ? end : factor === 0 ? start : start + (end - start) * factor;
 
 /**
  * Replaces infinity with maximum safe value

package/dist/modules/core/render.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.4.1
+ * @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) {
@@ -338,6 +386,8 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
     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;