animejs 4.2.0-beta.0 → 4.2.1

package/dist/modules/easings/spring/index.cjs

@@ -0,0 +1,255 @@
+/**
+ * Anime.js - easings - CJS
+ * @version v4.2.1
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('../../core/consts.cjs');
+var globals = require('../../core/globals.cjs');
+var helpers = require('../../core/helpers.cjs');
+var values = require('../../core/values.cjs');
+
+/**
+ * @import {
+ *   JSAnimation,
+ * } from '../../animation/animation.js'
+ */
+
+/**
+ * @import {
+ *   EasingFunction,
+ *   SpringParams,
+ *   Callback,
+ * } from '../../types/index.js'
+*/
+
+/*
+ * Spring easing solver adapted from https://webkit.org/demos/spring/spring.js
+ * (c) 2016 Webkit - Apple Inc
+ */
+
+const maxSpringParamValue = consts.K * 10;
+
+class Spring {
+  /**
+   * @param {SpringParams} [parameters]
+   */
+  constructor(parameters = {}) {
+    const hasBounceOrDuration = !helpers.isUnd(parameters.bounce) || !helpers.isUnd(parameters.duration);
+    this.timeStep = .02; // Interval fed to the solver to calculate duration
+    this.restThreshold = .0005; // Values below this threshold are considered resting position
+    this.restDuration = 200; // Duration in ms used to check if the spring is resting after reaching restThreshold
+    this.maxDuration = 60000; // The maximum allowed spring duration in ms (default 1 min)
+    this.maxRestSteps = this.restDuration / this.timeStep / consts.K; // How many steps allowed after reaching restThreshold before stopping the duration calculation
+    this.maxIterations = this.maxDuration / this.timeStep / consts.K; // Calculate the maximum iterations allowed based on maxDuration
+    this.bn = helpers.clamp(values.setValue(parameters.bounce, .5), -1, 1); // The bounce percentage between -1 and 1.
+    this.pd = helpers.clamp(values.setValue(parameters.duration, 628), 10 * globals.globals.timeScale, maxSpringParamValue * globals.globals.timeScale); // The perceived duration
+    this.m = helpers.clamp(values.setValue(parameters.mass, 1), 1, maxSpringParamValue);
+    this.s = helpers.clamp(values.setValue(parameters.stiffness, 100), consts.minValue, maxSpringParamValue);
+    this.d = helpers.clamp(values.setValue(parameters.damping, 10), consts.minValue, maxSpringParamValue);
+    this.v = helpers.clamp(values.setValue(parameters.velocity, 0), -maxSpringParamValue, maxSpringParamValue);
+    this.w0 = 0;
+    this.zeta = 0;
+    this.wd = 0;
+    this.b = 0;
+    this.completed = false;
+    this.solverDuration = 0;
+    this.settlingDuration = 0;
+    /** @type {JSAnimation} */
+    this.parent = null;
+    /** @type {Callback<JSAnimation>} */
+    this.onComplete = parameters.onComplete || consts.noop;
+    if (hasBounceOrDuration) this.calculateSDFromBD();
+    this.compute();
+    /** @type {EasingFunction} */
+    this.ease = t => {
+      const currentTime = t * this.settlingDuration;
+      const completed = this.completed;
+      const perceivedTime = this.pd;
+      if (currentTime >= perceivedTime && !completed) {
+        this.completed = true;
+        this.onComplete(this.parent);
+      }
+      if (currentTime < perceivedTime && completed) {
+        this.completed = false;
+      }
+      return t === 0 || t === 1 ? t : this.solve(t * this.solverDuration);
+    };
+  }
+
+  /** @type {EasingFunction} */
+  solve(time) {
+    const { zeta, w0, wd, b } = this;
+    let t = time;
+    if (zeta < 1) {
+      // Underdamped
+      t = helpers.exp(-t * zeta * w0) * (1 * helpers.cos(wd * t) + b * helpers.sin(wd * t));
+    } else if (zeta === 1) {
+      // Critically damped
+      t = (1 + b * t) * helpers.exp(-t * w0);
+    } else {
+      // Overdamped
+      // Using exponential instead of cosh and sinh functions to prevent Infinity
+      // Original exp(-zeta * w0 * t) * (cosh(wd * t) + b * sinh(wd * t))
+      t = ((1 + b) * helpers.exp((-zeta * w0 + wd) * t) + (1 - b) * helpers.exp((-zeta * w0 - wd) * t)) / 2;
+    }
+    return 1 - t;
+  }
+
+  calculateSDFromBD() {
+    // Apple's SwiftUI perceived spring duration implementation https://developer.apple.com/videos/play/wwdc2023/10158/?time=1010
+    // Equations taken from Kevin Grajeda's article https://www.kvin.me/posts/effortless-ui-spring-animations
+    const pds = globals.globals.timeScale === 1 ? this.pd / consts.K : this.pd;
+    // Mass and velocity should be set to their default values
+    this.m = 1;
+    this.v = 0;
+    // Stiffness = (2π ÷ perceptualDuration)²
+    this.s = helpers.pow((2 * helpers.PI) / pds, 2);
+    if (this.bn >= 0) {
+      // For bounce ≥ 0 (critically damped to underdamped)
+      // damping = ((1 - bounce) × 4π) ÷ perceptualDuration
+      this.d = ((1 - this.bn) * 4 * helpers.PI) / pds;
+    } else {
+      // For bounce < 0 (overdamped)
+      // damping = 4π ÷ (perceptualDuration × (1 + bounce))
+      // Note: (1 + bounce) is positive since bounce is negative
+      this.d = (4 * helpers.PI) / (pds * (1 + this.bn));
+    }
+    this.s = helpers.round(helpers.clamp(this.s, consts.minValue, maxSpringParamValue), 3);
+    this.d = helpers.round(helpers.clamp(this.d, consts.minValue, 300), 3); // Clamping to 300 is needed to prevent insane values in the solver
+  }
+
+  calculateBDFromSD() {
+    // Calculate perceived duration and bounce from stiffness and damping
+    // Note: We assumes m = 1 and v = 0 for these calculations
+    const pds = (2 * helpers.PI) / helpers.sqrt(this.s);
+    this.pd = pds * (globals.globals.timeScale === 1 ? consts.K : 1);
+    const zeta = this.d / (2 * helpers.sqrt(this.s));
+    if (zeta <= 1) {
+      // Critically damped to underdamped
+      this.bn = 1 - (this.d * pds) / (4 * helpers.PI);
+    } else {
+      // Overdamped
+      this.bn = (4 * helpers.PI) / (this.d * pds) - 1;
+    }
+    this.bn = helpers.round(helpers.clamp(this.bn, -1, 1), 3);
+    this.pd = helpers.round(helpers.clamp(this.pd, 10 * globals.globals.timeScale, maxSpringParamValue * globals.globals.timeScale), 3);
+  }
+
+  compute() {
+    const { maxRestSteps, maxIterations, restThreshold, timeStep, m, d, s, v } = this;
+    const w0 = this.w0 = helpers.clamp(helpers.sqrt(s / m), consts.minValue, consts.K);
+    const bouncedZeta = this.zeta = d / (2 * helpers.sqrt(s * m));
+    // Calculate wd based on damping type
+    if (bouncedZeta < 1) {
+      // Underdamped
+      this.wd = w0 * helpers.sqrt(1 - bouncedZeta * bouncedZeta);
+      this.b = (bouncedZeta * w0 + -v) / this.wd;
+    } else if (bouncedZeta === 1) {
+      // Critically damped
+      this.wd = 0;
+      this.b = -v + w0;
+    } else {
+      // Overdamped
+      this.wd = w0 * helpers.sqrt(bouncedZeta * bouncedZeta - 1);
+      this.b = (bouncedZeta * w0 + -v) / this.wd;
+    }
+
+    let solverTime = 0;
+    let restSteps = 0;
+    let iterations = 0;
+    while (restSteps <= maxRestSteps && iterations <= maxIterations) {
+      if (helpers.abs(1 - this.solve(solverTime)) < restThreshold) {
+        restSteps++;
+      } else {
+        restSteps = 0;
+      }
+      this.solverDuration = solverTime;
+      solverTime += timeStep;
+      iterations++;
+    }
+    this.settlingDuration = helpers.round(this.solverDuration * consts.K, 0) * globals.globals.timeScale;
+  }
+
+  get bounce() {
+    return this.bn;
+  }
+
+  set bounce(v) {
+    this.bn = helpers.clamp(values.setValue(v, 1), -1, 1);
+    this.calculateSDFromBD();
+    this.compute();
+  }
+
+  get duration() {
+    return this.pd;
+  }
+
+  set duration(v) {
+    this.pd = helpers.clamp(values.setValue(v, 1), 10 * globals.globals.timeScale, maxSpringParamValue * globals.globals.timeScale);
+    this.calculateSDFromBD();
+    this.compute();
+  }
+
+  get stiffness() {
+    return this.s;
+  }
+
+  set stiffness(v) {
+    this.s = helpers.clamp(values.setValue(v, 100), consts.minValue, maxSpringParamValue);
+    this.calculateBDFromSD();
+    this.compute();
+  }
+
+  get damping() {
+    return this.d;
+  }
+
+  set damping(v) {
+    this.d = helpers.clamp(values.setValue(v, 10), consts.minValue, maxSpringParamValue);
+    this.calculateBDFromSD();
+    this.compute();
+  }
+
+  get mass() {
+    return this.m;
+  }
+
+  set mass(v) {
+    this.m = helpers.clamp(values.setValue(v, 1), 1, maxSpringParamValue);
+    this.compute();
+  }
+
+  get velocity() {
+    return this.v;
+  }
+
+  set velocity(v) {
+    this.v = helpers.clamp(values.setValue(v, 0), -maxSpringParamValue, maxSpringParamValue);
+    this.compute();
+  }
+}
+
+/**
+ * @param {SpringParams} [parameters]
+ * @returns {Spring}
+ */
+const spring = (parameters) => new Spring(parameters);
+
+/**
+ * @deprecated createSpring() is deprecated use spring() instead
+ *
+ * @param {SpringParams} [parameters]
+ * @returns {Spring}
+ */
+const createSpring = (parameters) => {
+  console.warn('createSpring() is deprecated use spring() instead');
+  return new Spring(parameters);
+};
+
+exports.Spring = Spring;
+exports.createSpring = createSpring;
+exports.spring = spring;

package/dist/modules/{spring/spring.d.ts → easings/spring/index.d.ts}

@@ -9,6 +9,8 @@ export class Spring {
     maxDuration: number;
     maxRestSteps: number;
     maxIterations: number;
+    bn: number;
+    pd: number;
     m: number;
     s: number;
     d: number;
@@ -17,21 +19,35 @@ export class Spring {
     zeta: number;
     wd: number;
     b: number;
+    completed: boolean;
     solverDuration: number;
-    duration: number;
+    settlingDuration: number;
+    /** @type {JSAnimation} */
+    parent: JSAnimation;
+    /** @type {Callback<JSAnimation>} */
+    onComplete: Callback<JSAnimation>;
     /** @type {EasingFunction} */
     ease: EasingFunction;
     solve(time: number): number;
+    calculateSDFromBD(): void;
+    calculateBDFromSD(): void;
     compute(): void;
-    set mass(v: number);
-    get mass(): number;
+    set bounce(v: number);
+    get bounce(): number;
+    set duration(v: number);
+    get duration(): number;
     set stiffness(v: number);
     get stiffness(): number;
     set damping(v: number);
     get damping(): number;
+    set mass(v: number);
+    get mass(): number;
     set velocity(v: number);
     get velocity(): number;
 }
+export function spring(parameters?: SpringParams): Spring;
 export function createSpring(parameters?: SpringParams): Spring;
-import type { EasingFunction } from '../types/index.js';
-import type { SpringParams } from '../types/index.js';
+import type { JSAnimation } from '../../animation/animation.js';
+import type { Callback } from '../../types/index.js';
+import type { EasingFunction } from '../../types/index.js';
+import type { SpringParams } from '../../types/index.js';

package/dist/modules/easings/spring/index.js

@@ -0,0 +1,251 @@
+/**
+ * Anime.js - easings - ESM
+ * @version v4.2.1
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { K, minValue, noop } from '../../core/consts.js';
+import { globals } from '../../core/globals.js';
+import { isUnd, clamp, pow, PI, round, sqrt, abs, exp, cos, sin } from '../../core/helpers.js';
+import { setValue } from '../../core/values.js';
+
+/**
+ * @import {
+ *   JSAnimation,
+ * } from '../../animation/animation.js'
+ */
+
+/**
+ * @import {
+ *   EasingFunction,
+ *   SpringParams,
+ *   Callback,
+ * } from '../../types/index.js'
+*/
+
+/*
+ * Spring easing solver adapted from https://webkit.org/demos/spring/spring.js
+ * (c) 2016 Webkit - Apple Inc
+ */
+
+const maxSpringParamValue = K * 10;
+
+class Spring {
+  /**
+   * @param {SpringParams} [parameters]
+   */
+  constructor(parameters = {}) {
+    const hasBounceOrDuration = !isUnd(parameters.bounce) || !isUnd(parameters.duration);
+    this.timeStep = .02; // Interval fed to the solver to calculate duration
+    this.restThreshold = .0005; // Values below this threshold are considered resting position
+    this.restDuration = 200; // Duration in ms used to check if the spring is resting after reaching restThreshold
+    this.maxDuration = 60000; // The maximum allowed spring duration in ms (default 1 min)
+    this.maxRestSteps = this.restDuration / this.timeStep / K; // How many steps allowed after reaching restThreshold before stopping the duration calculation
+    this.maxIterations = this.maxDuration / this.timeStep / K; // Calculate the maximum iterations allowed based on maxDuration
+    this.bn = clamp(setValue(parameters.bounce, .5), -1, 1); // The bounce percentage between -1 and 1.
+    this.pd = clamp(setValue(parameters.duration, 628), 10 * globals.timeScale, maxSpringParamValue * globals.timeScale); // The perceived duration
+    this.m = clamp(setValue(parameters.mass, 1), 1, maxSpringParamValue);
+    this.s = clamp(setValue(parameters.stiffness, 100), minValue, maxSpringParamValue);
+    this.d = clamp(setValue(parameters.damping, 10), minValue, maxSpringParamValue);
+    this.v = clamp(setValue(parameters.velocity, 0), -maxSpringParamValue, maxSpringParamValue);
+    this.w0 = 0;
+    this.zeta = 0;
+    this.wd = 0;
+    this.b = 0;
+    this.completed = false;
+    this.solverDuration = 0;
+    this.settlingDuration = 0;
+    /** @type {JSAnimation} */
+    this.parent = null;
+    /** @type {Callback<JSAnimation>} */
+    this.onComplete = parameters.onComplete || noop;
+    if (hasBounceOrDuration) this.calculateSDFromBD();
+    this.compute();
+    /** @type {EasingFunction} */
+    this.ease = t => {
+      const currentTime = t * this.settlingDuration;
+      const completed = this.completed;
+      const perceivedTime = this.pd;
+      if (currentTime >= perceivedTime && !completed) {
+        this.completed = true;
+        this.onComplete(this.parent);
+      }
+      if (currentTime < perceivedTime && completed) {
+        this.completed = false;
+      }
+      return t === 0 || t === 1 ? t : this.solve(t * this.solverDuration);
+    };
+  }
+
+  /** @type {EasingFunction} */
+  solve(time) {
+    const { zeta, w0, wd, b } = this;
+    let t = time;
+    if (zeta < 1) {
+      // Underdamped
+      t = exp(-t * zeta * w0) * (1 * cos(wd * t) + b * sin(wd * t));
+    } else if (zeta === 1) {
+      // Critically damped
+      t = (1 + b * t) * exp(-t * w0);
+    } else {
+      // Overdamped
+      // Using exponential instead of cosh and sinh functions to prevent Infinity
+      // Original exp(-zeta * w0 * t) * (cosh(wd * t) + b * sinh(wd * t))
+      t = ((1 + b) * exp((-zeta * w0 + wd) * t) + (1 - b) * exp((-zeta * w0 - wd) * t)) / 2;
+    }
+    return 1 - t;
+  }
+
+  calculateSDFromBD() {
+    // Apple's SwiftUI perceived spring duration implementation https://developer.apple.com/videos/play/wwdc2023/10158/?time=1010
+    // Equations taken from Kevin Grajeda's article https://www.kvin.me/posts/effortless-ui-spring-animations
+    const pds = globals.timeScale === 1 ? this.pd / K : this.pd;
+    // Mass and velocity should be set to their default values
+    this.m = 1;
+    this.v = 0;
+    // Stiffness = (2π ÷ perceptualDuration)²
+    this.s = pow((2 * PI) / pds, 2);
+    if (this.bn >= 0) {
+      // For bounce ≥ 0 (critically damped to underdamped)
+      // damping = ((1 - bounce) × 4π) ÷ perceptualDuration
+      this.d = ((1 - this.bn) * 4 * PI) / pds;
+    } else {
+      // For bounce < 0 (overdamped)
+      // damping = 4π ÷ (perceptualDuration × (1 + bounce))
+      // Note: (1 + bounce) is positive since bounce is negative
+      this.d = (4 * PI) / (pds * (1 + this.bn));
+    }
+    this.s = round(clamp(this.s, minValue, maxSpringParamValue), 3);
+    this.d = round(clamp(this.d, minValue, 300), 3); // Clamping to 300 is needed to prevent insane values in the solver
+  }
+
+  calculateBDFromSD() {
+    // Calculate perceived duration and bounce from stiffness and damping
+    // Note: We assumes m = 1 and v = 0 for these calculations
+    const pds = (2 * PI) / sqrt(this.s);
+    this.pd = pds * (globals.timeScale === 1 ? K : 1);
+    const zeta = this.d / (2 * sqrt(this.s));
+    if (zeta <= 1) {
+      // Critically damped to underdamped
+      this.bn = 1 - (this.d * pds) / (4 * PI);
+    } else {
+      // Overdamped
+      this.bn = (4 * PI) / (this.d * pds) - 1;
+    }
+    this.bn = round(clamp(this.bn, -1, 1), 3);
+    this.pd = round(clamp(this.pd, 10 * globals.timeScale, maxSpringParamValue * globals.timeScale), 3);
+  }
+
+  compute() {
+    const { maxRestSteps, maxIterations, restThreshold, timeStep, m, d, s, v } = this;
+    const w0 = this.w0 = clamp(sqrt(s / m), minValue, K);
+    const bouncedZeta = this.zeta = d / (2 * sqrt(s * m));
+    // Calculate wd based on damping type
+    if (bouncedZeta < 1) {
+      // Underdamped
+      this.wd = w0 * sqrt(1 - bouncedZeta * bouncedZeta);
+      this.b = (bouncedZeta * w0 + -v) / this.wd;
+    } else if (bouncedZeta === 1) {
+      // Critically damped
+      this.wd = 0;
+      this.b = -v + w0;
+    } else {
+      // Overdamped
+      this.wd = w0 * sqrt(bouncedZeta * bouncedZeta - 1);
+      this.b = (bouncedZeta * w0 + -v) / this.wd;
+    }
+
+    let solverTime = 0;
+    let restSteps = 0;
+    let iterations = 0;
+    while (restSteps <= maxRestSteps && iterations <= maxIterations) {
+      if (abs(1 - this.solve(solverTime)) < restThreshold) {
+        restSteps++;
+      } else {
+        restSteps = 0;
+      }
+      this.solverDuration = solverTime;
+      solverTime += timeStep;
+      iterations++;
+    }
+    this.settlingDuration = round(this.solverDuration * K, 0) * globals.timeScale;
+  }
+
+  get bounce() {
+    return this.bn;
+  }
+
+  set bounce(v) {
+    this.bn = clamp(setValue(v, 1), -1, 1);
+    this.calculateSDFromBD();
+    this.compute();
+  }
+
+  get duration() {
+    return this.pd;
+  }
+
+  set duration(v) {
+    this.pd = clamp(setValue(v, 1), 10 * globals.timeScale, maxSpringParamValue * globals.timeScale);
+    this.calculateSDFromBD();
+    this.compute();
+  }
+
+  get stiffness() {
+    return this.s;
+  }
+
+  set stiffness(v) {
+    this.s = clamp(setValue(v, 100), minValue, maxSpringParamValue);
+    this.calculateBDFromSD();
+    this.compute();
+  }
+
+  get damping() {
+    return this.d;
+  }
+
+  set damping(v) {
+    this.d = clamp(setValue(v, 10), minValue, maxSpringParamValue);
+    this.calculateBDFromSD();
+    this.compute();
+  }
+
+  get mass() {
+    return this.m;
+  }
+
+  set mass(v) {
+    this.m = clamp(setValue(v, 1), 1, maxSpringParamValue);
+    this.compute();
+  }
+
+  get velocity() {
+    return this.v;
+  }
+
+  set velocity(v) {
+    this.v = clamp(setValue(v, 0), -maxSpringParamValue, maxSpringParamValue);
+    this.compute();
+  }
+}
+
+/**
+ * @param {SpringParams} [parameters]
+ * @returns {Spring}
+ */
+const spring = (parameters) => new Spring(parameters);
+
+/**
+ * @deprecated createSpring() is deprecated use spring() instead
+ *
+ * @param {SpringParams} [parameters]
+ * @returns {Spring}
+ */
+const createSpring = (parameters) => {
+  console.warn('createSpring() is deprecated use spring() instead');
+  return new Spring(parameters);
+};
+
+export { Spring, createSpring, spring };

package/dist/modules/easings/{steps.cjs → steps/index.cjs}

@@ -1,18 +1,18 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
 'use strict';
 
-var helpers = require('../core/helpers.cjs');
+var helpers = require('../../core/helpers.cjs');
 
 /**
  * @import {
  *   EasingFunction,
- * } from '../types/index.js'
+ * } from '../../types/index.js'
 */
 
 /**

package/dist/modules/easings/{steps.d.ts → steps/index.d.ts}

@@ -1,2 +1,2 @@
 export function steps(steps?: number, fromStart?: boolean): EasingFunction;
-import type { EasingFunction } from '../types/index.js';
+import type { EasingFunction } from '../../types/index.js';

package/dist/modules/easings/{steps.js → steps/index.js}

@@ -1,16 +1,16 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
-import { ceil, floor, clamp } from '../core/helpers.js';
+import { ceil, floor, clamp } from '../../core/helpers.js';
 
 /**
  * @import {
  *   EasingFunction,
- * } from '../types/index.js'
+ * } from '../../types/index.js'
 */
 
 /**

package/dist/modules/engine/engine.cjs

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

package/dist/modules/engine/engine.js

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

package/dist/modules/engine/index.cjs

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

package/dist/modules/engine/index.js

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

package/dist/modules/events/index.cjs

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

package/dist/modules/events/index.js

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