animejs 4.3.5 → 4.4.0

package/dist/modules/timeline/position.cjs

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

package/dist/modules/timeline/position.js

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

package/dist/modules/timeline/timeline.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - CJS
- * @version v4.3.5
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -14,9 +14,9 @@ var values = require('../core/values.cjs');
 var targets = require('../core/targets.cjs');
 var render = require('../core/render.cjs');
 var styles = require('../core/styles.cjs');
+var timer = require('../timer/timer.cjs');
 var composition = require('../animation/composition.cjs');
 var animation = require('../animation/animation.cjs');
-var timer = require('../timer/timer.cjs');
 var parser = require('../easings/eases/parser.cjs');
 var position = require('./position.cjs');
 
@@ -33,6 +33,7 @@ var position = require('./position.cjs');
  *   DefaultsParams,
  *   TimelinePosition,
  *   StaggerFunction,
+ *   TargetsArray,
  * } from '../types/index.js'
 */
 
@@ -42,6 +43,8 @@ var position = require('./position.cjs');
  * } from '../waapi/waapi.js'
 */
 
+/** @import {TweakRegister} from 'tweaks' */
+
 /**
  * @param {Timeline} tl
  * @return {Number}
@@ -63,7 +66,7 @@ function getTimelineTotalDuration(tl) {
  * @param  {Number} timePosition
  * @param  {TargetsParam} targets
  * @param  {Number} [index]
- * @param  {Number} [length]
+ * @param  {TargetsArray} [allTargets]
  * @return {Timeline}
  *
  * @param  {TimerParams|AnimationParams} childParams
@@ -71,15 +74,15 @@ function getTimelineTotalDuration(tl) {
  * @param  {Number} timePosition
  * @param  {TargetsParam} [targets]
  * @param  {Number} [index]
- * @param  {Number} [length]
+ * @param  {TargetsArray} [allTargets]
  */
-function addTlChild(childParams, tl, timePosition, targets, index, length) {
+function addTlChild(childParams, tl, timePosition, targets, index, allTargets) {
   const isSetter = helpers.isNum(childParams.duration) && /** @type {Number} */(childParams.duration) <= consts.minValue;
   // Offset the tl position with -minValue for 0 duration animations or .set() calls in order to align their end value with the defined position
   const adjustedPosition = isSetter ? timePosition - consts.minValue : timePosition;
   if (tl.composition) render.tick(tl, adjustedPosition, 1, 1, consts.tickModes.AUTO);
   const tlChild = targets ?
-    new animation.JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
+    new animation.JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, allTargets) :
     new timer.Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
   if (tl.composition) tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
@@ -127,7 +130,7 @@ class Timeline extends timer.Timer {
    * @overload
    * @param {TargetsParam} a1
    * @param {AnimationParams} a2
-   * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+   * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
    * @return {this}
    *
    * @overload
@@ -137,7 +140,7 @@ class Timeline extends timer.Timer {
    *
    * @param {TargetsParam|TimerParams} a1
    * @param {TimelinePosition|AnimationParams} a2
-   * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+   * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
    */
   add(a1, a2, a3) {
     const isAnim = helpers.isObj(a2);
@@ -146,9 +149,11 @@ class Timeline extends timer.Timer {
       this._hasChildren = true;
       if (isAnim) {
         const childParams = /** @type {AnimationParams} */(a2);
-        // Check for function for children stagger positions
-        if (helpers.isFnc(a3)) {
-          const staggeredPosition = a3;
+        const editorHook = globals.globals.editor && globals.globals.editor.addTimelineChild;
+        const isStaggerType = a3 && /** @type {TweakRegister} */(a3).type === 'Stagger' && globals.globals.editor;
+        // Check for function or Stagger type children positions
+        const staggeredPosition = helpers.isFnc(a3) ? a3 : null;
+        if (staggeredPosition || isStaggerType) {
           const parsedTargetsArray = targets.parseTargets(/** @type {TargetsParam} */(a1));
           // Store initial duration before adding new children that will change the duration
           const tlDuration = this.duration;
@@ -159,28 +164,36 @@ class Timeline extends timer.Timer {
           let i = 0;
           /** @type {Number} */
           const parsedLength = (parsedTargetsArray.length);
+          // Call editor hook once for the entire stagger group instead of per target
+          const resolvedParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3, parsedLength) : null;
+          // Resolve stagger AFTER editor hook so tweaked position value (a3.defaultValue) is used
+          const staggerFn = staggeredPosition || globals.globals.editor.resolveStagger(/** @type {TweakRegister} */(a3).defaultValue);
           parsedTargetsArray.forEach((/** @type {Target} */target) => {
             // Create a new parameter object for each staggered children
-            const staggeredChildParams = { ...childParams };
+            const staggeredChildParams = { ...(resolvedParams || childParams) };
             // Reset the duration of the timeline iteration before each stagger to prevent wrong start value calculation
             this.duration = tlDuration;
             this.iterationDuration = tlIterationDuration;
             if (!helpers.isUnd(id)) staggeredChildParams.id = id + '-' + i;
+            const staggeredTimePosition = position.parseTimelinePosition(this, staggerFn(target, i, parsedTargetsArray, null, this));
             addTlChild(
               staggeredChildParams,
               this,
-              position.parseTimelinePosition(this, staggeredPosition(target, i, parsedLength, this)),
+              staggeredTimePosition,
               target,
               i,
-              parsedLength
+              parsedTargetsArray,
             );
             i++;
           });
         } else {
+          // Call editor hook before resolving position so tweaked values are applied
+          const resolvedChildParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3) : childParams;
+          const resolvedPosition = a3 && /** @type {*} */(a3).type ? /** @type {*} */(a3).defaultValue : a3;
           addTlChild(
-            childParams,
+            resolvedChildParams,
             this,
-            position.parseTimelinePosition(this, a3),
+            position.parseTimelinePosition(this, resolvedPosition),
             /** @type {TargetsParam} */(a1),
           );
         }
@@ -302,7 +315,7 @@ class Timeline extends timer.Timer {
   revert() {
     super.revert();
     helpers.forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => child.revert, true);
-    return styles.cleanInlineStyles(this);
+    return styles.revertValues(this);
   }
 
   /**
@@ -322,7 +335,12 @@ class Timeline extends timer.Timer {
  * @param {TimelineParams} [parameters]
  * @return {Timeline}
  */
-const createTimeline = parameters => new Timeline(parameters).init();
+const createTimeline = parameters => {
+  if (globals.globals.editor) {
+    return /** @type {Timeline} */(/** @type {unknown} */(globals.globals.editor.addTimeline(parameters)));
+  }
+  return new Timeline(parameters).init();
+};
 
 exports.Timeline = Timeline;
 exports.createTimeline = createTimeline;

package/dist/modules/timeline/timeline.d.ts

@@ -16,7 +16,7 @@ export class Timeline extends Timer {
      * @overload
      * @param {TargetsParam} a1
      * @param {AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      * @return {this}
      *
      * @overload
@@ -26,14 +26,14 @@ export class Timeline extends Timer {
      *
      * @param {TargetsParam|TimerParams} a1
      * @param {TimelinePosition|AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      */
-    add(a1: TargetsParam, a2: AnimationParams, a3?: TimelinePosition | StaggerFunction<number | string>): this;
+    add(a1: TargetsParam, a2: AnimationParams, a3?: TimelinePosition | StaggerFunction<number | string> | TweakRegister): this;
     /**
      * @overload
      * @param {TargetsParam} a1
      * @param {AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      * @return {this}
      *
      * @overload
@@ -43,7 +43,7 @@ export class Timeline extends Timer {
      *
      * @param {TargetsParam|TimerParams} a1
      * @param {TimelinePosition|AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      */
     add(a1: TimerParams, a2?: TimelinePosition): this;
     /**
@@ -164,6 +164,7 @@ import type { TargetsParam } from '../types/index.js';
 import type { AnimationParams } from '../types/index.js';
 import type { TimelinePosition } from '../types/index.js';
 import type { StaggerFunction } from '../types/index.js';
+import type { TweakRegister } from 'tweaks';
 import type { TimerParams } from '../types/index.js';
 import type { Tickable } from '../types/index.js';
 import type { WAAPIAnimation } from '../waapi/waapi.js';

package/dist/modules/timeline/timeline.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - ESM
- * @version v4.3.5
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -11,10 +11,10 @@ import { isUnd, mergeObjects, isObj, isFnc, isStr, normalizeTime, forEachChildre
 import { setValue } from '../core/values.js';
 import { parseTargets } from '../core/targets.js';
 import { tick } from '../core/render.js';
-import { cleanInlineStyles } from '../core/styles.js';
+import { revertValues } from '../core/styles.js';
+import { Timer } from '../timer/timer.js';
 import { removeTargetsFromRenderable } from '../animation/composition.js';
 import { JSAnimation } from '../animation/animation.js';
-import { Timer } from '../timer/timer.js';
 import { parseEase } from '../easings/eases/parser.js';
 import { parseTimelinePosition } from './position.js';
 
@@ -31,6 +31,7 @@ import { parseTimelinePosition } from './position.js';
  *   DefaultsParams,
  *   TimelinePosition,
  *   StaggerFunction,
+ *   TargetsArray,
  * } from '../types/index.js'
 */
 
@@ -40,6 +41,8 @@ import { parseTimelinePosition } from './position.js';
  * } from '../waapi/waapi.js'
 */
 
+/** @import {TweakRegister} from 'tweaks' */
+
 /**
  * @param {Timeline} tl
  * @return {Number}
@@ -61,7 +64,7 @@ function getTimelineTotalDuration(tl) {
  * @param  {Number} timePosition
  * @param  {TargetsParam} targets
  * @param  {Number} [index]
- * @param  {Number} [length]
+ * @param  {TargetsArray} [allTargets]
  * @return {Timeline}
  *
  * @param  {TimerParams|AnimationParams} childParams
@@ -69,15 +72,15 @@ function getTimelineTotalDuration(tl) {
  * @param  {Number} timePosition
  * @param  {TargetsParam} [targets]
  * @param  {Number} [index]
- * @param  {Number} [length]
+ * @param  {TargetsArray} [allTargets]
  */
-function addTlChild(childParams, tl, timePosition, targets, index, length) {
+function addTlChild(childParams, tl, timePosition, targets, index, allTargets) {
   const isSetter = isNum(childParams.duration) && /** @type {Number} */(childParams.duration) <= minValue;
   // Offset the tl position with -minValue for 0 duration animations or .set() calls in order to align their end value with the defined position
   const adjustedPosition = isSetter ? timePosition - minValue : timePosition;
   if (tl.composition) tick(tl, adjustedPosition, 1, 1, tickModes.AUTO);
   const tlChild = targets ?
-    new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
+    new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, allTargets) :
     new Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
   if (tl.composition) tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
@@ -125,7 +128,7 @@ class Timeline extends Timer {
    * @overload
    * @param {TargetsParam} a1
    * @param {AnimationParams} a2
-   * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+   * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
    * @return {this}
    *
    * @overload
@@ -135,7 +138,7 @@ class Timeline extends Timer {
    *
    * @param {TargetsParam|TimerParams} a1
    * @param {TimelinePosition|AnimationParams} a2
-   * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+   * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
    */
   add(a1, a2, a3) {
     const isAnim = isObj(a2);
@@ -144,9 +147,11 @@ class Timeline extends Timer {
       this._hasChildren = true;
       if (isAnim) {
         const childParams = /** @type {AnimationParams} */(a2);
-        // Check for function for children stagger positions
-        if (isFnc(a3)) {
-          const staggeredPosition = a3;
+        const editorHook = globals.editor && globals.editor.addTimelineChild;
+        const isStaggerType = a3 && /** @type {TweakRegister} */(a3).type === 'Stagger' && globals.editor;
+        // Check for function or Stagger type children positions
+        const staggeredPosition = isFnc(a3) ? a3 : null;
+        if (staggeredPosition || isStaggerType) {
           const parsedTargetsArray = parseTargets(/** @type {TargetsParam} */(a1));
           // Store initial duration before adding new children that will change the duration
           const tlDuration = this.duration;
@@ -157,28 +162,36 @@ class Timeline extends Timer {
           let i = 0;
           /** @type {Number} */
           const parsedLength = (parsedTargetsArray.length);
+          // Call editor hook once for the entire stagger group instead of per target
+          const resolvedParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3, parsedLength) : null;
+          // Resolve stagger AFTER editor hook so tweaked position value (a3.defaultValue) is used
+          const staggerFn = staggeredPosition || globals.editor.resolveStagger(/** @type {TweakRegister} */(a3).defaultValue);
           parsedTargetsArray.forEach((/** @type {Target} */target) => {
             // Create a new parameter object for each staggered children
-            const staggeredChildParams = { ...childParams };
+            const staggeredChildParams = { ...(resolvedParams || childParams) };
             // Reset the duration of the timeline iteration before each stagger to prevent wrong start value calculation
             this.duration = tlDuration;
             this.iterationDuration = tlIterationDuration;
             if (!isUnd(id)) staggeredChildParams.id = id + '-' + i;
+            const staggeredTimePosition = parseTimelinePosition(this, staggerFn(target, i, parsedTargetsArray, null, this));
             addTlChild(
               staggeredChildParams,
               this,
-              parseTimelinePosition(this, staggeredPosition(target, i, parsedLength, this)),
+              staggeredTimePosition,
               target,
               i,
-              parsedLength
+              parsedTargetsArray,
             );
             i++;
           });
         } else {
+          // Call editor hook before resolving position so tweaked values are applied
+          const resolvedChildParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3) : childParams;
+          const resolvedPosition = a3 && /** @type {*} */(a3).type ? /** @type {*} */(a3).defaultValue : a3;
           addTlChild(
-            childParams,
+            resolvedChildParams,
             this,
-            parseTimelinePosition(this, a3),
+            parseTimelinePosition(this, resolvedPosition),
             /** @type {TargetsParam} */(a1),
           );
         }
@@ -300,7 +313,7 @@ class Timeline extends Timer {
   revert() {
     super.revert();
     forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => child.revert, true);
-    return cleanInlineStyles(this);
+    return revertValues(this);
   }
 
   /**
@@ -320,6 +333,11 @@ class Timeline extends Timer {
  * @param {TimelineParams} [parameters]
  * @return {Timeline}
  */
-const createTimeline = parameters => new Timeline(parameters).init();
+const createTimeline = parameters => {
+  if (globals.editor) {
+    return /** @type {Timeline} */(/** @type {unknown} */(globals.editor.addTimeline(parameters)));
+  }
+  return new Timeline(parameters).init();
+};
 
 export { Timeline, createTimeline };

package/dist/modules/timer/index.cjs

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

package/dist/modules/timer/index.js

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

package/dist/modules/timer/timer.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timer - CJS
- * @version v4.3.5
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -69,6 +69,9 @@ const reviveTimer = timer => {
 
 let timerId = 0;
 
+/** @param {Timer} prev @param {Timer} child */
+const sortByPriority = (prev, child) => prev._priority > child._priority;
+
 /**
  * Base class used to create Timers, Animations and Timelines
  */
@@ -95,6 +98,7 @@ class Timer extends clock.Clock {
       autoplay,
       frameRate,
       playbackRate,
+      priority,
       onComplete,
       onLoop,
       onPause,
@@ -116,16 +120,6 @@ class Timer extends clock.Clock {
                               /** @type {Number} */(timerLoop) < 0 ? Infinity :
                               /** @type {Number} */(timerLoop) + 1;
 
-    if (globals.devTools) {
-      const isInfinite = timerIterationCount === Infinity;
-      const registered = globals.devTools.register(this, parameters, isInfinite);
-      if (registered && isInfinite) {
-        const minIterations = alternate ? 2 : 1;
-        const iterations = parent ? globals.devTools.maxNestedInfiniteLoops : globals.devTools.maxInfiniteLoops;
-        timerIterationCount = Math.max(iterations, minIterations);
-      }
-    }
-
     let offsetPosition = 0;
 
     if (parent) {
@@ -209,6 +203,8 @@ class Timer extends clock.Clock {
     this._fps = values.setValue(frameRate, timerDefaults.frameRate);
     /** @type {Number} */
     this._speed = values.setValue(playbackRate, timerDefaults.playbackRate);
+    /** @type {Number} */
+    this._priority = +values.setValue(priority, 1);
   }
 
   get cancelled() {
@@ -353,7 +349,7 @@ class Timer extends clock.Clock {
       render.tick(this, consts.minValue, 0, 0, consts.tickModes.FORCE);
     } else {
       if (!this._running) {
-        helpers.addChild(engine.engine, this);
+        helpers.addChild(engine.engine, this, sortByPriority);
         engine.engine._hasChildren = true;
         this._running = true;
       }

package/dist/modules/timer/timer.d.ts

@@ -65,6 +65,8 @@ export class Timer extends Clock {
     _prev: Renderable;
     /** @type {Renderable} */
     _next: Renderable;
+    /** @type {Number} */
+    _priority: number;
     set cancelled(cancelled: boolean);
     get cancelled(): boolean;
     set currentTime(time: number);

package/dist/modules/timer/timer.js

@@ -1,13 +1,13 @@
 /**
  * Anime.js - timer - ESM
- * @version v4.3.5
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 import { minValue, noop, maxValue, compositionTypes, tickModes } from '../core/consts.js';
 import { isFnc, isUnd, now, clampInfinity, clamp, round, forEachChildren, addChild, normalizeTime, floor } from '../core/helpers.js';
-import { globals, devTools, scope } from '../core/globals.js';
+import { globals, scope } from '../core/globals.js';
 import { setValue } from '../core/values.js';
 import { tick } from '../core/render.js';
 import { removeTweenSliblings, composeTween, getTweenSiblings } from '../animation/composition.js';
@@ -67,6 +67,9 @@ const reviveTimer = timer => {
 
 let timerId = 0;
 
+/** @param {Timer} prev @param {Timer} child */
+const sortByPriority = (prev, child) => prev._priority > child._priority;
+
 /**
  * Base class used to create Timers, Animations and Timelines
  */
@@ -93,6 +96,7 @@ class Timer extends Clock {
       autoplay,
       frameRate,
       playbackRate,
+      priority,
       onComplete,
       onLoop,
       onPause,
@@ -114,16 +118,6 @@ class Timer extends Clock {
                               /** @type {Number} */(timerLoop) < 0 ? Infinity :
                               /** @type {Number} */(timerLoop) + 1;
 
-    if (devTools) {
-      const isInfinite = timerIterationCount === Infinity;
-      const registered = devTools.register(this, parameters, isInfinite);
-      if (registered && isInfinite) {
-        const minIterations = alternate ? 2 : 1;
-        const iterations = parent ? devTools.maxNestedInfiniteLoops : devTools.maxInfiniteLoops;
-        timerIterationCount = Math.max(iterations, minIterations);
-      }
-    }
-
     let offsetPosition = 0;
 
     if (parent) {
@@ -207,6 +201,8 @@ class Timer extends Clock {
     this._fps = setValue(frameRate, timerDefaults.frameRate);
     /** @type {Number} */
     this._speed = setValue(playbackRate, timerDefaults.playbackRate);
+    /** @type {Number} */
+    this._priority = +setValue(priority, 1);
   }
 
   get cancelled() {
@@ -351,7 +347,7 @@ class Timer extends Clock {
       tick(this, minValue, 0, 0, tickModes.FORCE);
     } else {
       if (!this._running) {
-        addChild(engine, this);
+        addChild(engine, this, sortByPriority);
         engine._hasChildren = true;
         this._running = true;
       }