animejs 4.2.0-beta.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
  */
@@ -17,7 +17,7 @@ var timer = require('../timer/timer.cjs');
 var target = require('../utils/target.cjs');
 var time = require('../utils/time.cjs');
 var none = require('../easings/none.cjs');
-var eases = require('../easings/eases.cjs');
+var parser = require('../easings/eases/parser.cjs');
 
 /**
  * @import {
@@ -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;
@@ -368,7 +371,7 @@ class ScrollObserver {
   constructor(parameters = {}) {
     if (globals.scope.current) globals.scope.current.register(this);
     const syncMode = values.setValue(parameters.sync, 'play pause');
-    const ease = syncMode ? eases.parseEase(/** @type {EasingParam} */(syncMode)) : null;
+    const ease = syncMode ? parser.parseEase(/** @type {EasingParam} */(syncMode)) : null;
     const isLinear = syncMode && (syncMode === 'linear' || syncMode === none.none);
     const isEase = syncMode && !(ease === none.none && !isLinear);
     const isSmooth = syncMode && (helpers.isNum(syncMode) || syncMode === true || isLinear);
@@ -435,6 +438,8 @@ class ScrollObserver {
     /** @type {Boolean} */
     this.reverted = false;
     /** @type {Boolean} */
+    this.ready = false;
+    /** @type {Boolean} */
     this.completed = false;
     /** @type {Boolean} */
     this.began = false;
@@ -444,8 +449,6 @@ class ScrollObserver {
     this.forceEnter = false;
     /** @type {Boolean} */
     this.hasEntered = false;
-    // /** @type {Array.<Number>} */
-    // this.offsets = [];
     /** @type {Number} */
     this.offset = 0;
     /** @type {Number} */
@@ -493,6 +496,8 @@ class ScrollObserver {
       // Make sure to pause the linked object in case it's added later
       linked.pause();
       this.linked = linked;
+      // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
+      if (!helpers.isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
       // Try to use a target of the linked object if no target parameters specified
       if (!this._params.target) {
         /** @type {HTMLElement} */
@@ -532,6 +537,8 @@ class ScrollObserver {
   }
 
   refresh() {
+    // This flag is used to prevent running handleScroll() outside of this.refresh() with values not yet calculated
+    this.ready = true;
     this.reverted = false;
     const params = this._params;
     this.repeat = values.setValue(parseScrollObserverFunctionParameter(params.repeat, this), true);
@@ -727,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;
@@ -777,8 +785,6 @@ class ScrollObserver {
     const offsetStart = parsedEnterTarget + offset - parsedEnterContainer;
     const offsetEnd = parsedLeaveTarget + offset - parsedLeaveContainer;
     const scrollDelta = offsetEnd - offsetStart;
-    // this.offsets[0] = offsetX;
-    // this.offsets[1] = offsetY;
     this.offset = offset;
     this.offsetStart = offsetStart;
     this.offsetEnd = offsetEnd;
@@ -797,6 +803,7 @@ class ScrollObserver {
   }
 
   handleScroll() {
+    if (!this.ready) return;
     const linked = this.linked;
     const sync = this.sync;
     const syncEase = this.syncEase;
@@ -920,6 +927,7 @@ class ScrollObserver {
       this.removeDebug();
     }
     this.reverted = true;
+    this.ready = false;
     return this;
   }
 

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

@@ -59,6 +59,8 @@ export class ScrollObserver {
     /** @type {Boolean} */
     reverted: boolean;
     /** @type {Boolean} */
+    ready: boolean;
+    /** @type {Boolean} */
     completed: boolean;
     /** @type {Boolean} */
     began: boolean;
@@ -132,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
  */
@@ -15,7 +15,7 @@ import { Timer } from '../timer/timer.js';
 import { get, set } from '../utils/target.js';
 import { sync } from '../utils/time.js';
 import { none } from '../easings/none.js';
-import { parseEase } from '../easings/eases.js';
+import { parseEase } from '../easings/eases/parser.js';
 
 /**
  * @import {
@@ -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;
@@ -433,6 +436,8 @@ class ScrollObserver {
     /** @type {Boolean} */
     this.reverted = false;
     /** @type {Boolean} */
+    this.ready = false;
+    /** @type {Boolean} */
     this.completed = false;
     /** @type {Boolean} */
     this.began = false;
@@ -442,8 +447,6 @@ class ScrollObserver {
     this.forceEnter = false;
     /** @type {Boolean} */
     this.hasEntered = false;
-    // /** @type {Array.<Number>} */
-    // this.offsets = [];
     /** @type {Number} */
     this.offset = 0;
     /** @type {Number} */
@@ -491,6 +494,8 @@ class ScrollObserver {
       // Make sure to pause the linked object in case it's added later
       linked.pause();
       this.linked = linked;
+      // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
+      if (!isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
       // Try to use a target of the linked object if no target parameters specified
       if (!this._params.target) {
         /** @type {HTMLElement} */
@@ -530,6 +535,8 @@ class ScrollObserver {
   }
 
   refresh() {
+    // This flag is used to prevent running handleScroll() outside of this.refresh() with values not yet calculated
+    this.ready = true;
     this.reverted = false;
     const params = this._params;
     this.repeat = setValue(parseScrollObserverFunctionParameter(params.repeat, this), true);
@@ -725,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;
@@ -775,8 +783,6 @@ class ScrollObserver {
     const offsetStart = parsedEnterTarget + offset - parsedEnterContainer;
     const offsetEnd = parsedLeaveTarget + offset - parsedLeaveContainer;
     const scrollDelta = offsetEnd - offsetStart;
-    // this.offsets[0] = offsetX;
-    // this.offsets[1] = offsetY;
     this.offset = offset;
     this.offsetStart = offsetStart;
     this.offsetEnd = offsetEnd;
@@ -795,6 +801,7 @@ class ScrollObserver {
   }
 
   handleScroll() {
+    if (!this.ready) return;
     const linked = this.linked;
     const sync = this.sync;
     const syncEase = this.syncEase;
@@ -918,6 +925,7 @@ class ScrollObserver {
       this.removeDebug();
     }
     this.reverted = true;
+    this.ready = false;
     return this;
   }
 

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
  */
@@ -14,19 +14,18 @@ var animatable = require('./animatable/animatable.cjs');
 var draggable = require('./draggable/draggable.cjs');
 var scope = require('./scope/scope.cjs');
 var scroll = require('./events/scroll.cjs');
-var spring = require('./spring/spring.cjs');
 var engine = require('./engine/engine.cjs');
 var index = require('./easings/index.cjs');
 var index$1 = require('./utils/index.cjs');
 var index$2 = require('./svg/index.cjs');
 var index$3 = require('./text/index.cjs');
 var waapi = require('./waapi/waapi.cjs');
-var none = require('./easings/none.cjs');
-var cubicBezier = require('./easings/cubic-bezier.cjs');
-var steps = require('./easings/steps.cjs');
-var linear = require('./easings/linear.cjs');
-var irregular = require('./easings/irregular.cjs');
-var eases = require('./easings/eases.cjs');
+var index$4 = require('./easings/cubic-bezier/index.cjs');
+var index$5 = require('./easings/steps/index.cjs');
+var index$6 = require('./easings/linear/index.cjs');
+var index$7 = require('./easings/irregular/index.cjs');
+var index$8 = require('./easings/spring/index.cjs');
+var parser = require('./easings/eases/parser.cjs');
 var chainable = require('./utils/chainable.cjs');
 var random = require('./utils/random.cjs');
 var time = require('./utils/time.cjs');
@@ -56,8 +55,6 @@ exports.createScope = scope.createScope;
 exports.ScrollObserver = scroll.ScrollObserver;
 exports.onScroll = scroll.onScroll;
 exports.scrollContainers = scroll.scrollContainers;
-exports.Spring = spring.Spring;
-exports.createSpring = spring.createSpring;
 exports.engine = engine.engine;
 exports.easings = index;
 exports.utils = index$1;
@@ -65,12 +62,14 @@ exports.svg = index$2;
 exports.text = index$3;
 exports.WAAPIAnimation = waapi.WAAPIAnimation;
 exports.waapi = waapi.waapi;
-exports.none = none.none;
-exports.cubicBezier = cubicBezier.cubicBezier;
-exports.steps = steps.steps;
-exports.linear = linear.linear;
-exports.irregular = irregular.irregular;
-exports.eases = eases.eases;
+exports.cubicBezier = index$4.cubicBezier;
+exports.steps = index$5.steps;
+exports.linear = index$6.linear;
+exports.irregular = index$7.irregular;
+exports.Spring = index$8.Spring;
+exports.createSpring = index$8.createSpring;
+exports.spring = index$8.spring;
+exports.eases = parser.eases;
 exports.clamp = chainable.clamp;
 exports.damp = chainable.damp;
 exports.degToRad = chainable.degToRad;

package/dist/modules/index.d.ts

@@ -5,7 +5,6 @@ export * from "./animatable/index.js";
 export * from "./draggable/index.js";
 export * from "./scope/index.js";
 export * from "./events/index.js";
-export * from "./spring/index.js";
 export * from "./engine/index.js";
 export * from "./easings/index.js";
 export * from "./utils/index.js";

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
  */
@@ -12,7 +12,6 @@ export { Animatable, createAnimatable } from './animatable/animatable.js';
 export { Draggable, createDraggable } from './draggable/draggable.js';
 export { Scope, createScope } from './scope/scope.js';
 export { ScrollObserver, onScroll, scrollContainers } from './events/scroll.js';
-export { Spring, createSpring } from './spring/spring.js';
 export { engine } from './engine/engine.js';
 import * as index from './easings/index.js';
 export { index as easings };
@@ -23,12 +22,12 @@ export { index$2 as svg };
 import * as index$3 from './text/index.js';
 export { index$3 as text };
 export { WAAPIAnimation, waapi } from './waapi/waapi.js';
-export { none } from './easings/none.js';
-export { cubicBezier } from './easings/cubic-bezier.js';
-export { steps } from './easings/steps.js';
-export { linear } from './easings/linear.js';
-export { irregular } from './easings/irregular.js';
-export { eases } from './easings/eases.js';
+export { cubicBezier } from './easings/cubic-bezier/index.js';
+export { steps } from './easings/steps/index.js';
+export { linear } from './easings/linear/index.js';
+export { irregular } from './easings/irregular/index.js';
+export { Spring, createSpring, spring } from './easings/spring/index.js';
+export { eases } from './easings/eases/parser.js';
 export { clamp, damp, degToRad, lerp, mapRange, padEnd, padStart, radToDeg, round, roundPad, snap, wrap } from './utils/chainable.js';
 export { createSeededRandom, random, randomPick, shuffle } from './utils/random.js';
 export { keepTime, sync } from './utils/time.js';

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
  */