animejs 4.2.0 → 4.2.1

package/dist/modules/events/scroll.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - events - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -95,6 +95,8 @@ class ScrollContainer {
     /** @type {Number} */
     this.top = 0;
     /** @type {Number} */
+    this.scale = 1;
+    /** @type {Number} */
     this.zIndex = 0;
     /** @type {Number} */
     this.scrollX = 0;
@@ -206,6 +208,7 @@ class ScrollContainer {
       height = $el.clientHeight;
       this.top = elRect.top;
       this.left = elRect.left;
+      this.scale = elRect.width ? width / elRect.width : (elRect.height ? height / elRect.height : 1);
     }
     this.width = width;
     this.height = height;
@@ -731,8 +734,9 @@ class ScrollObserver {
       }
     }
     const rect = $target.getBoundingClientRect();
-    const offset = isHori ? rect.left + container.scrollX - container.left : rect.top + container.scrollY - container.top;
-    const targetSize = isHori ? rect.width : rect.height;
+    const scale = container.scale;
+    const offset = (isHori ? rect.left + container.scrollX - container.left : rect.top + container.scrollY - container.top) * scale;
+    const targetSize = (isHori ? rect.width : rect.height) * scale;
     const containerSize = isHori ? container.width : container.height;
     const scrollSize = isHori ? container.scrollWidth : container.scrollHeight;
     const maxScroll = scrollSize - containerSize;

package/dist/modules/events/scroll.d.ts

@@ -134,6 +134,8 @@ declare class ScrollContainer {
     /** @type {Number} */
     top: number;
     /** @type {Number} */
+    scale: number;
+    /** @type {Number} */
     zIndex: number;
     /** @type {Number} */
     scrollX: number;

package/dist/modules/events/scroll.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - events - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -93,6 +93,8 @@ class ScrollContainer {
     /** @type {Number} */
     this.top = 0;
     /** @type {Number} */
+    this.scale = 1;
+    /** @type {Number} */
     this.zIndex = 0;
     /** @type {Number} */
     this.scrollX = 0;
@@ -204,6 +206,7 @@ class ScrollContainer {
       height = $el.clientHeight;
       this.top = elRect.top;
       this.left = elRect.left;
+      this.scale = elRect.width ? width / elRect.width : (elRect.height ? height / elRect.height : 1);
     }
     this.width = width;
     this.height = height;
@@ -729,8 +732,9 @@ class ScrollObserver {
       }
     }
     const rect = $target.getBoundingClientRect();
-    const offset = isHori ? rect.left + container.scrollX - container.left : rect.top + container.scrollY - container.top;
-    const targetSize = isHori ? rect.width : rect.height;
+    const scale = container.scale;
+    const offset = (isHori ? rect.left + container.scrollX - container.left : rect.top + container.scrollY - container.top) * scale;
+    const targetSize = (isHori ? rect.width : rect.height) * scale;
     const containerSize = isHori ? container.width : container.height;
     const scrollSize = isHori ? container.scrollWidth : container.scrollHeight;
     const maxScroll = scrollSize - containerSize;

package/dist/modules/index.cjs

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

package/dist/modules/index.js

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

package/dist/modules/scope/index.cjs

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

package/dist/modules/scope/index.js

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

package/dist/modules/scope/scope.cjs

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

package/dist/modules/scope/scope.js

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

package/dist/modules/svg/drawable.cjs

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

package/dist/modules/svg/drawable.js

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

package/dist/modules/svg/helpers.cjs

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

package/dist/modules/svg/helpers.js

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

package/dist/modules/svg/index.cjs

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

package/dist/modules/svg/index.js

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

package/dist/modules/svg/morphto.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -24,8 +24,18 @@ var helpers = require('./helpers.cjs');
  * @return {FunctionValue}
  */
 const morphTo = (path2, precision = .33) => ($path1) => {
+  const tagName1 = ($path1.tagName || '').toLowerCase();
+  if (!tagName1.match(/^(path|polygon|polyline)$/)) {
+    throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
+  }
   const $path2 = /** @type {SVGGeometryElement} */(helpers.getPath(path2));
-  if (!$path2) return;
+  if (!$path2) {
+    throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
+  }
+  const tagName2 = ($path2.tagName || '').toLowerCase();
+  if (!tagName2.match(/^(path|polygon|polyline)$/)) {
+    throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
+  }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
   const previousPoints = $path1[consts.morphPointsSymbol];

package/dist/modules/svg/morphto.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -22,8 +22,18 @@ import { getPath } from './helpers.js';
  * @return {FunctionValue}
  */
 const morphTo = (path2, precision = .33) => ($path1) => {
+  const tagName1 = ($path1.tagName || '').toLowerCase();
+  if (!tagName1.match(/^(path|polygon|polyline)$/)) {
+    throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
+  }
   const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
-  if (!$path2) return;
+  if (!$path2) {
+    throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
+  }
+  const tagName2 = ($path2.tagName || '').toLowerCase();
+  if (!tagName2.match(/^(path|polygon|polyline)$/)) {
+    throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
+  }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
   const previousPoints = $path1[morphPointsSymbol];

package/dist/modules/svg/motionpath.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -24,20 +24,24 @@ var helpers = require('./helpers.cjs');
 
 /**
  * @param {SVGGeometryElement} $path
+ * @param {Number} totalLength
  * @param {Number} progress
  * @param {Number}lookup
  * @return {DOMPoint}
  */
-const getPathPoint = ($path, progress, lookup = 0) => {
-  return $path.getPointAtLength(progress + lookup >= 1 ? progress + lookup : 0);
+const getPathPoint = ($path, totalLength, progress, lookup = 0) => {
+  const point = progress + lookup;
+  const pointOnPath = (point % totalLength + totalLength) % totalLength;
+  return $path.getPointAtLength(pointOnPath);
 };
 
 /**
  * @param {SVGGeometryElement} $path
  * @param {String} pathProperty
+ * @param {Number} [offset=0]
  * @return {FunctionValue}
  */
-const getPathProgess = ($path, pathProperty) => {
+const getPathProgess = ($path, pathProperty, offset = 0) => {
   return $el => {
     const totalLength = +($path.getTotalLength());
     const inSvg = $el[consts.isSvgSymbol];
@@ -48,12 +52,14 @@ const getPathProgess = ($path, pathProperty) => {
       to: totalLength,
       /** @type {TweenModifier} */
       modifier: progress => {
+        const offsetLength = offset * totalLength;
+        const newProgress = progress + offsetLength;
         if (pathProperty === 'a') {
-          const p0 = getPathPoint($path, progress, -1);
-          const p1 = getPathPoint($path, progress, 1);
+          const p0 = getPathPoint($path, totalLength, newProgress, -1);
+          const p1 = getPathPoint($path, totalLength, newProgress, 1);
           return helpers$1.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / helpers$1.PI;
         } else {
-          const p = getPathPoint($path, progress, 0);
+          const p = getPathPoint($path, totalLength, newProgress, 0);
           return pathProperty === 'x' ?
             inSvg || !ctm ? p.x : p.x * ctm.a + p.y * ctm.c + ctm.e :
             inSvg || !ctm ? p.y : p.x * ctm.b + p.y * ctm.d + ctm.f
@@ -65,14 +71,15 @@ const getPathProgess = ($path, pathProperty) => {
 
 /**
  * @param {TargetsParam} path
+ * @param {Number} [offset=0]
  */
-const createMotionPath = path => {
+const createMotionPath = (path, offset = 0) => {
   const $path = helpers.getPath(path);
   if (!$path) return;
   return {
-    translateX: getPathProgess($path, 'x'),
-    translateY: getPathProgess($path, 'y'),
-    rotate: getPathProgess($path, 'a'),
+    translateX: getPathProgess($path, 'x', offset),
+    translateY: getPathProgess($path, 'y', offset),
+    rotate: getPathProgess($path, 'a', offset),
   }
 };
 

package/dist/modules/svg/motionpath.d.ts

@@ -1,4 +1,4 @@
-export function createMotionPath(path: TargetsParam): {
+export function createMotionPath(path: TargetsParam, offset?: number): {
     translateX: FunctionValue;
     translateY: FunctionValue;
     rotate: FunctionValue;

package/dist/modules/svg/motionpath.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -22,20 +22,24 @@ import { getPath } from './helpers.js';
 
 /**
  * @param {SVGGeometryElement} $path
+ * @param {Number} totalLength
  * @param {Number} progress
  * @param {Number}lookup
  * @return {DOMPoint}
  */
-const getPathPoint = ($path, progress, lookup = 0) => {
-  return $path.getPointAtLength(progress + lookup >= 1 ? progress + lookup : 0);
+const getPathPoint = ($path, totalLength, progress, lookup = 0) => {
+  const point = progress + lookup;
+  const pointOnPath = (point % totalLength + totalLength) % totalLength;
+  return $path.getPointAtLength(pointOnPath);
 };
 
 /**
  * @param {SVGGeometryElement} $path
  * @param {String} pathProperty
+ * @param {Number} [offset=0]
  * @return {FunctionValue}
  */
-const getPathProgess = ($path, pathProperty) => {
+const getPathProgess = ($path, pathProperty, offset = 0) => {
   return $el => {
     const totalLength = +($path.getTotalLength());
     const inSvg = $el[isSvgSymbol];
@@ -46,12 +50,14 @@ const getPathProgess = ($path, pathProperty) => {
       to: totalLength,
       /** @type {TweenModifier} */
       modifier: progress => {
+        const offsetLength = offset * totalLength;
+        const newProgress = progress + offsetLength;
         if (pathProperty === 'a') {
-          const p0 = getPathPoint($path, progress, -1);
-          const p1 = getPathPoint($path, progress, 1);
+          const p0 = getPathPoint($path, totalLength, newProgress, -1);
+          const p1 = getPathPoint($path, totalLength, newProgress, 1);
           return atan2(p1.y - p0.y, p1.x - p0.x) * 180 / PI;
         } else {
-          const p = getPathPoint($path, progress, 0);
+          const p = getPathPoint($path, totalLength, newProgress, 0);
           return pathProperty === 'x' ?
             inSvg || !ctm ? p.x : p.x * ctm.a + p.y * ctm.c + ctm.e :
             inSvg || !ctm ? p.y : p.x * ctm.b + p.y * ctm.d + ctm.f
@@ -63,14 +69,15 @@ const getPathProgess = ($path, pathProperty) => {
 
 /**
  * @param {TargetsParam} path
+ * @param {Number} [offset=0]
  */
-const createMotionPath = path => {
+const createMotionPath = (path, offset = 0) => {
   const $path = getPath(path);
   if (!$path) return;
   return {
-    translateX: getPathProgess($path, 'x'),
-    translateY: getPathProgess($path, 'y'),
-    rotate: getPathProgess($path, 'a'),
+    translateX: getPathProgess($path, 'x', offset),
+    translateY: getPathProgess($path, 'y', offset),
+    rotate: getPathProgess($path, 'a', offset),
   }
 };
 

package/dist/modules/text/index.cjs

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

package/dist/modules/text/index.js

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

package/dist/modules/text/split.cjs

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

package/dist/modules/text/split.js

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

package/dist/modules/timeline/index.cjs

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

package/dist/modules/timeline/index.js

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

package/dist/modules/timeline/position.cjs

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

package/dist/modules/timeline/position.js

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

package/dist/modules/timeline/timeline.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -81,7 +81,7 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
   const tlChild = targets ?
     new animation.JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
     new timer.Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
-  tlChild.init(1);
+  tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
   helpers.addChild(tl, tlChild);
   helpers.forEachChildren(tl, (/** @type {Renderable} */child) => {
@@ -185,7 +185,7 @@ class Timeline extends timer.Timer {
           position.parseTimelinePosition(this,a2),
         );
       }
-      return this.init(1); // 1 = internalRender
+      return this.init(true);
     }
   }
 
@@ -294,8 +294,12 @@ class Timeline extends timer.Timer {
   }
 
   /**
-   * @param  {Callback<this>} [callback]
-   * @return {Promise}
+   * @typedef {this & {then: null}} ResolvedTimeline
+   */
+
+  /**
+   * @param  {Callback<ResolvedTimeline>} [callback]
+   * @return Promise<this>
    */
   then(callback) {
     return super.then(callback);

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

@@ -144,10 +144,15 @@ export class Timeline extends Timer {
      */
     revert(): this;
     /**
-     * @param  {Callback<this>} [callback]
-     * @return {Promise}
+     * @typedef {this & {then: null}} ResolvedTimeline
      */
-    then(callback?: Callback<this>): Promise<any>;
+    /**
+     * @param  {Callback<ResolvedTimeline>} [callback]
+     * @return Promise<this>
+     */
+    then(callback?: Callback<this & {
+        then: null;
+    }>): Promise<any>;
 }
 export function createTimeline(parameters?: TimelineParams): Timeline;
 import { Timer } from '../timer/timer.js';

package/dist/modules/timeline/timeline.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -79,7 +79,7 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
   const tlChild = targets ?
     new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
     new Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
-  tlChild.init(1);
+  tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
   addChild(tl, tlChild);
   forEachChildren(tl, (/** @type {Renderable} */child) => {
@@ -183,7 +183,7 @@ class Timeline extends Timer {
           parseTimelinePosition(this,a2),
         );
       }
-      return this.init(1); // 1 = internalRender
+      return this.init(true);
     }
   }
 
@@ -292,8 +292,12 @@ class Timeline extends Timer {
   }
 
   /**
-   * @param  {Callback<this>} [callback]
-   * @return {Promise}
+   * @typedef {this & {then: null}} ResolvedTimeline
+   */
+
+  /**
+   * @param  {Callback<ResolvedTimeline>} [callback]
+   * @return Promise<this>
    */
   then(callback) {
     return super.then(callback);

package/dist/modules/timer/index.cjs

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

package/dist/modules/timer/index.js

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