animejs 4.1.4 → 4.2.0

package/dist/modules/core/targets.cjs

@@ -0,0 +1,136 @@
+/**
+ * Anime.js - core - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var globals = require('./globals.cjs');
+var consts = require('./consts.cjs');
+var helpers = require('./helpers.cjs');
+
+/**
+* @import {
+*   DOMTarget,
+*   DOMTargetsParam,
+*   JSTargetsArray,
+*   TargetsParam,
+*   JSTargetsParam,
+*   TargetsArray,
+*   DOMTargetsArray,
+* } from '../types/index.js'
+*/
+
+/**
+ * @param  {DOMTargetsParam|TargetsParam} v
+ * @return {NodeList|HTMLCollection}
+ */
+function getNodeList(v) {
+  const n = helpers.isStr(v) ? globals.scope.root.querySelectorAll(v) : v;
+  if (n instanceof NodeList || n instanceof HTMLCollection) return n;
+}
+
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+function parseTargets(targets) {
+  if (helpers.isNil(targets)) return /** @type {TargetsArray} */([]);
+  if (!consts.isBrowser) return /** @type {JSTargetsArray} */(helpers.isArr(targets) && targets.flat(Infinity) || [targets]);
+  if (helpers.isArr(targets)) {
+    const flattened = targets.flat(Infinity);
+    /** @type {TargetsArray} */
+    const parsed = [];
+    for (let i = 0, l = flattened.length; i < l; i++) {
+      const item = flattened[i];
+      if (!helpers.isNil(item)) {
+        const nodeList = getNodeList(item);
+        if (nodeList) {
+          for (let j = 0, jl = nodeList.length; j < jl; j++) {
+            const subItem = nodeList[j];
+            if (!helpers.isNil(subItem)) {
+              let isDuplicate = false;
+              for (let k = 0, kl = parsed.length; k < kl; k++) {
+                if (parsed[k] === subItem) {
+                  isDuplicate = true;
+                  break;
+                }
+              }
+              if (!isDuplicate) {
+                parsed.push(subItem);
+              }
+            }
+          }
+        } else {
+          let isDuplicate = false;
+          for (let j = 0, jl = parsed.length; j < jl; j++) {
+            if (parsed[j] === item) {
+              isDuplicate = true;
+              break;
+            }
+          }
+          if (!isDuplicate) {
+            parsed.push(item);
+          }
+        }
+      }
+    }
+    return parsed;
+  }
+  const nodeList = getNodeList(targets);
+  if (nodeList) return /** @type {DOMTargetsArray} */(Array.from(nodeList));
+  return /** @type {TargetsArray} */([targets]);
+}
+
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+function registerTargets(targets) {
+  const parsedTargetsArray = parseTargets(targets);
+  const parsedTargetsLength = parsedTargetsArray.length;
+  if (parsedTargetsLength) {
+    for (let i = 0; i < parsedTargetsLength; i++) {
+      const target = parsedTargetsArray[i];
+      if (!target[consts.isRegisteredTargetSymbol]) {
+        target[consts.isRegisteredTargetSymbol] = true;
+        const isSvgType = helpers.isSvg(target);
+        const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
+        if (isDom) {
+          target[consts.isDomSymbol] = true;
+          target[consts.isSvgSymbol] = isSvgType;
+          target[consts.transformsSymbol] = {};
+        }
+      }
+    }
+  }
+  return parsedTargetsArray;
+}
+
+exports.getNodeList = getNodeList;
+exports.parseTargets = parseTargets;
+exports.registerTargets = registerTargets;

package/dist/modules/core/targets.d.ts

@@ -0,0 +1,118 @@
+/**
+* @import {
+*   DOMTarget,
+*   DOMTargetsParam,
+*   JSTargetsArray,
+*   TargetsParam,
+*   JSTargetsParam,
+*   TargetsArray,
+*   DOMTargetsArray,
+* } from '../types/index.js'
+*/
+/**
+ * @param  {DOMTargetsParam|TargetsParam} v
+ * @return {NodeList|HTMLCollection}
+ */
+export function getNodeList(v: DOMTargetsParam | TargetsParam): NodeList | HTMLCollection;
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+export function parseTargets(targets: DOMTargetsParam): DOMTargetsArray;
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+export function parseTargets(targets: JSTargetsParam): JSTargetsArray;
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+export function parseTargets(targets: TargetsParam): TargetsArray;
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+export function registerTargets(targets: DOMTargetsParam): DOMTargetsArray;
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+export function registerTargets(targets: JSTargetsParam): JSTargetsArray;
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+export function registerTargets(targets: TargetsParam): TargetsArray;
+import type { DOMTargetsParam } from '../types/index.js';
+import type { TargetsParam } from '../types/index.js';
+import type { DOMTargetsArray } from '../types/index.js';
+import type { JSTargetsParam } from '../types/index.js';
+import type { JSTargetsArray } from '../types/index.js';
+import type { TargetsArray } from '../types/index.js';

package/dist/modules/core/targets.js

@@ -0,0 +1,132 @@
+/**
+ * Anime.js - core - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { scope } from './globals.js';
+import { isRegisteredTargetSymbol, isDomSymbol, isSvgSymbol, transformsSymbol, isBrowser } from './consts.js';
+import { isSvg, isNil, isArr, isStr } from './helpers.js';
+
+/**
+* @import {
+*   DOMTarget,
+*   DOMTargetsParam,
+*   JSTargetsArray,
+*   TargetsParam,
+*   JSTargetsParam,
+*   TargetsArray,
+*   DOMTargetsArray,
+* } from '../types/index.js'
+*/
+
+/**
+ * @param  {DOMTargetsParam|TargetsParam} v
+ * @return {NodeList|HTMLCollection}
+ */
+function getNodeList(v) {
+  const n = isStr(v) ? scope.root.querySelectorAll(v) : v;
+  if (n instanceof NodeList || n instanceof HTMLCollection) return n;
+}
+
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+function parseTargets(targets) {
+  if (isNil(targets)) return /** @type {TargetsArray} */([]);
+  if (!isBrowser) return /** @type {JSTargetsArray} */(isArr(targets) && targets.flat(Infinity) || [targets]);
+  if (isArr(targets)) {
+    const flattened = targets.flat(Infinity);
+    /** @type {TargetsArray} */
+    const parsed = [];
+    for (let i = 0, l = flattened.length; i < l; i++) {
+      const item = flattened[i];
+      if (!isNil(item)) {
+        const nodeList = getNodeList(item);
+        if (nodeList) {
+          for (let j = 0, jl = nodeList.length; j < jl; j++) {
+            const subItem = nodeList[j];
+            if (!isNil(subItem)) {
+              let isDuplicate = false;
+              for (let k = 0, kl = parsed.length; k < kl; k++) {
+                if (parsed[k] === subItem) {
+                  isDuplicate = true;
+                  break;
+                }
+              }
+              if (!isDuplicate) {
+                parsed.push(subItem);
+              }
+            }
+          }
+        } else {
+          let isDuplicate = false;
+          for (let j = 0, jl = parsed.length; j < jl; j++) {
+            if (parsed[j] === item) {
+              isDuplicate = true;
+              break;
+            }
+          }
+          if (!isDuplicate) {
+            parsed.push(item);
+          }
+        }
+      }
+    }
+    return parsed;
+  }
+  const nodeList = getNodeList(targets);
+  if (nodeList) return /** @type {DOMTargetsArray} */(Array.from(nodeList));
+  return /** @type {TargetsArray} */([targets]);
+}
+
+/**
+ * @overload
+ * @param  {DOMTargetsParam} targets
+ * @return {DOMTargetsArray}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targets
+ * @return {JSTargetsArray}
+ *
+ * @overload
+ * @param  {TargetsParam} targets
+ * @return {TargetsArray}
+ *
+ * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
+ */
+function registerTargets(targets) {
+  const parsedTargetsArray = parseTargets(targets);
+  const parsedTargetsLength = parsedTargetsArray.length;
+  if (parsedTargetsLength) {
+    for (let i = 0; i < parsedTargetsLength; i++) {
+      const target = parsedTargetsArray[i];
+      if (!target[isRegisteredTargetSymbol]) {
+        target[isRegisteredTargetSymbol] = true;
+        const isSvgType = isSvg(target);
+        const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
+        if (isDom) {
+          target[isDomSymbol] = true;
+          target[isSvgSymbol] = isSvgType;
+          target[transformsSymbol] = {};
+        }
+      }
+    }
+  }
+  return parsedTargetsArray;
+}
+
+export { getNodeList, parseTargets, registerTargets };

package/dist/modules/core/transforms.cjs

@@ -0,0 +1,49 @@
+/**
+ * Anime.js - core - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('./consts.cjs');
+var helpers = require('./helpers.cjs');
+
+/**
+* @import {
+*   DOMTarget,
+* } from '../types/index.js'
+*/
+
+/**
+ * @param  {DOMTarget} target
+ * @param  {String} propName
+ * @param  {Object} animationInlineStyles
+ * @return {String}
+ */
+const parseInlineTransforms = (target, propName, animationInlineStyles) => {
+  const inlineTransforms = target.style.transform;
+  let inlinedStylesPropertyValue;
+  if (inlineTransforms) {
+    const cachedTransforms = target[consts.transformsSymbol];
+    let t; while (t = consts.transformsExecRgx.exec(inlineTransforms)) {
+      const inlinePropertyName = t[1];
+      // const inlinePropertyValue = t[2];
+      const inlinePropertyValue = t[2].slice(1, -1);
+      cachedTransforms[inlinePropertyName] = inlinePropertyValue;
+      if (inlinePropertyName === propName) {
+        inlinedStylesPropertyValue = inlinePropertyValue;
+        // Store the new parsed inline styles if animationInlineStyles is provided
+        if (animationInlineStyles) {
+          animationInlineStyles[propName] = inlinePropertyValue;
+        }
+      }
+    }
+  }
+  return inlineTransforms && !helpers.isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+    helpers.stringStartsWith(propName, 'scale') ? '1' :
+    helpers.stringStartsWith(propName, 'rotate') || helpers.stringStartsWith(propName, 'skew') ? '0deg' : '0px';
+};
+
+exports.parseInlineTransforms = parseInlineTransforms;

package/dist/modules/core/transforms.d.ts

@@ -0,0 +1,2 @@
+export function parseInlineTransforms(target: DOMTarget, propName: string, animationInlineStyles: any): string;
+import type { DOMTarget } from '../types/index.js';

package/dist/modules/core/transforms.js

@@ -0,0 +1,47 @@
+/**
+ * Anime.js - core - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { transformsSymbol, transformsExecRgx } from './consts.js';
+import { isUnd, stringStartsWith } from './helpers.js';
+
+/**
+* @import {
+*   DOMTarget,
+* } from '../types/index.js'
+*/
+
+/**
+ * @param  {DOMTarget} target
+ * @param  {String} propName
+ * @param  {Object} animationInlineStyles
+ * @return {String}
+ */
+const parseInlineTransforms = (target, propName, animationInlineStyles) => {
+  const inlineTransforms = target.style.transform;
+  let inlinedStylesPropertyValue;
+  if (inlineTransforms) {
+    const cachedTransforms = target[transformsSymbol];
+    let t; while (t = transformsExecRgx.exec(inlineTransforms)) {
+      const inlinePropertyName = t[1];
+      // const inlinePropertyValue = t[2];
+      const inlinePropertyValue = t[2].slice(1, -1);
+      cachedTransforms[inlinePropertyName] = inlinePropertyValue;
+      if (inlinePropertyName === propName) {
+        inlinedStylesPropertyValue = inlinePropertyValue;
+        // Store the new parsed inline styles if animationInlineStyles is provided
+        if (animationInlineStyles) {
+          animationInlineStyles[propName] = inlinePropertyValue;
+        }
+      }
+    }
+  }
+  return inlineTransforms && !isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+    stringStartsWith(propName, 'scale') ? '1' :
+    stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew') ? '0deg' : '0px';
+};
+
+export { parseInlineTransforms };

package/dist/modules/core/units.cjs

@@ -0,0 +1,67 @@
+/**
+ * Anime.js - core - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('./consts.cjs');
+var helpers = require('./helpers.cjs');
+
+const angleUnitsMap = { 'deg': 1, 'rad': 180 / helpers.PI, 'turn': 360 };
+const convertedValuesCache = {};
+
+/**
+* @import {
+*   DOMTarget,
+*   TweenDecomposedValue,
+* } from '../types/index.js'
+*/
+
+/**
+ * @param  {DOMTarget} el
+ * @param  {TweenDecomposedValue} decomposedValue
+ * @param  {String} unit
+ * @param  {Boolean} [force]
+ * @return {TweenDecomposedValue}
+ */
+const convertValueUnit = (el, decomposedValue, unit, force = false) => {
+  const currentUnit = decomposedValue.u;
+  const currentNumber = decomposedValue.n;
+  if (decomposedValue.t === consts.valueTypes.UNIT && currentUnit === unit) { // TODO: Check if checking against the same unit string is necessary
+    return decomposedValue;
+  }
+  const cachedKey = currentNumber + currentUnit + unit;
+  const cached = convertedValuesCache[cachedKey];
+  if (!helpers.isUnd(cached) && !force) {
+    decomposedValue.n = cached;
+  } else {
+    let convertedValue;
+    if (currentUnit in angleUnitsMap) {
+      convertedValue = currentNumber * angleUnitsMap[currentUnit] / angleUnitsMap[unit];
+    } else {
+      const baseline = 100;
+      const tempEl = /** @type {DOMTarget} */(el.cloneNode());
+      const parentNode = el.parentNode;
+      const parentEl = (parentNode && (parentNode !== consts.doc)) ? parentNode : consts.doc.body;
+      parentEl.appendChild(tempEl);
+      const elStyle = tempEl.style;
+      elStyle.width = baseline + currentUnit;
+      const currentUnitWidth = /** @type {HTMLElement} */(tempEl).offsetWidth || baseline;
+      elStyle.width = baseline + unit;
+      const newUnitWidth = /** @type {HTMLElement} */(tempEl).offsetWidth || baseline;
+      const factor = currentUnitWidth / newUnitWidth;
+      parentEl.removeChild(tempEl);
+      convertedValue = factor * currentNumber;
+    }
+    decomposedValue.n = convertedValue;
+    convertedValuesCache[cachedKey] = convertedValue;
+  }
+  decomposedValue.t === consts.valueTypes.UNIT;
+  decomposedValue.u = unit;
+  return decomposedValue;
+};
+
+exports.convertValueUnit = convertValueUnit;

package/dist/modules/core/units.d.ts

@@ -0,0 +1,3 @@
+export function convertValueUnit(el: DOMTarget, decomposedValue: TweenDecomposedValue, unit: string, force?: boolean): TweenDecomposedValue;
+import type { DOMTarget } from '../types/index.js';
+import type { TweenDecomposedValue } from '../types/index.js';

package/dist/modules/core/units.js

@@ -0,0 +1,65 @@
+/**
+ * Anime.js - core - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { valueTypes, doc } from './consts.js';
+import { isUnd, PI } from './helpers.js';
+
+const angleUnitsMap = { 'deg': 1, 'rad': 180 / PI, 'turn': 360 };
+const convertedValuesCache = {};
+
+/**
+* @import {
+*   DOMTarget,
+*   TweenDecomposedValue,
+* } from '../types/index.js'
+*/
+
+/**
+ * @param  {DOMTarget} el
+ * @param  {TweenDecomposedValue} decomposedValue
+ * @param  {String} unit
+ * @param  {Boolean} [force]
+ * @return {TweenDecomposedValue}
+ */
+const convertValueUnit = (el, decomposedValue, unit, force = false) => {
+  const currentUnit = decomposedValue.u;
+  const currentNumber = decomposedValue.n;
+  if (decomposedValue.t === valueTypes.UNIT && currentUnit === unit) { // TODO: Check if checking against the same unit string is necessary
+    return decomposedValue;
+  }
+  const cachedKey = currentNumber + currentUnit + unit;
+  const cached = convertedValuesCache[cachedKey];
+  if (!isUnd(cached) && !force) {
+    decomposedValue.n = cached;
+  } else {
+    let convertedValue;
+    if (currentUnit in angleUnitsMap) {
+      convertedValue = currentNumber * angleUnitsMap[currentUnit] / angleUnitsMap[unit];
+    } else {
+      const baseline = 100;
+      const tempEl = /** @type {DOMTarget} */(el.cloneNode());
+      const parentNode = el.parentNode;
+      const parentEl = (parentNode && (parentNode !== doc)) ? parentNode : doc.body;
+      parentEl.appendChild(tempEl);
+      const elStyle = tempEl.style;
+      elStyle.width = baseline + currentUnit;
+      const currentUnitWidth = /** @type {HTMLElement} */(tempEl).offsetWidth || baseline;
+      elStyle.width = baseline + unit;
+      const newUnitWidth = /** @type {HTMLElement} */(tempEl).offsetWidth || baseline;
+      const factor = currentUnitWidth / newUnitWidth;
+      parentEl.removeChild(tempEl);
+      convertedValue = factor * currentNumber;
+    }
+    decomposedValue.n = convertedValue;
+    convertedValuesCache[cachedKey] = convertedValue;
+  }
+  decomposedValue.t === valueTypes.UNIT;
+  decomposedValue.u = unit;
+  return decomposedValue;
+};
+
+export { convertValueUnit };