animejs 4.1.4 → 4.2.0

package/dist/modules/svg/morphto.js

@@ -0,0 +1,56 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { morphPointsSymbol } from '../core/consts.js';
+import { round } from '../core/helpers.js';
+import { getPath } from './helpers.js';
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   FunctionValue
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path2
+ * @param  {Number} [precision]
+ * @return {FunctionValue}
+ */
+const morphTo = (path2, precision = .33) => ($path1) => {
+  const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
+  if (!$path2) return;
+  const isPath = $path1.tagName === 'path';
+  const separator = isPath ? ' ' : ',';
+  const previousPoints = $path1[morphPointsSymbol];
+  if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
+
+  let v1 = '', v2 = '';
+
+  if (!precision) {
+    v1 = $path1.getAttribute(isPath ? 'd' : 'points');
+    v2 = $path2.getAttribute(isPath ? 'd' : 'points');
+  } else {
+    const length1 = /** @type {SVGGeometryElement} */($path1).getTotalLength();
+    const length2 = $path2.getTotalLength();
+    const maxPoints = Math.max(Math.ceil(length1 * precision), Math.ceil(length2 * precision));
+    for (let i = 0; i < maxPoints; i++) {
+      const t = i / (maxPoints - 1);
+      const pointOnPath1 = /** @type {SVGGeometryElement} */($path1).getPointAtLength(length1 * t);
+      const pointOnPath2 = $path2.getPointAtLength(length2 * t);
+      const prefix = isPath ? (i === 0 ? 'M' : 'L') : '';
+      v1 += prefix + round(pointOnPath1.x, 3) + separator + pointOnPath1.y + ' ';
+      v2 += prefix + round(pointOnPath2.x, 3) + separator + pointOnPath2.y + ' ';
+    }
+  }
+
+  $path1[morphPointsSymbol] = v2;
+
+  return [v1, v2];
+};
+
+export { morphTo };

package/dist/modules/svg/motionpath.cjs

@@ -0,0 +1,79 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('../core/consts.cjs');
+var helpers$1 = require('../core/helpers.cjs');
+var helpers = require('./helpers.cjs');
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   FunctionValue,
+ *   TweenObjectValue,
+ *   TweenModifier,
+ * } from '../types/index.js'
+*/
+
+// Motion path animation
+
+/**
+ * @param {SVGGeometryElement} $path
+ * @param {Number} progress
+ * @param {Number}lookup
+ * @return {DOMPoint}
+ */
+const getPathPoint = ($path, progress, lookup = 0) => {
+  return $path.getPointAtLength(progress + lookup >= 1 ? progress + lookup : 0);
+};
+
+/**
+ * @param {SVGGeometryElement} $path
+ * @param {String} pathProperty
+ * @return {FunctionValue}
+ */
+const getPathProgess = ($path, pathProperty) => {
+  return $el => {
+    const totalLength = +($path.getTotalLength());
+    const inSvg = $el[consts.isSvgSymbol];
+    const ctm = $path.getCTM();
+    /** @type {TweenObjectValue} */
+    return {
+      from: 0,
+      to: totalLength,
+      /** @type {TweenModifier} */
+      modifier: progress => {
+        if (pathProperty === 'a') {
+          const p0 = getPathPoint($path, progress, -1);
+          const p1 = getPathPoint($path, progress, 1);
+          return helpers$1.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / helpers$1.PI;
+        } else {
+          const p = getPathPoint($path, progress, 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
+        }
+      }
+    }
+  }
+};
+
+/**
+ * @param {TargetsParam} path
+ */
+const createMotionPath = path => {
+  const $path = helpers.getPath(path);
+  if (!$path) return;
+  return {
+    translateX: getPathProgess($path, 'x'),
+    translateY: getPathProgess($path, 'y'),
+    rotate: getPathProgess($path, 'a'),
+  }
+};
+
+exports.createMotionPath = createMotionPath;

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

@@ -0,0 +1,7 @@
+export function createMotionPath(path: TargetsParam): {
+    translateX: FunctionValue;
+    translateY: FunctionValue;
+    rotate: FunctionValue;
+};
+import type { TargetsParam } from '../types/index.js';
+import type { FunctionValue } from '../types/index.js';

package/dist/modules/svg/motionpath.js

@@ -0,0 +1,77 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { isSvgSymbol } from '../core/consts.js';
+import { atan2, PI } from '../core/helpers.js';
+import { getPath } from './helpers.js';
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   FunctionValue,
+ *   TweenObjectValue,
+ *   TweenModifier,
+ * } from '../types/index.js'
+*/
+
+// Motion path animation
+
+/**
+ * @param {SVGGeometryElement} $path
+ * @param {Number} progress
+ * @param {Number}lookup
+ * @return {DOMPoint}
+ */
+const getPathPoint = ($path, progress, lookup = 0) => {
+  return $path.getPointAtLength(progress + lookup >= 1 ? progress + lookup : 0);
+};
+
+/**
+ * @param {SVGGeometryElement} $path
+ * @param {String} pathProperty
+ * @return {FunctionValue}
+ */
+const getPathProgess = ($path, pathProperty) => {
+  return $el => {
+    const totalLength = +($path.getTotalLength());
+    const inSvg = $el[isSvgSymbol];
+    const ctm = $path.getCTM();
+    /** @type {TweenObjectValue} */
+    return {
+      from: 0,
+      to: totalLength,
+      /** @type {TweenModifier} */
+      modifier: progress => {
+        if (pathProperty === 'a') {
+          const p0 = getPathPoint($path, progress, -1);
+          const p1 = getPathPoint($path, progress, 1);
+          return atan2(p1.y - p0.y, p1.x - p0.x) * 180 / PI;
+        } else {
+          const p = getPathPoint($path, progress, 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
+        }
+      }
+    }
+  }
+};
+
+/**
+ * @param {TargetsParam} path
+ */
+const createMotionPath = path => {
+  const $path = getPath(path);
+  if (!$path) return;
+  return {
+    translateX: getPathProgess($path, 'x'),
+    translateY: getPathProgess($path, 'y'),
+    rotate: getPathProgess($path, 'a'),
+  }
+};
+
+export { createMotionPath };

package/dist/modules/text/index.cjs

@@ -0,0 +1,16 @@
+/**
+ * Anime.js - text - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var split = require('./split.cjs');
+
+
+
+exports.TextSplitter = split.TextSplitter;
+exports.split = split.split;
+exports.splitText = split.splitText;

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

@@ -0,0 +1 @@
+export * from "./split.js";

package/dist/modules/text/index.js

@@ -0,0 +1,8 @@
+/**
+ * Anime.js - text - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+export { TextSplitter, split, splitText } from './split.js';