animejs 4.2.2 → 4.3.0-beta.0

package/dist/modules/timer/timer.js

@@ -1,13 +1,13 @@
 /**
  * Anime.js - timer - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - 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, scope } from '../core/globals.js';
+import { globals, devTools, 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';
@@ -80,6 +80,8 @@ class Timer extends Clock {
 
     super(0);
 
+    ++timerId;
+
     const {
       id,
       delay,
@@ -101,31 +103,42 @@ class Timer extends Clock {
 
     if (scope.current) scope.current.register(this);
 
-    const timerInitTime = parent ? 0 : engine._elapsedTime;
+    const timerInitTime = parent ? 0 : engine._lastTickTime;
     const timerDefaults = parent ? parent.defaults : globals.defaults;
     const timerDelay = /** @type {Number} */(isFnc(delay) || isUnd(delay) ? timerDefaults.delay : +delay);
     const timerDuration = isFnc(duration) || isUnd(duration) ? Infinity : +duration;
     const timerLoop = setValue(loop, timerDefaults.loop);
     const timerLoopDelay = setValue(loopDelay, timerDefaults.loopDelay);
-    const timerIterationCount = timerLoop === true ||
-                                timerLoop === Infinity ||
-                                /** @type {Number} */(timerLoop) < 0 ? Infinity :
-                                /** @type {Number} */(timerLoop) + 1;
+    let timerIterationCount = timerLoop === true ||
+                              timerLoop === Infinity ||
+                              /** @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) {
       offsetPosition = parentPosition;
     } else {
-      // Make sure to tick the engine once if not currently running to get up to date engine._elapsedTime
+      // Make sure to tick the engine once if not currently running to get up to date engine._lastTickTime
       // to avoid big gaps with the following offsetPosition calculation
       if (!engine.reqId) engine.requestTick(now());
       // Make sure to scale the offset position with globals.timeScale to properly handle seconds unit
-      offsetPosition = (engine._elapsedTime - engine._startTime) * globals.timeScale;
+      offsetPosition = (engine._lastTickTime - engine._startTime) * globals.timeScale;
     }
 
     // Timer's parameters
-    this.id = !isUnd(id) ? id : ++timerId;
+    /** @type {String|Number} */
+    this.id = !isUnd(id) ? id : timerId;
     /** @type {Timeline} */
     this.parent = parent;
     // Total duration of the timer
@@ -185,7 +198,7 @@ class Timer extends Clock {
 
     // Clock's parameters
     /** @type {Number} */
-    this._elapsedTime = timerInitTime;
+    this._lastTickTime = timerInitTime;
     /** @type {Number} */
     this._startTime = timerInitTime;
     /** @type {Number} */
@@ -216,7 +229,7 @@ class Timer extends Clock {
   }
 
   get iterationCurrentTime() {
-    return round(this._iterationTime, globals.precision);
+    return clamp(round(this._iterationTime, globals.precision), 0, this.iterationDuration);
   }
 
   set iterationCurrentTime(time) {
@@ -314,9 +327,9 @@ class Timer extends Clock {
   /** @return {this} */
   resetTime() {
     const timeScale = 1 / (this._speed * engine._speed);
-    // TODO: See if we can safely use engine._elapsedTime here
+    // TODO: See if we can safely use engine._lastTickTime here
     // if (!engine.reqId) engine.requestTick(now())
-    // this._startTime = engine._elapsedTime - (this._currentTime + this._delay) * timeScale;
+    // this._startTime = engine._lastTickTime - (this._currentTime + this._delay) * timeScale;
     this._startTime = now() - (this._currentTime + this._delay) * timeScale;
     return this;
   }

package/dist/modules/types/index.d.ts

@@ -26,7 +26,7 @@ export type DefaultsParams = {
 export type Renderable = JSAnimation | Timeline;
 export type Tickable = Timer | Renderable;
 export type CallbackArgument = Timer & JSAnimation & Timeline;
-export type Revertible = Animatable | Tickable | WAAPIAnimation | Draggable | ScrollObserver | TextSplitter | Scope;
+export type Revertible = Animatable | Tickable | WAAPIAnimation | Draggable | ScrollObserver | TextSplitter | Scope | AutoLayout;
 export type StaggerFunction<T> = (target?: Target, index?: number, length?: number, tl?: Timeline) => T;
 export type StaggerParams = {
     start?: number | string;
@@ -249,6 +249,7 @@ export type TimelineAnimationPosition = TimelinePosition | StaggerFunction<numbe
 export type TimelineOptions = {
     defaults?: DefaultsParams;
     playbackEase?: EasingParam;
+    composition?: boolean;
 };
 export type TimelineParams = TimerOptions & TimelineOptions & TickableCallbacks<Timeline> & RenderableCallbacks<Timeline>;
 export type WAAPITweenValue = string | number | Array<string> | Array<number>;
@@ -403,6 +404,7 @@ import type { WAAPIAnimation } from '../waapi/waapi.js';
 import type { Draggable } from '../draggable/draggable.js';
 import type { TextSplitter } from '../text/split.js';
 import type { Scope } from '../scope/scope.js';
+import type { AutoLayout } from '../layout/layout.js';
 import type { Spring } from '../easings/spring/index.js';
 import type { tweenTypes } from '../core/consts.js';
 import type { valueTypes } from '../core/consts.js';

package/dist/modules/utils/chainable.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/chainable.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/number.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/number.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/random.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/random.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/stagger.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/stagger.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/target.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/target.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/time.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/time.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/composition.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/composition.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/waapi.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -333,9 +333,10 @@ class WAAPIAnimation {
    * @return {this}
    */
   forEach(callback) {
-    const cb = helpers.isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
-    this.animations.forEach(cb);
-    return this;
+    try {
+      const cb = helpers.isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
+      this.animations.forEach(cb);
+    } catch {}    return this;
   }
 
   get speed() {
@@ -431,14 +432,21 @@ class WAAPIAnimation {
 
   cancel() {
     this.muteCallbacks = true; // This prevents triggering the onComplete callback and resolving the Promise
-    return this.commitStyles().forEach('cancel');
+    this.commitStyles().forEach('cancel');
+    this.animations.length = 0; // Needed to release all animations from memory
+    requestAnimationFrame(() => {
+      this.targets.forEach(($el) => { // Needed to avoid unecessary inline transorms
+        if ($el.style.transform === 'none') $el.style.removeProperty('transform');
+      });
+    });
+    return this;
   }
 
   revert() {
     // NOTE: We need a better way to revert the transforms, since right now the entire transform property value is reverted,
     // This means if you have multiple animations animating different transforms on the same target,
     // reverting one of them will also override the transform property of the other animations.
-    // A better approach would be to store the original custom property values is they exist instead of the entire transform value,
+    // A better approach would be to store the original custom property values if they exist instead of the entire transform value,
     // and update the CSS variables with the orignal value
     this.cancel().targets.forEach(($el, i) => {
       const targetStyle = $el.style;
@@ -448,7 +456,7 @@ class WAAPIAnimation {
         if (helpers.isUnd(originalInlinedValue) || originalInlinedValue === consts.emptyString) {
           targetStyle.removeProperty(helpers.toLowerCase(name));
         } else {
-          targetStyle[name] = originalInlinedValue;
+          $el.style[name] = originalInlinedValue;
         }
       }
       // Remove style attribute if empty

package/dist/modules/waapi/waapi.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - waapi - ESM
- * @version v4.2.2
+ * @version v4.3.0-beta.0
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
-import { isNil, isUnd, stringStartsWith, isKey, isObj, isArr, toLowerCase, round, isStr, isFnc, isNum } from '../core/helpers.js';
+import { isNil, isUnd, stringStartsWith, isKey, isObj, isArr, isStr, toLowerCase, round, isFnc, isNum } from '../core/helpers.js';
 import { scope, globals } from '../core/globals.js';
 import { registerTargets } from '../core/targets.js';
 import { setValue, getFunctionValue } from '../core/values.js';
@@ -331,9 +331,10 @@ class WAAPIAnimation {
    * @return {this}
    */
   forEach(callback) {
-    const cb = isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
-    this.animations.forEach(cb);
-    return this;
+    try {
+      const cb = isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
+      this.animations.forEach(cb);
+    } catch {}    return this;
   }
 
   get speed() {
@@ -429,14 +430,21 @@ class WAAPIAnimation {
 
   cancel() {
     this.muteCallbacks = true; // This prevents triggering the onComplete callback and resolving the Promise
-    return this.commitStyles().forEach('cancel');
+    this.commitStyles().forEach('cancel');
+    this.animations.length = 0; // Needed to release all animations from memory
+    requestAnimationFrame(() => {
+      this.targets.forEach(($el) => { // Needed to avoid unecessary inline transorms
+        if ($el.style.transform === 'none') $el.style.removeProperty('transform');
+      });
+    });
+    return this;
   }
 
   revert() {
     // NOTE: We need a better way to revert the transforms, since right now the entire transform property value is reverted,
     // This means if you have multiple animations animating different transforms on the same target,
     // reverting one of them will also override the transform property of the other animations.
-    // A better approach would be to store the original custom property values is they exist instead of the entire transform value,
+    // A better approach would be to store the original custom property values if they exist instead of the entire transform value,
     // and update the CSS variables with the orignal value
     this.cancel().targets.forEach(($el, i) => {
       const targetStyle = $el.style;
@@ -446,7 +454,7 @@ class WAAPIAnimation {
         if (isUnd(originalInlinedValue) || originalInlinedValue === emptyString) {
           targetStyle.removeProperty(toLowerCase(name));
         } else {
-          targetStyle[name] = originalInlinedValue;
+          $el.style[name] = originalInlinedValue;
         }
       }
       // Remove style attribute if empty

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "animejs",
-  "version": "4.2.2",
-  "homepage": "https://animejs.com",
+  "version": "4.3.0-beta.0",
   "description": "JavaScript animation engine",
+  "homepage": "https://animejs.com",
   "author": "Julian Garnier <julian@animejs.com>",
   "license": "MIT",
   "repository": {
@@ -104,6 +104,12 @@
       "import": "./dist/modules/events/index.js",
       "default": "./dist/modules/events/index.cjs"
     },
+    "./layout": {
+      "types": "./dist/modules/layout/index.d.ts",
+      "require": "./dist/modules/layout/index.cjs",
+      "import": "./dist/modules/layout/index.js",
+      "default": "./dist/modules/layout/index.cjs"
+    },
     "./easings": {
       "types": "./dist/modules/easings/index.d.ts",
       "require": "./dist/modules/easings/index.cjs",