animejs 4.1.3 → 4.2.0-beta.0

package/dist/modules/core/colors.cjs

@@ -0,0 +1,102 @@
+/**
+ * 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 {
+ *   ColorArray,
+ * } from '../types/index.js'
+*/
+
+/**
+ * RGB / RGBA Color value string -> RGBA values array
+ * @param  {String} rgbValue
+ * @return {ColorArray}
+ */
+const rgbToRgba = rgbValue => {
+  const rgba = consts.rgbExecRgx.exec(rgbValue) || consts.rgbaExecRgx.exec(rgbValue);
+  const a = !helpers.isUnd(rgba[4]) ? +rgba[4] : 1;
+  return [
+    +rgba[1],
+    +rgba[2],
+    +rgba[3],
+    a
+  ]
+};
+
+/**
+ * HEX3 / HEX3A / HEX6 / HEX6A Color value string -> RGBA values array
+ * @param  {String} hexValue
+ * @return {ColorArray}
+ */
+const hexToRgba = hexValue => {
+  const hexLength = hexValue.length;
+  const isShort = hexLength === 4 || hexLength === 5;
+  return [
+    +('0x' + hexValue[1] + hexValue[isShort ? 1 : 2]),
+    +('0x' + hexValue[isShort ? 2 : 3] + hexValue[isShort ? 2 : 4]),
+    +('0x' + hexValue[isShort ? 3 : 5] + hexValue[isShort ? 3 : 6]),
+    ((hexLength === 5 || hexLength === 9) ? +(+('0x' + hexValue[isShort ? 4 : 7] + hexValue[isShort ? 4 : 8]) / 255).toFixed(3) : 1)
+  ]
+};
+
+/**
+ * @param  {Number} p
+ * @param  {Number} q
+ * @param  {Number} t
+ * @return {Number}
+ */
+const hue2rgb = (p, q, t) => {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  return t < 1 / 6 ? p + (q - p) * 6 * t :
+         t < 1 / 2 ? q :
+         t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 :
+         p;
+};
+
+/**
+ * HSL / HSLA Color value string -> RGBA values array
+ * @param  {String} hslValue
+ * @return {ColorArray}
+ */
+const hslToRgba = hslValue => {
+  const hsla = consts.hslExecRgx.exec(hslValue) || consts.hslaExecRgx.exec(hslValue);
+  const h = +hsla[1] / 360;
+  const s = +hsla[2] / 100;
+  const l = +hsla[3] / 100;
+  const a = !helpers.isUnd(hsla[4]) ? +hsla[4] : 1;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < .5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = helpers.round(hue2rgb(p, q, h + 1 / 3) * 255, 0);
+    g = helpers.round(hue2rgb(p, q, h) * 255, 0);
+    b = helpers.round(hue2rgb(p, q, h - 1 / 3) * 255, 0);
+  }
+  return [r, g, b, a];
+};
+
+/**
+ * All in one color converter that converts a color string value into an array of RGBA values
+ * @param  {String} colorString
+ * @return {ColorArray}
+ */
+const convertColorStringValuesToRgbaArray = colorString => {
+  return helpers.isRgb(colorString) ? rgbToRgba(colorString) :
+         helpers.isHex(colorString) ? hexToRgba(colorString) :
+         helpers.isHsl(colorString) ? hslToRgba(colorString) :
+         [0, 0, 0, 1];
+};
+
+exports.convertColorStringValuesToRgbaArray = convertColorStringValuesToRgbaArray;

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

@@ -0,0 +1,2 @@
+export function convertColorStringValuesToRgbaArray(colorString: string): ColorArray;
+import type { ColorArray } from '../types/index.js';

package/dist/modules/core/colors.js

@@ -0,0 +1,100 @@
+/**
+ * Anime.js - core - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { rgbExecRgx, rgbaExecRgx, hslExecRgx, hslaExecRgx } from './consts.js';
+import { isRgb, isHex, isHsl, isUnd, round } from './helpers.js';
+
+/**
+ * @import {
+ *   ColorArray,
+ * } from '../types/index.js'
+*/
+
+/**
+ * RGB / RGBA Color value string -> RGBA values array
+ * @param  {String} rgbValue
+ * @return {ColorArray}
+ */
+const rgbToRgba = rgbValue => {
+  const rgba = rgbExecRgx.exec(rgbValue) || rgbaExecRgx.exec(rgbValue);
+  const a = !isUnd(rgba[4]) ? +rgba[4] : 1;
+  return [
+    +rgba[1],
+    +rgba[2],
+    +rgba[3],
+    a
+  ]
+};
+
+/**
+ * HEX3 / HEX3A / HEX6 / HEX6A Color value string -> RGBA values array
+ * @param  {String} hexValue
+ * @return {ColorArray}
+ */
+const hexToRgba = hexValue => {
+  const hexLength = hexValue.length;
+  const isShort = hexLength === 4 || hexLength === 5;
+  return [
+    +('0x' + hexValue[1] + hexValue[isShort ? 1 : 2]),
+    +('0x' + hexValue[isShort ? 2 : 3] + hexValue[isShort ? 2 : 4]),
+    +('0x' + hexValue[isShort ? 3 : 5] + hexValue[isShort ? 3 : 6]),
+    ((hexLength === 5 || hexLength === 9) ? +(+('0x' + hexValue[isShort ? 4 : 7] + hexValue[isShort ? 4 : 8]) / 255).toFixed(3) : 1)
+  ]
+};
+
+/**
+ * @param  {Number} p
+ * @param  {Number} q
+ * @param  {Number} t
+ * @return {Number}
+ */
+const hue2rgb = (p, q, t) => {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  return t < 1 / 6 ? p + (q - p) * 6 * t :
+         t < 1 / 2 ? q :
+         t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 :
+         p;
+};
+
+/**
+ * HSL / HSLA Color value string -> RGBA values array
+ * @param  {String} hslValue
+ * @return {ColorArray}
+ */
+const hslToRgba = hslValue => {
+  const hsla = hslExecRgx.exec(hslValue) || hslaExecRgx.exec(hslValue);
+  const h = +hsla[1] / 360;
+  const s = +hsla[2] / 100;
+  const l = +hsla[3] / 100;
+  const a = !isUnd(hsla[4]) ? +hsla[4] : 1;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < .5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = round(hue2rgb(p, q, h + 1 / 3) * 255, 0);
+    g = round(hue2rgb(p, q, h) * 255, 0);
+    b = round(hue2rgb(p, q, h - 1 / 3) * 255, 0);
+  }
+  return [r, g, b, a];
+};
+
+/**
+ * All in one color converter that converts a color string value into an array of RGBA values
+ * @param  {String} colorString
+ * @return {ColorArray}
+ */
+const convertColorStringValuesToRgbaArray = colorString => {
+  return isRgb(colorString) ? rgbToRgba(colorString) :
+         isHex(colorString) ? hexToRgba(colorString) :
+         isHsl(colorString) ? hslToRgba(colorString) :
+         [0, 0, 0, 1];
+};
+
+export { convertColorStringValuesToRgbaArray };

package/dist/modules/core/consts.cjs

@@ -0,0 +1,154 @@
+/**
+ * Anime.js - core - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+// Environments
+
+// TODO: Do we need to check if we're running inside a worker ?
+const isBrowser = typeof window !== 'undefined';
+
+/** @type {Window & {AnimeJS: Array}|null} */
+const win = isBrowser ? /** @type {Window & {AnimeJS: Array}} */(/** @type {unknown} */(window)) : null;
+
+/** @type {Document|null} */
+const doc = isBrowser ? document : null;
+
+// Enums
+
+/** @enum {Number} */
+const tweenTypes = {
+  OBJECT: 0,
+  ATTRIBUTE: 1,
+  CSS: 2,
+  TRANSFORM: 3,
+  CSS_VAR: 4,
+};
+
+/** @enum {Number} */
+const valueTypes = {
+  NUMBER: 0,
+  UNIT: 1,
+  COLOR: 2,
+  COMPLEX: 3,
+};
+
+/** @enum {Number} */
+const tickModes = {
+  NONE: 0,
+  AUTO: 1,
+  FORCE: 2,
+};
+
+/** @enum {Number} */
+const compositionTypes = {
+  replace: 0,
+  none: 1,
+  blend: 2,
+};
+
+// Cache symbols
+
+const isRegisteredTargetSymbol = Symbol();
+const isDomSymbol = Symbol();
+const isSvgSymbol = Symbol();
+const transformsSymbol = Symbol();
+const morphPointsSymbol = Symbol();
+const proxyTargetSymbol = Symbol();
+
+// Numbers
+
+const minValue = 1e-11;
+const maxValue = 1e12;
+const K = 1e3;
+const maxFps = 120;
+
+// Strings
+
+const emptyString = '';
+const shortTransforms = /*#__PURE__*/ (() => {
+  const map = new Map();
+  map.set('x', 'translateX');
+  map.set('y', 'translateY');
+  map.set('z', 'translateZ');
+  return map;
+})();
+
+const validTransforms = [
+  'translateX',
+  'translateY',
+  'translateZ',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'scale',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'skew',
+  'skewX',
+  'skewY',
+  'perspective',
+  'matrix',
+  'matrix3d',
+];
+
+const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
+
+// Functions
+
+/** @return {void} */
+const noop = () => {};
+
+// Regex
+
+const hexTestRgx = /(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i;
+const rgbExecRgx = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i;
+const rgbaExecRgx = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
+const hslExecRgx = /hsl\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*\)/i;
+const hslaExecRgx = /hsla\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
+// export const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g;
+const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi;
+// export const unitsExecRgx = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)+([a-z]+|%)$/i;
+const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
+const lowerCaseRgx = /([a-z])([A-Z])/g;
+const transformsExecRgx = /(\w+)(\([^)]+\)+)/g; // Match inline transforms with cacl() values, returns the value wrapped in ()
+const relativeValuesExecRgx = /(\*=|\+=|-=)/;
+
+exports.K = K;
+exports.compositionTypes = compositionTypes;
+exports.digitWithExponentRgx = digitWithExponentRgx;
+exports.doc = doc;
+exports.emptyString = emptyString;
+exports.hexTestRgx = hexTestRgx;
+exports.hslExecRgx = hslExecRgx;
+exports.hslaExecRgx = hslaExecRgx;
+exports.isBrowser = isBrowser;
+exports.isDomSymbol = isDomSymbol;
+exports.isRegisteredTargetSymbol = isRegisteredTargetSymbol;
+exports.isSvgSymbol = isSvgSymbol;
+exports.lowerCaseRgx = lowerCaseRgx;
+exports.maxFps = maxFps;
+exports.maxValue = maxValue;
+exports.minValue = minValue;
+exports.morphPointsSymbol = morphPointsSymbol;
+exports.noop = noop;
+exports.proxyTargetSymbol = proxyTargetSymbol;
+exports.relativeValuesExecRgx = relativeValuesExecRgx;
+exports.rgbExecRgx = rgbExecRgx;
+exports.rgbaExecRgx = rgbaExecRgx;
+exports.shortTransforms = shortTransforms;
+exports.tickModes = tickModes;
+exports.transformsExecRgx = transformsExecRgx;
+exports.transformsFragmentStrings = transformsFragmentStrings;
+exports.transformsSymbol = transformsSymbol;
+exports.tweenTypes = tweenTypes;
+exports.unitsExecRgx = unitsExecRgx;
+exports.validTransforms = validTransforms;
+exports.valueTypes = valueTypes;
+exports.win = win;

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

@@ -0,0 +1,59 @@
+export const isBrowser: boolean;
+/** @type {Window & {AnimeJS: Array}|null} */
+export const win: (Window & {
+    AnimeJS: any[];
+}) | null;
+/** @type {Document|null} */
+export const doc: Document | null;
+export type tweenTypes = number;
+export namespace tweenTypes {
+    let OBJECT: number;
+    let ATTRIBUTE: number;
+    let CSS: number;
+    let TRANSFORM: number;
+    let CSS_VAR: number;
+}
+export type valueTypes = number;
+export namespace valueTypes {
+    let NUMBER: number;
+    let UNIT: number;
+    let COLOR: number;
+    let COMPLEX: number;
+}
+export type tickModes = number;
+export namespace tickModes {
+    let NONE: number;
+    let AUTO: number;
+    let FORCE: number;
+}
+export type compositionTypes = number;
+export namespace compositionTypes {
+    let replace: number;
+    let none: number;
+    let blend: number;
+}
+export const isRegisteredTargetSymbol: unique symbol;
+export const isDomSymbol: unique symbol;
+export const isSvgSymbol: unique symbol;
+export const transformsSymbol: unique symbol;
+export const morphPointsSymbol: unique symbol;
+export const proxyTargetSymbol: unique symbol;
+export const minValue: 1e-11;
+export const maxValue: 1000000000000;
+export const K: 1000;
+export const maxFps: 120;
+export const emptyString: "";
+export const shortTransforms: Map<any, any>;
+export const validTransforms: string[];
+export const transformsFragmentStrings: {};
+export function noop(): void;
+export const hexTestRgx: RegExp;
+export const rgbExecRgx: RegExp;
+export const rgbaExecRgx: RegExp;
+export const hslExecRgx: RegExp;
+export const hslaExecRgx: RegExp;
+export const digitWithExponentRgx: RegExp;
+export const unitsExecRgx: RegExp;
+export const lowerCaseRgx: RegExp;
+export const transformsExecRgx: RegExp;
+export const relativeValuesExecRgx: RegExp;

package/dist/modules/core/consts.js

@@ -0,0 +1,121 @@
+/**
+ * Anime.js - core - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+// Environments
+
+// TODO: Do we need to check if we're running inside a worker ?
+const isBrowser = typeof window !== 'undefined';
+
+/** @type {Window & {AnimeJS: Array}|null} */
+const win = isBrowser ? /** @type {Window & {AnimeJS: Array}} */(/** @type {unknown} */(window)) : null;
+
+/** @type {Document|null} */
+const doc = isBrowser ? document : null;
+
+// Enums
+
+/** @enum {Number} */
+const tweenTypes = {
+  OBJECT: 0,
+  ATTRIBUTE: 1,
+  CSS: 2,
+  TRANSFORM: 3,
+  CSS_VAR: 4,
+};
+
+/** @enum {Number} */
+const valueTypes = {
+  NUMBER: 0,
+  UNIT: 1,
+  COLOR: 2,
+  COMPLEX: 3,
+};
+
+/** @enum {Number} */
+const tickModes = {
+  NONE: 0,
+  AUTO: 1,
+  FORCE: 2,
+};
+
+/** @enum {Number} */
+const compositionTypes = {
+  replace: 0,
+  none: 1,
+  blend: 2,
+};
+
+// Cache symbols
+
+const isRegisteredTargetSymbol = Symbol();
+const isDomSymbol = Symbol();
+const isSvgSymbol = Symbol();
+const transformsSymbol = Symbol();
+const morphPointsSymbol = Symbol();
+const proxyTargetSymbol = Symbol();
+
+// Numbers
+
+const minValue = 1e-11;
+const maxValue = 1e12;
+const K = 1e3;
+const maxFps = 120;
+
+// Strings
+
+const emptyString = '';
+const shortTransforms = /*#__PURE__*/ (() => {
+  const map = new Map();
+  map.set('x', 'translateX');
+  map.set('y', 'translateY');
+  map.set('z', 'translateZ');
+  return map;
+})();
+
+const validTransforms = [
+  'translateX',
+  'translateY',
+  'translateZ',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'scale',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'skew',
+  'skewX',
+  'skewY',
+  'perspective',
+  'matrix',
+  'matrix3d',
+];
+
+const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
+
+// Functions
+
+/** @return {void} */
+const noop = () => {};
+
+// Regex
+
+const hexTestRgx = /(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i;
+const rgbExecRgx = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i;
+const rgbaExecRgx = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
+const hslExecRgx = /hsl\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*\)/i;
+const hslaExecRgx = /hsla\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
+// export const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g;
+const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi;
+// export const unitsExecRgx = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)+([a-z]+|%)$/i;
+const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
+const lowerCaseRgx = /([a-z])([A-Z])/g;
+const transformsExecRgx = /(\w+)(\([^)]+\)+)/g; // Match inline transforms with cacl() values, returns the value wrapped in ()
+const relativeValuesExecRgx = /(\*=|\+=|-=)/;
+
+export { K, compositionTypes, digitWithExponentRgx, doc, emptyString, hexTestRgx, hslExecRgx, hslaExecRgx, isBrowser, isDomSymbol, isRegisteredTargetSymbol, isSvgSymbol, lowerCaseRgx, maxFps, maxValue, minValue, morphPointsSymbol, noop, proxyTargetSymbol, relativeValuesExecRgx, rgbExecRgx, rgbaExecRgx, shortTransforms, tickModes, transformsExecRgx, transformsFragmentStrings, transformsSymbol, tweenTypes, unitsExecRgx, validTransforms, valueTypes, win };

package/dist/modules/core/globals.cjs

@@ -0,0 +1,77 @@
+/**
+ * Anime.js - core - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('./consts.cjs');
+
+/**
+ * @import {
+ *   DefaultsParams,
+ *   DOMTarget,
+ * } from '../types/index.js'
+ *
+ * @import {
+ *   Scope,
+ * } from '../scope/index.js'
+*/
+
+/** @type {DefaultsParams} */
+const defaults = {
+  id: null,
+  keyframes: null,
+  playbackEase: null,
+  playbackRate: 1,
+  frameRate: consts.maxFps,
+  loop: 0,
+  reversed: false,
+  alternate: false,
+  autoplay: true,
+  duration: consts.K,
+  delay: 0,
+  loopDelay: 0,
+  ease: 'out(2)',
+  composition: consts.compositionTypes.replace,
+  modifier: v => v,
+  onBegin: consts.noop,
+  onBeforeUpdate: consts.noop,
+  onUpdate: consts.noop,
+  onLoop: consts.noop,
+  onPause: consts.noop,
+  onComplete: consts.noop,
+  onRender: consts.noop,
+};
+
+const scope = {
+  /** @type {Scope} */
+  current: null,
+  /** @type {Document|DOMTarget} */
+  root: consts.doc,
+};
+
+const globals = {
+  /** @type {DefaultsParams} */
+  defaults,
+  /** @type {Number} */
+  precision: 4,
+  /** @type {Number} equals 1 in ms mode, 0.001 in s mode */
+  timeScale: 1,
+  /** @type {Number} */
+  tickThreshold: 200,
+};
+
+const globalVersions = { version: '4.2.0', engine: null };
+
+if (consts.isBrowser) {
+  if (!consts.win.AnimeJS) consts.win.AnimeJS = [];
+  consts.win.AnimeJS.push(globalVersions);
+}
+
+exports.defaults = defaults;
+exports.globalVersions = globalVersions;
+exports.globals = globals;
+exports.scope = scope;

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

@@ -0,0 +1,29 @@
+/**
+ * @import {
+ *   DefaultsParams,
+ *   DOMTarget,
+ * } from '../types/index.js'
+ *
+ * @import {
+ *   Scope,
+ * } from '../scope/index.js'
+*/
+/** @type {DefaultsParams} */
+export const defaults: DefaultsParams;
+export namespace scope {
+    export let current: Scope;
+    export { doc as root };
+}
+export namespace globals {
+    export { defaults };
+    export let precision: number;
+    export let timeScale: number;
+    export let tickThreshold: number;
+}
+export namespace globalVersions {
+    let version: string;
+    let engine: any;
+}
+import type { DefaultsParams } from '../types/index.js';
+import type { Scope } from '../scope/index.js';
+import { doc } from './consts.js';