animejs 4.2.0-beta.0 → 4.2.1

package/dist/modules/utils/stagger.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -9,7 +9,7 @@
 
 var consts = require('../core/consts.cjs');
 var helpers = require('../core/helpers.cjs');
-var eases = require('../easings/eases.cjs');
+var parser = require('../easings/eases/parser.cjs');
 var position = require('../timeline/position.cjs');
 var values = require('../core/values.cjs');
 var targets = require('../core/targets.cjs');
@@ -25,7 +25,7 @@ var random = require('./random.cjs');
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**
@@ -65,7 +65,7 @@ const stagger = (val, params = {}) => {
   const ease = params.ease;
   const hasEasing = !helpers.isUnd(ease);
   const hasSpring = hasEasing && !helpers.isUnd(/** @type {Spring} */(ease).ease);
-  const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? eases.parseEase(ease) : null;
+  const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? parser.parseEase(ease) : null;
   const grid = params.grid;
   const axis = params.axis;
   const customTotal = params.total;

package/dist/modules/utils/stagger.js

@@ -1,13 +1,13 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
 import { unitsExecRgx, emptyString } from '../core/consts.js';
 import { isUnd, parseNumber, isFnc, abs, floor, sqrt, round, isArr, isNum, isStr, max } from '../core/helpers.js';
-import { parseEase } from '../easings/eases.js';
+import { parseEase } from '../easings/eases/parser.js';
 import { parseTimelinePosition } from '../timeline/position.js';
 import { getOriginalAnimatableValue } from '../core/values.js';
 import { registerTargets } from '../core/targets.js';
@@ -23,7 +23,7 @@ import { shuffle } from './random.js';
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**

package/dist/modules/utils/target.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/target.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/time.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/utils/time.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - utils - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/composition.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -30,16 +30,18 @@ const WAAPIAnimationsLookups = {
  * @param {DOMTarget} $el
  * @param {String} [property]
  * @param {WAAPIAnimation} [parent]
+ * @return {globalThis.Animation}
  */
 const removeWAAPIAnimation = ($el, property, parent) => {
   let nextLookup = WAAPIAnimationsLookups._head;
+  let anim;
   while (nextLookup) {
     const next = nextLookup._next;
     const matchTarget = nextLookup.$el === $el;
     const matchProperty = !property || nextLookup.property === property;
     const matchParent = !parent || nextLookup.parent === parent;
     if (matchTarget && matchProperty && matchParent) {
-      const anim = nextLookup.animation;
+      anim = nextLookup.animation;
       try { anim.commitStyles(); } catch {}      anim.cancel();
       helpers.removeChild(WAAPIAnimationsLookups, nextLookup);
       const lookupParent = nextLookup.parent;
@@ -47,8 +49,8 @@ const removeWAAPIAnimation = ($el, property, parent) => {
         lookupParent._completed++;
         if (lookupParent.animations.length === lookupParent._completed) {
           lookupParent.completed = true;
+          lookupParent.paused = true;
           if (!lookupParent.muteCallbacks) {
-            lookupParent.paused = true;
             lookupParent.onComplete(lookupParent);
             lookupParent._resolve(lookupParent);
           }
@@ -57,6 +59,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
     }
     nextLookup = next;
   }
+  return anim;
 };
 
 /**
@@ -65,7 +68,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
  * @param {String} property
  * @param {PropertyIndexedKeyframes} keyframes
  * @param {KeyframeAnimationOptions} params
- * @retun {Animation}
+ * @retun {globalThis.Animation}
  */
 const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   const animation = $el.animate(keyframes, params);
@@ -80,8 +83,11 @@ const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   removeWAAPIAnimation($el, property);
   helpers.addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
   const handleRemove = () => { removeWAAPIAnimation($el, property, parent); };
+  animation.oncancel = handleRemove;
   animation.onremove = handleRemove;
-  animation.onfinish = handleRemove;
+  if (!parent.persist) {
+    animation.onfinish = handleRemove;
+  }
   return animation;
 };
 

package/dist/modules/waapi/composition.d.ts

@@ -1,4 +1,4 @@
-export function removeWAAPIAnimation($el: DOMTarget, property?: string, parent?: WAAPIAnimation): void;
+export function removeWAAPIAnimation($el: DOMTarget, property?: string, parent?: WAAPIAnimation): globalThis.Animation;
 export function addWAAPIAnimation(parent: WAAPIAnimation, $el: DOMTarget, property: string, keyframes: PropertyIndexedKeyframes, params: KeyframeAnimationOptions): Animation;
 import type { DOMTarget } from '../types/index.js';
 import type { WAAPIAnimation } from '../waapi/waapi.js';

package/dist/modules/waapi/composition.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -28,16 +28,18 @@ const WAAPIAnimationsLookups = {
  * @param {DOMTarget} $el
  * @param {String} [property]
  * @param {WAAPIAnimation} [parent]
+ * @return {globalThis.Animation}
  */
 const removeWAAPIAnimation = ($el, property, parent) => {
   let nextLookup = WAAPIAnimationsLookups._head;
+  let anim;
   while (nextLookup) {
     const next = nextLookup._next;
     const matchTarget = nextLookup.$el === $el;
     const matchProperty = !property || nextLookup.property === property;
     const matchParent = !parent || nextLookup.parent === parent;
     if (matchTarget && matchProperty && matchParent) {
-      const anim = nextLookup.animation;
+      anim = nextLookup.animation;
       try { anim.commitStyles(); } catch {}      anim.cancel();
       removeChild(WAAPIAnimationsLookups, nextLookup);
       const lookupParent = nextLookup.parent;
@@ -45,8 +47,8 @@ const removeWAAPIAnimation = ($el, property, parent) => {
         lookupParent._completed++;
         if (lookupParent.animations.length === lookupParent._completed) {
           lookupParent.completed = true;
+          lookupParent.paused = true;
           if (!lookupParent.muteCallbacks) {
-            lookupParent.paused = true;
             lookupParent.onComplete(lookupParent);
             lookupParent._resolve(lookupParent);
           }
@@ -55,6 +57,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
     }
     nextLookup = next;
   }
+  return anim;
 };
 
 /**
@@ -63,7 +66,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
  * @param {String} property
  * @param {PropertyIndexedKeyframes} keyframes
  * @param {KeyframeAnimationOptions} params
- * @retun {Animation}
+ * @retun {globalThis.Animation}
  */
 const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   const animation = $el.animate(keyframes, params);
@@ -78,8 +81,11 @@ const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   removeWAAPIAnimation($el, property);
   addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
   const handleRemove = () => { removeWAAPIAnimation($el, property, parent); };
+  animation.oncancel = handleRemove;
   animation.onremove = handleRemove;
-  animation.onfinish = handleRemove;
+  if (!parent.persist) {
+    animation.onfinish = handleRemove;
+  }
   return animation;
 };
 

package/dist/modules/waapi/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/waapi/waapi.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - waapi - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -13,7 +13,7 @@ var targets = require('../core/targets.cjs');
 var values = require('../core/values.cjs');
 var consts = require('../core/consts.cjs');
 var none = require('../easings/none.cjs');
-var parser = require('../easings/parser.cjs');
+var parser = require('../easings/eases/parser.cjs');
 var composition = require('./composition.cjs');
 
 /**
@@ -27,7 +27,6 @@ var composition = require('./composition.cjs');
  *   WAAPIAnimationParams,
  *   WAAPITweenOptions,
  *   WAAPIKeyframeValue,
- *   WAAPICallback,
  *   WAAPITweenValue
  * } from '../types/index.js'
 */
@@ -35,7 +34,7 @@ var composition = require('./composition.cjs');
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**
@@ -52,21 +51,11 @@ var composition = require('./composition.cjs');
  */
 const easingToLinear = (fn, samples = 100) => {
   const points = [];
-  for (let i = 0; i <= samples; i++) points.push(fn(i / samples));
+  for (let i = 0; i <= samples; i++) points.push(helpers.round(fn(i / samples), 4));
   return `linear(${points.join(', ')})`;
 };
 
-const WAAPIEasesLookups = {
-  in: 'ease-in',
-  out: 'ease-out',
-  inOut: 'ease-in-out',
-};
-
-const WAAPIeases = /*#__PURE__*/(() => {
-  const list = {};
-  for (let type in parser.easeTypes) list[type] = (/** @type {String|Number} */p) => parser.easeTypes[type](parser.easeInPower(p));
-  return /** @type {Record<String, EasingFunction>} */(list);
-})();
+const WAAPIEasesLookups = {};
 
 /**
  * @param  {EasingParam} ease
@@ -87,9 +76,10 @@ const parseWAAPIEasing = (ease) => {
     } else if (helpers.stringStartsWith(ease, 'cubicB')) {
       parsedEase = helpers.toLowerCase(ease);
     } else {
-      const parsed = parser.parseEaseString(ease, WAAPIeases, WAAPIEasesLookups);
+      const parsed = parser.parseEaseString(ease);
       if (helpers.isFnc(parsed)) parsedEase = parsed === none.none ? 'linear' : easingToLinear(parsed);
     }
+    // Only cache string based easing name, otherwise function arguments get lost
     WAAPIEasesLookups[ease] = parsedEase;
   } else if (helpers.isFnc(ease)) {
     const easing = easingToLinear(ease);
@@ -130,7 +120,8 @@ let transformsPropertiesRegistered = null;
  * @return {String}
  */
 const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
-  let v = values.getFunctionValue(/** @type {any} */(value), $el, i, targetsLength);
+  // Do not try to compute strings with getFunctionValue otherwise it will convert CSS variables
+  let v = helpers.isStr(value) ? value : values.getFunctionValue(/** @type {any} */(value), $el, i, targetsLength);
   if (!helpers.isNum(v)) return v;
   if (commonDefaultPXProperties.includes(propName) || helpers.stringStartsWith(propName, 'translate')) return `${v}px`;
   if (helpers.stringStartsWith(propName, 'rotate') || helpers.stringStartsWith(propName, 'skew')) return `${v}deg`;
@@ -210,7 +201,7 @@ class WAAPIAnimation {
     /** @type {PlaybackDirection} */
     const direction = alternate ? reversed ? 'alternate-reverse' : 'alternate' : reversed ? 'reverse' : 'normal';
     /** @type {FillMode} */
-    const fill = 'forwards';
+    const fill = 'both'; // We use 'both' here because the animation can be reversed during playback
     /** @type {String} */
     const easing = parseWAAPIEasing(ease);
     const timeScale = (globals.globals.timeScale === 1 ? 1 : consts.K);
@@ -222,7 +213,7 @@ class WAAPIAnimation {
     /** @type {globalThis.Animation}] */
     this.controlAnimation = null;
     /** @type {Callback<this>} */
-    this.onComplete = params.onComplete || consts.noop;
+    this.onComplete = params.onComplete || /** @type {Callback<WAAPIAnimation>} */(/** @type {unknown} */(globals.globals.defaults.onComplete));
     /** @type {Number} */
     this.duration = 0;
     /** @type {Boolean} */
@@ -233,6 +224,8 @@ class WAAPIAnimation {
     this.paused = !autoplay || scroll !== false;
     /** @type {Boolean} */
     this.reversed = reversed;
+    /** @type {Boolean} */
+    this.persist = values.setValue(params.persist, globals.globals.defaults.persist);
     /** @type {Boolean|ScrollObserver} */
     this.autoplay = autoplay;
     /** @type {Number} */
@@ -241,17 +234,18 @@ class WAAPIAnimation {
     this._resolve = consts.noop; // Used by .then()
     /** @type {Number} */
     this._completed = 0;
-    /** @type {Array<Object>}] */
-    this._inlineStyles = parsedTargets.map($el => $el.getAttribute('style'));
+    /** @type {Array.<Object>} */
+    this._inlineStyles = [];
 
     parsedTargets.forEach(($el, i) => {
 
       const cachedTransforms = $el[consts.transformsSymbol];
-
       const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
+      const elStyle = $el.style;
+      const inlineStyles = this._inlineStyles[i] = {};
 
       /** @type {Number} */
-      const duration = (spring ? /** @type {Spring} */(spring).duration : values.getFunctionValue(values.setValue(params.duration, globals.globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : values.getFunctionValue(values.setValue(params.duration, globals.globals.defaults.duration), $el, i, targetsLength)) * timeScale;
       /** @type {Number} */
       const delay = values.getFunctionValue(values.setValue(params.delay, globals.globals.defaults.delay), $el, i, targetsLength) * timeScale;
       /** @type {CompositeOperation} */
@@ -265,6 +259,12 @@ class WAAPIAnimation {
         const tweenParams = { iterations, direction, fill, easing, duration, delay, composite };
         const propertyValue = params[name];
         const individualTransformProperty = hasIndividualTransforms ? consts.validTransforms.includes(name) ? name : consts.shortTransforms.get(name) : false;
+
+        const styleName = individualTransformProperty ? 'transform' : name;
+        if (!inlineStyles[styleName]) {
+          inlineStyles[styleName] = elStyle[styleName];
+        }
+
         let parsedPropertyValue;
         if (helpers.isObj(propertyValue)) {
           const tweenOptions = /** @type {WAAPITweenOptions} */(propertyValue);
@@ -273,7 +273,7 @@ class WAAPIAnimation {
           const to = /** @type {WAAPITweenOptions} */(tweenOptions).to;
           const from = /** @type {WAAPITweenOptions} */(tweenOptions).from;
           /** @type {Number} */
-          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).duration : values.getFunctionValue(values.setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
+          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : values.getFunctionValue(values.setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
           /** @type {Number} */
           tweenParams.delay = values.getFunctionValue(values.setValue(tweenOptions.delay, delay), $el, i, targetsLength) * timeScale;
           /** @type {CompositeOperation} */
@@ -290,10 +290,10 @@ class WAAPIAnimation {
           composition.addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
           if (!helpers.isUnd(from)) {
             if (!individualTransformProperty) {
-              $el.style[name] = keyframes[name][0];
+              elStyle[name] = keyframes[name][0];
             } else {
               const key = `--${individualTransformProperty}`;
-              $el.style.setProperty(key, keyframes[key][0]);
+              elStyle.setProperty(key, keyframes[key][0]);
             }
           }
         } else {
@@ -314,7 +314,7 @@ class WAAPIAnimation {
         for (let t in cachedTransforms) {
           transforms += `${consts.transformsFragmentStrings[t]}var(--${t})) `;
         }
-        $el.style.transform = transforms;
+        elStyle.transform = transforms;
       }
     });
 
@@ -359,7 +359,8 @@ class WAAPIAnimation {
       // Make sure the animation playState is not 'paused' in order to properly trigger an onfinish callback.
       // The "paused" play state supersedes the "finished" play state; if the animation is both paused and finished, the "paused" state is the one that will be reported.
       // https://developer.mozilla.org/en-US/docs/Web/API/Animation/finish_event
-      if (t >= this.duration) anim.play();
+      // This is not needed for persisting animations since they never finish.
+      if (!this.persist && t >= this.duration) anim.play();
       anim.currentTime = t;
     });
   }
@@ -429,25 +430,46 @@ class WAAPIAnimation {
   }
 
   cancel() {
-    this.forEach('cancel');
-    return this.pause();
+    this.muteCallbacks = true; // This prevents triggering the onComplete callback and resolving the Promise
+    return this.commitStyles().forEach('cancel');
   }
 
   revert() {
-    this.cancel();
-    this.targets.forEach(($el, i) => $el.setAttribute('style', this._inlineStyles[i]) );
+    // 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,
+    // and update the CSS variables with the orignal value
+    this.cancel().targets.forEach(($el, i) => {
+      const targetStyle = $el.style;
+      const targetInlineStyles = this._inlineStyles[i];
+      for (let name in targetInlineStyles) {
+        const originalInlinedValue = targetInlineStyles[name];
+        if (helpers.isUnd(originalInlinedValue) || originalInlinedValue === consts.emptyString) {
+          targetStyle.removeProperty(helpers.toLowerCase(name));
+        } else {
+          targetStyle[name] = originalInlinedValue;
+        }
+      }
+      // Remove style attribute if empty
+      if ($el.getAttribute('style') === consts.emptyString) $el.removeAttribute('style');
+    });
     return this;
   }
 
   /**
-   * @param  {WAAPICallback} [callback]
-   * @return {Promise}
+   * @typedef {this & {then: null}} ResolvedWAAPIAnimation
+   */
+
+  /**
+   * @param  {Callback<ResolvedWAAPIAnimation>} [callback]
+   * @return Promise<this>
    */
   then(callback = consts.noop) {
     const then = this.then;
     const onResolve = () => {
       this.then = null;
-      callback(this);
+      callback(/** @type {ResolvedWAAPIAnimation} */(this));
       this.then = then;
       this._resolve = consts.noop;
     };

package/dist/modules/waapi/waapi.d.ts

@@ -22,6 +22,8 @@ export class WAAPIAnimation {
     paused: boolean;
     /** @type {Boolean} */
     reversed: boolean;
+    /** @type {Boolean} */
+    persist: boolean;
     /** @type {Boolean|ScrollObserver} */
     autoplay: boolean | ScrollObserver;
     /** @type {Number} */
@@ -30,7 +32,7 @@ export class WAAPIAnimation {
     _resolve: Function;
     /** @type {Number} */
     _completed: number;
-    /** @type {Array<Object>}] */
+    /** @type {Array.<Object>} */
     _inlineStyles: Array<any>;
     /**
      * @callback forEachCallback
@@ -63,10 +65,15 @@ export class WAAPIAnimation {
     cancel(): this;
     revert(): this;
     /**
-     * @param  {WAAPICallback} [callback]
-     * @return {Promise}
+     * @typedef {this & {then: null}} ResolvedWAAPIAnimation
+     */
+    /**
+     * @param  {Callback<ResolvedWAAPIAnimation>} [callback]
+     * @return Promise<this>
      */
-    then(callback?: WAAPICallback): Promise<any>;
+    then(callback?: Callback<this & {
+        then: null;
+    }>): Promise<any>;
 }
 export namespace waapi {
     export function animate(targets: DOMTargetsParam, params: WAAPIAnimationParams): WAAPIAnimation;
@@ -75,7 +82,6 @@ export namespace waapi {
 import type { DOMTargetsArray } from '../types/index.js';
 import type { Callback } from '../types/index.js';
 import type { ScrollObserver } from '../events/scroll.js';
-import type { WAAPICallback } from '../types/index.js';
 import type { DOMTargetsParam } from '../types/index.js';
 import type { WAAPIAnimationParams } from '../types/index.js';
 /**
@@ -89,14 +95,13 @@ import type { WAAPIAnimationParams } from '../types/index.js';
  *   WAAPIAnimationParams,
  *   WAAPITweenOptions,
  *   WAAPIKeyframeValue,
- *   WAAPICallback,
  *   WAAPITweenValue
  * } from '../types/index.js'
 */
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 /**
  * @import {