animejs 4.1.2 → 4.2.0-beta.0

package/dist/modules/svg/drawable.js

@@ -0,0 +1,117 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { proxyTargetSymbol, K } from '../core/consts.js';
+import { isFnc, sqrt } from '../core/helpers.js';
+import { parseTargets } from '../core/targets.js';
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   DrawableSVGGeometry,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param {SVGGeometryElement} [$el]
+ * @return {Number}
+ */
+const getScaleFactor = $el => {
+  let scaleFactor = 1;
+  if ($el && $el.getCTM) {
+    const ctm = $el.getCTM();
+    if (ctm) {
+      const scaleX = sqrt(ctm.a * ctm.a + ctm.b * ctm.b);
+      const scaleY = sqrt(ctm.c * ctm.c + ctm.d * ctm.d);
+      scaleFactor = (scaleX + scaleY) / 2;
+    }
+  }
+  return scaleFactor;
+};
+
+/**
+ * Creates a proxy that wraps an SVGGeometryElement and adds drawing functionality.
+ * @param {SVGGeometryElement} $el - The SVG element to transform into a drawable
+ * @param {number} start - Starting position (0-1)
+ * @param {number} end - Ending position (0-1)
+ * @return {DrawableSVGGeometry} - Returns a proxy that preserves the original element's type with additional 'draw' attribute functionality
+ */
+const createDrawableProxy = ($el, start, end) => {
+  const pathLength = K;
+  const computedStyles = getComputedStyle($el);
+  const strokeLineCap = computedStyles.strokeLinecap;
+  // @ts-ignore
+  const $scalled = computedStyles.vectorEffect === 'non-scaling-stroke' ? $el : null;
+  let currentCap = strokeLineCap;
+
+  const proxy = new Proxy($el, {
+    get(target, property) {
+      const value = target[property];
+      if (property === proxyTargetSymbol) return target;
+      if (property === 'setAttribute') {
+        return (...args) => {
+          if (args[0] === 'draw') {
+            const value = args[1];
+            const values = value.split(' ');
+            const v1 = +values[0];
+            const v2 = +values[1];
+            // TOTO: Benchmark if performing two slices is more performant than one split
+            // const spaceIndex = value.indexOf(' ');
+            // const v1 = round(+value.slice(0, spaceIndex), precision);
+            // const v2 = round(+value.slice(spaceIndex + 1), precision);
+            const scaleFactor = getScaleFactor($scalled);
+            const os = v1 * -pathLength * scaleFactor;
+            const d1 = (v2 * pathLength * scaleFactor) + os;
+            const d2 = (pathLength * scaleFactor +
+                      ((v1 === 0 && v2 === 1) || (v1 === 1 && v2 === 0) ? 0 : 10 * scaleFactor) - d1);
+            if (strokeLineCap !== 'butt') {
+              const newCap = v1 === v2 ? 'butt' : strokeLineCap;
+              if (currentCap !== newCap) {
+                target.style.strokeLinecap = `${newCap}`;
+                currentCap = newCap;
+              }
+            }
+            target.setAttribute('stroke-dashoffset', `${os}`);
+            target.setAttribute('stroke-dasharray', `${d1} ${d2}`);
+          }
+          return Reflect.apply(value, target, args);
+        };
+      }
+
+      if (isFnc(value)) {
+        return (...args) => Reflect.apply(value, target, args);
+      } else {
+        return value;
+      }
+    }
+  });
+
+  if ($el.getAttribute('pathLength') !== `${pathLength}`) {
+    $el.setAttribute('pathLength', `${pathLength}`);
+    proxy.setAttribute('draw', `${start} ${end}`);
+  }
+
+  return /** @type {DrawableSVGGeometry} */(proxy);
+};
+
+/**
+ * Creates drawable proxies for multiple SVG elements.
+ * @param {TargetsParam} selector - CSS selector, SVG element, or array of elements and selectors
+ * @param {number} [start=0] - Starting position (0-1)
+ * @param {number} [end=0] - Ending position (0-1)
+ * @return {Array<DrawableSVGGeometry>} - Array of proxied elements with drawing functionality
+ */
+const createDrawable = (selector, start = 0, end = 0) => {
+  const els = parseTargets(selector);
+  return els.map($el => createDrawableProxy(
+    /** @type {SVGGeometryElement} */($el),
+    start,
+    end
+  ));
+};
+
+export { createDrawable };

package/dist/modules/svg/helpers.cjs

@@ -0,0 +1,30 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var helpers = require('../core/helpers.cjs');
+var targets = require('../core/targets.cjs');
+
+/**
+ * @import {
+ *   TargetsParam,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path
+ * @return {SVGGeometryElement|void}
+ */
+const getPath = path => {
+  const parsedTargets = targets.parseTargets(path);
+  const $parsedSvg = /** @type {SVGGeometryElement} */(parsedTargets[0]);
+  if (!$parsedSvg || !helpers.isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
+  return $parsedSvg;
+};
+
+exports.getPath = getPath;

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

@@ -0,0 +1,2 @@
+export function getPath(path: TargetsParam): SVGGeometryElement | void;
+import type { TargetsParam } from '../types/index.js';

package/dist/modules/svg/helpers.js

@@ -0,0 +1,28 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { isSvg } from '../core/helpers.js';
+import { parseTargets } from '../core/targets.js';
+
+/**
+ * @import {
+ *   TargetsParam,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path
+ * @return {SVGGeometryElement|void}
+ */
+const getPath = path => {
+  const parsedTargets = parseTargets(path);
+  const $parsedSvg = /** @type {SVGGeometryElement} */(parsedTargets[0]);
+  if (!$parsedSvg || !isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
+  return $parsedSvg;
+};
+
+export { getPath };

package/dist/modules/svg/index.cjs

@@ -0,0 +1,18 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var motionpath = require('./motionpath.cjs');
+var drawable = require('./drawable.cjs');
+var morphto = require('./morphto.cjs');
+
+
+
+exports.createMotionPath = motionpath.createMotionPath;
+exports.createDrawable = drawable.createDrawable;
+exports.morphTo = morphto.morphTo;

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

@@ -0,0 +1,3 @@
+export { createMotionPath } from "./motionpath.js";
+export { createDrawable } from "./drawable.js";
+export { morphTo } from "./morphto.js";

package/dist/modules/svg/index.js

@@ -0,0 +1,10 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+export { createMotionPath } from './motionpath.js';
+export { createDrawable } from './drawable.js';
+export { morphTo } from './morphto.js';

package/dist/modules/svg/morphto.cjs

@@ -0,0 +1,58 @@
+/**
+ * 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
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path2
+ * @param  {Number} [precision]
+ * @return {FunctionValue}
+ */
+const morphTo = (path2, precision = .33) => ($path1) => {
+  const $path2 = /** @type {SVGGeometryElement} */(helpers.getPath(path2));
+  if (!$path2) return;
+  const isPath = $path1.tagName === 'path';
+  const separator = isPath ? ' ' : ',';
+  const previousPoints = $path1[consts.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 + helpers$1.round(pointOnPath1.x, 3) + separator + pointOnPath1.y + ' ';
+      v2 += prefix + helpers$1.round(pointOnPath2.x, 3) + separator + pointOnPath2.y + ' ';
+    }
+  }
+
+  $path1[consts.morphPointsSymbol] = v2;
+
+  return [v1, v2];
+};
+
+exports.morphTo = morphTo;

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

@@ -0,0 +1,3 @@
+export function morphTo(path2: TargetsParam, precision?: number): FunctionValue;
+import type { TargetsParam } from '../types/index.js';
+import type { FunctionValue } from '../types/index.js';

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';