animejs 4.3.6 → 4.4.1

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

@@ -0,0 +1,3 @@
+export function scrambleText(params?: ScrambleTextParams): FunctionValue;
+import type { ScrambleTextParams } from '../types/index.js';
+import type { FunctionValue } from '../types/index.js';

package/dist/modules/text/scramble.js

@@ -0,0 +1,270 @@
+/**
+ * Anime.js - text - ESM
+ * @version v4.4.1
+ * @license MIT
+ * @copyright 2026 - Julian Garnier
+ */
+
+import { createSeededRandom } from '../utils/random.js';
+import { globals } from '../core/globals.js';
+import { round } from '../core/helpers.js';
+import { parseEase } from '../easings/eases/parser.js';
+import { noop } from '../core/consts.js';
+
+/**
+ * @import {
+ *   ScrambleTextParams,
+ *   FunctionValue,
+ * } from '../types/index.js'
+*/
+
+/**
+ * '-' is the range operator; place it at the start or end of the string to use it as a literal (e.g. '-abc' or 'abc-')
+ * @param {String} str
+ * @return {String}
+ */
+const expandCharRanges = (str) => {
+  let result = '';
+  for (let i = 0, l = str.length; i < l; i++) {
+    if (i + 2 < l && str[i + 1] === '-' && str.charCodeAt(i) < str.charCodeAt(i + 2)) {
+      const start = str.charCodeAt(i);
+      const end = str.charCodeAt(i + 2);
+      for (let c = start; c <= end; c++) result += String.fromCharCode(c);
+      i += 2;
+    } else {
+      result += str[i];
+    }
+  }
+  return result;
+};
+
+const charSets = {
+  lowercase: 'a-z',
+  uppercase: 'A-Z',
+  numbers: '0-9',
+  symbols: '!%#_|*+=',
+  braille: '⠀-⣿',
+  blocks: '▀-▟',
+  shades: '░-▓',
+};
+
+const originalTexts = new WeakMap();
+
+/**
+ * Returns a function-based tween value that scrambles the target's text content,
+ * progressively revealing the original text.
+ *
+ * @param {ScrambleTextParams} [params]
+ * @return {FunctionValue}
+ */
+const scrambleText = (params = {}) => {
+  if (!params) params = {};
+  const charsParam = params.chars;
+  const easeFn = parseEase(params.ease || 'linear');
+  const text = params.text;
+  const fromParam = params.from;
+  const reversed = params.reversed || false;
+  const perturbation = params.perturbation || 0;
+  const cursorParam = params.cursor;
+  const cursorChars = cursorParam === true ? '_'
+                    : typeof cursorParam === 'number' ? String.fromCharCode(cursorParam)
+                    : typeof cursorParam === 'string' ? cursorParam
+                    : '';
+  const cursorLen = cursorChars.length;
+  const seed = params.seed || 0;
+  const override = params.override !== undefined ? params.override : true;
+  const revealRate = params.revealRate || 60;
+  const interval = 1000 * globals.timeScale / revealRate;
+  const settleDuration = params.settleDuration || 300 * globals.timeScale;
+  const settleRate = params.settleRate || 30;
+  const durationParam = params.duration;
+  const revealDelayParam = params.revealDelay;
+  const delayParam = params.delay;
+  const onChange = params.onChange || noop;
+
+  return (target, index, targets, prevTween) => {
+    const rawChars = typeof charsParam === 'function' ? charsParam(target, index, targets) : (charsParam || 'a-zA-Z0-9!%#_');
+    const characters = expandCharRanges(charSets[rawChars] || rawChars);
+    const totalChars = characters.length - 1;
+    const duration = typeof durationParam === 'function' ? durationParam(target, index, targets) : durationParam;
+    const revealDelay = typeof revealDelayParam === 'function' ? revealDelayParam(target, index, targets) : (revealDelayParam || 0);
+    const delay = typeof delayParam === 'function' ? delayParam(target, index, targets) : (delayParam || 0);
+    const rng = seed ? createSeededRandom(seed) : createSeededRandom();
+    if (!originalTexts.has(target)) originalTexts.set(target, target.textContent);
+    const startingText = prevTween ? prevTween._value : target.textContent;
+    const targetText = text !== undefined
+                       ? (typeof text === 'function' ? text(target, index, targets) : text)
+                       : prevTween ? prevTween._value
+                       : originalTexts.get(target);
+    const settledText = targetText === ' ' || targetText === '&nbsp;' ? ' ' : targetText;
+    const startLength = startingText === ' ' ? 0 : startingText.length;
+    const endLength = settledText.length;
+    const overrideChars = override === true ? characters
+                        : typeof override === 'string' && override.length > 0 ? expandCharRanges(charSets[/** @type {String} */(override)] || /** @type {String} */(override))
+                        : null;
+    const totalOverrideChars = overrideChars ? overrideChars.length - 1 : 0;
+    // Space override uses &nbsp; so the browser doesn't collapse consecutive spaces in innerHTML
+    const overrideChar = override === ' ' ? ' ' : null;
+    // When starting from blank, only animate the target text length to avoid padding beyond it
+    const animLength = override === '' ? endLength : Math.max(startLength, endLength);
+    // Compute total duration from interval spacing and settle time, or use the explicit duration
+    const animDuration = duration > 0 ? duration : (animLength - 1) * interval + settleDuration;
+    const computedDuration = round((animDuration + revealDelay) / globals.timeScale, 0) * globals.timeScale;
+    const revealDelayRatio = revealDelay > 0 ? round(revealDelay / computedDuration, 12) : 0;
+    // Auto-resolve reveal direction: shrinking text reveals from right, growing from left
+    const resolvedFrom = fromParam === undefined || fromParam === 'auto' ? (endLength < startLength ? 'right' : 'left') : fromParam;
+    const charOrder = new Int32Array(animLength);
+    if (resolvedFrom === 'random') {
+      for (let i = 0; i < animLength; i++) charOrder[i] = i;
+      for (let i = animLength - 1; i > 0; i--) {
+        const j = rng(0, i);
+        const t = charOrder[i]; charOrder[i] = charOrder[j]; charOrder[j] = t;
+      }
+    } else {
+      const ref = resolvedFrom === 'right' ? (override === '' || !startLength ? animLength : startLength) - 1
+                : resolvedFrom === 'center' ? ((override === '' || !startLength ? animLength : startLength) - 1) / 2
+                : typeof resolvedFrom === 'number' ? resolvedFrom
+                : 0;
+      const abs = Math.abs;
+      const indices = new Array(animLength);
+      for (let i = 0; i < animLength; i++) indices[i] = i;
+      indices.sort((a, b) => abs(a - ref) - abs(b - ref));
+      for (let i = 0; i < animLength; i++) charOrder[indices[i]] = i;
+    }
+    if (reversed) {
+      const last = animLength - 1;
+      for (let i = 0; i < animLength; i++) charOrder[i] = last - charOrder[i];
+    }
+    // settleRatio is the fraction of the animation each character spends in the active scrambling zone
+    const settleRatio = round(settleDuration / animDuration, 12);
+    // settleSpacing is the time gap between consecutive characters entering the active zone
+    const settleSpacing = round((1 - settleRatio) / animLength, 12);
+    const cursorZone = cursorLen * settleSpacing;
+    // stepRatio controls how often scramble characters refresh (based on settleRate)
+    const stepRatio = round(1000 * globals.timeScale / (settleRate * computedDuration), 12);
+    // Pre-compute per-character start and settle times
+    const charStarts = new Float32Array(animLength);
+    const charEnds = new Float32Array(animLength);
+    const scale = perturbation > 0 ? perturbation * settleRatio : 0;
+    for (let c = 0; c < animLength; c++) {
+      const so = scale > 0 ? (rng(0, 2000) - 1000) / 1000 * scale : 0;
+      const eo = scale > 0 ? (rng(0, 2000) - 1000) / 1000 * scale : 0;
+      charStarts[c] = charOrder[c] * settleSpacing + so;
+      charEnds[c] = Math.ceil((charStarts[c] + settleRatio + eo) / stepRatio) * stepRatio;
+    }
+    // When text shrinks with non-sequential from modes, delay target settle times past all extras
+    if (endLength < animLength && resolvedFrom !== 'left' && resolvedFrom !== 'right' && resolvedFrom !== 'random') {
+      let maxExtraEnd = 0;
+      for (let c = endLength; c < animLength; c++) {
+        if (charEnds[c] > maxExtraEnd) maxExtraEnd = charEnds[c];
+      }
+      const targets = new Array(endLength);
+      for (let c = 0; c < endLength; c++) targets[c] = c;
+      targets.sort((a, b) => charOrder[a] - charOrder[b]);
+      const targetSpacing = (1 - maxExtraEnd) / endLength;
+      for (let i = 0; i < endLength; i++) {
+        const revealTime = maxExtraEnd + i * targetSpacing;
+        if (revealTime > charEnds[targets[i]]) {
+          charEnds[targets[i]] = revealTime;
+        }
+      }
+    }
+    // charCache holds the current scramble character for each position, refreshed at settleRate
+    const charCache = new Array(animLength);
+    for (let c = 0; c < animLength; c++) {
+      charCache[c] = characters[rng(0, totalChars)];
+    }
+    // overrideCache holds scramble characters for the starting text (override: true or custom string)
+    const overrideCache = overrideChars ? (overrideChars === characters ? charCache : new Array(animLength)) : null;
+    if (overrideCache && overrideCache !== charCache) {
+      for (let c = 0; c < animLength; c++) {
+        overrideCache[c] = overrideChar || /** @type {String} */(overrideChars)[rng(0, overrideChars.length - 1)];
+      }
+    }
+    // Build the initial display text based on override mode
+    let fillStartText = startingText;
+    if (!prevTween) {
+      if (override === '') {
+        fillStartText = '';
+      } else if (overrideChars) {
+        fillStartText = '';
+        for (let c = 0; c < startLength; c++) {
+          fillStartText += startingText[c] === ' ' ? ' ' : /** @type {Array<String>} */(overrideCache)[c];
+        }
+      }
+    }
+
+    let lastValue = -1;
+    let lastStep = -1;
+    let scrambled = '';
+    const hasOverride = override !== '';
+    const hasOverrideChars = !!overrideChars;
+    const hasCursor = cursorLen > 0;
+
+    return {
+      from: 0,
+      to: 1,
+      duration: computedDuration,
+      delay: delay,
+      ease: 'linear',
+      modifier: (v) => {
+        if (v === lastValue) return scrambled;
+        lastValue = v;
+        if (delay > 0 && v <= 0) { scrambled = startingText; return startingText; }
+        if (v <= 0) { scrambled = fillStartText; return fillStartText; }
+        if (v >= 1) { scrambled = settledText; return settledText; }
+        scrambled = '';
+        // Only refresh scramble characters when we cross a settleRate step boundary
+        const currentStep = (v / stepRatio) | 0;
+        const refreshChars = currentStep !== lastStep;
+        if (refreshChars) lastStep = currentStep;
+        // Subtract delay ratio to get the effective animation progress
+        const linear = revealDelayRatio > 0 ? (v - revealDelayRatio) / (1 - revealDelayRatio) : v;
+        const t = linear > 0 ? easeFn(linear) : 0;
+        for (let c = 0; c < animLength; c++) {
+          // Each character has its own start/end window based on its reveal order
+          const charStart = charStarts[c];
+          const charEnd = charEnds[c];
+          // Settled zone: character has finished its transition
+          if (t >= charEnd) {
+            if (c < endLength) scrambled += settledText[c];
+            continue;
+          }
+          // Pre-transition zone: reveal wave hasn't reached this character yet
+          if (t <= 0 || t < charStart) {
+            if (hasOverride && c < startLength) {
+              if (hasOverrideChars) {
+                if (startingText[c] === ' ') {
+                  scrambled += ' ';
+                } else {
+                  if (refreshChars) /** @type {Array<String>} */(overrideCache)[c] = overrideChar || /** @type {String} */(overrideChars)[rng(0, totalOverrideChars)];
+                  scrambled += /** @type {Array<String>} */(overrideCache)[c];
+                }
+              } else {
+                // Default (override: false): show the original starting text
+                scrambled += startingText[c];
+              }
+            }
+            continue;
+          }
+          // Active zone: character is between charStart and charEnd
+          const isSpace = (c < endLength && settledText[c] === ' ') || (c < startLength && startingText[c] === ' ');
+          if (isSpace) {
+            scrambled += ' ';
+          } else if (hasCursor && t - charStart < cursorZone) {
+            // Cursor sub-zone: show cursor character based on position within cursor width
+            scrambled += cursorChars[cursorLen - 1 - (((t - charStart) / settleSpacing) | 0)];
+          } else {
+            // Scramble zone: show cycling random characters
+            if (refreshChars) charCache[c] = characters[rng(0, totalChars)];
+            scrambled += charCache[c];
+          }
+        }
+        if (refreshChars) onChange(scrambled, t);
+        return scrambled;
+      }
+    }
+  }
+};
+
+export { scrambleText };

package/dist/modules/text/split.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - text - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -197,7 +197,7 @@ const processHTMLTemplate = (htmlTemplate, store, node, $parentFragment, type, d
  */
 class TextSplitter {
   /**
-   * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+   * @param  {Element|NodeList|String|Array<Element>} target
    * @param  {TextSplitterParams} [parameters]
    */
   constructor(target, parameters = {}) {
@@ -269,11 +269,11 @@ class TextSplitter {
   }
 
   /**
-   * @param  {(...args: any[]) => Tickable | (() => void)} effect
+   * @param  {(...args: any[]) => Tickable | (() => void) | void} effect
    * @return this
    */
   addEffect(effect) {
-    if (!helpers.isFnc(effect)) return console.warn('Effect must return a function.');
+    if (!helpers.isFnc(effect)) { console.warn('Effect must return a function.'); return this; }
     const refreshableEffect = time.keepTime(effect);
     this.effects.push(refreshableEffect);
     if (this.ready) this.effectsCleanups[this.effects.length - 1] = refreshableEffect(this);
@@ -479,7 +479,7 @@ class TextSplitter {
 }
 
 /**
- * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+ * @param  {Element|NodeList|String|Array<Element>} target
  * @param  {TextSplitterParams} [parameters]
  * @return {TextSplitter}
  */

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

@@ -4,10 +4,10 @@
  */
 export class TextSplitter {
     /**
-     * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+     * @param  {Element|NodeList|String|Array<Element>} target
      * @param  {TextSplitterParams} [parameters]
      */
-    constructor(target: HTMLElement | NodeList | string | Array<HTMLElement>, parameters?: TextSplitterParams);
+    constructor(target: Element | NodeList | string | Array<Element>, parameters?: TextSplitterParams);
     debug: boolean;
     includeSpaces: boolean;
     accessible: boolean;
@@ -31,10 +31,10 @@ export class TextSplitter {
     resizeTimeout: NodeJS.Timeout;
     resizeObserver: ResizeObserver;
     /**
-     * @param  {(...args: any[]) => Tickable | (() => void)} effect
+     * @param  {(...args: any[]) => Tickable | (() => void) | void} effect
      * @return this
      */
-    addEffect(effect: (...args: any[]) => Tickable | (() => void)): void | this;
+    addEffect(effect: (...args: any[]) => Tickable | (() => void) | void): this;
     revert(): this;
     /**
      * Recursively processes a node and its children
@@ -48,7 +48,7 @@ export class TextSplitter {
     split(clearCache?: boolean): this;
     refresh(): void;
 }
-export function splitText(target: HTMLElement | NodeList | string | Array<HTMLElement>, parameters?: TextSplitterParams): TextSplitter;
+export function splitText(target: Element | NodeList | string | Array<Element>, parameters?: TextSplitterParams): TextSplitter;
 export function split(target: HTMLElement | NodeList | string | Array<HTMLElement>, parameters?: TextSplitterParams): TextSplitter;
 export type Segment = {
     segment: string;

package/dist/modules/text/split.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - text - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -195,7 +195,7 @@ const processHTMLTemplate = (htmlTemplate, store, node, $parentFragment, type, d
  */
 class TextSplitter {
   /**
-   * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+   * @param  {Element|NodeList|String|Array<Element>} target
    * @param  {TextSplitterParams} [parameters]
    */
   constructor(target, parameters = {}) {
@@ -267,11 +267,11 @@ class TextSplitter {
   }
 
   /**
-   * @param  {(...args: any[]) => Tickable | (() => void)} effect
+   * @param  {(...args: any[]) => Tickable | (() => void) | void} effect
    * @return this
    */
   addEffect(effect) {
-    if (!isFnc(effect)) return console.warn('Effect must return a function.');
+    if (!isFnc(effect)) { console.warn('Effect must return a function.'); return this; }
     const refreshableEffect = keepTime(effect);
     this.effects.push(refreshableEffect);
     if (this.ready) this.effectsCleanups[this.effects.length - 1] = refreshableEffect(this);
@@ -477,7 +477,7 @@ class TextSplitter {
 }
 
 /**
- * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+ * @param  {Element|NodeList|String|Array<Element>} target
  * @param  {TextSplitterParams} [parameters]
  * @return {TextSplitter}
  */

package/dist/modules/timeline/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/timeline/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/timeline/position.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/timeline/position.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/timeline/timeline.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - timeline - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -14,9 +14,9 @@ var values = require('../core/values.cjs');
 var targets = require('../core/targets.cjs');
 var render = require('../core/render.cjs');
 var styles = require('../core/styles.cjs');
+var timer = require('../timer/timer.cjs');
 var composition = require('../animation/composition.cjs');
 var animation = require('../animation/animation.cjs');
-var timer = require('../timer/timer.cjs');
 var parser = require('../easings/eases/parser.cjs');
 var position = require('./position.cjs');
 
@@ -33,6 +33,7 @@ var position = require('./position.cjs');
  *   DefaultsParams,
  *   TimelinePosition,
  *   StaggerFunction,
+ *   TargetsArray,
  * } from '../types/index.js'
 */
 
@@ -42,6 +43,8 @@ var position = require('./position.cjs');
  * } from '../waapi/waapi.js'
 */
 
+/** @import {TweakRegister} from 'tweaks' */
+
 /**
  * @param {Timeline} tl
  * @return {Number}
@@ -63,7 +66,7 @@ function getTimelineTotalDuration(tl) {
  * @param  {Number} timePosition
  * @param  {TargetsParam} targets
  * @param  {Number} [index]
- * @param  {Number} [length]
+ * @param  {TargetsArray} [allTargets]
  * @return {Timeline}
  *
  * @param  {TimerParams|AnimationParams} childParams
@@ -71,15 +74,15 @@ function getTimelineTotalDuration(tl) {
  * @param  {Number} timePosition
  * @param  {TargetsParam} [targets]
  * @param  {Number} [index]
- * @param  {Number} [length]
+ * @param  {TargetsArray} [allTargets]
  */
-function addTlChild(childParams, tl, timePosition, targets, index, length) {
+function addTlChild(childParams, tl, timePosition, targets, index, allTargets) {
   const isSetter = helpers.isNum(childParams.duration) && /** @type {Number} */(childParams.duration) <= consts.minValue;
   // Offset the tl position with -minValue for 0 duration animations or .set() calls in order to align their end value with the defined position
   const adjustedPosition = isSetter ? timePosition - consts.minValue : timePosition;
   if (tl.composition) render.tick(tl, adjustedPosition, 1, 1, consts.tickModes.AUTO);
   const tlChild = targets ?
-    new animation.JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
+    new animation.JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, allTargets) :
     new timer.Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
   if (tl.composition) tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
@@ -127,7 +130,7 @@ class Timeline extends timer.Timer {
    * @overload
    * @param {TargetsParam} a1
    * @param {AnimationParams} a2
-   * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+   * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
    * @return {this}
    *
    * @overload
@@ -137,7 +140,7 @@ class Timeline extends timer.Timer {
    *
    * @param {TargetsParam|TimerParams} a1
    * @param {TimelinePosition|AnimationParams} a2
-   * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+   * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
    */
   add(a1, a2, a3) {
     const isAnim = helpers.isObj(a2);
@@ -146,9 +149,11 @@ class Timeline extends timer.Timer {
       this._hasChildren = true;
       if (isAnim) {
         const childParams = /** @type {AnimationParams} */(a2);
-        // Check for function for children stagger positions
-        if (helpers.isFnc(a3)) {
-          const staggeredPosition = a3;
+        const editorHook = globals.globals.editor && globals.globals.editor.addTimelineChild;
+        const isStaggerType = a3 && /** @type {TweakRegister} */(a3).type === 'Stagger' && globals.globals.editor;
+        // Check for function or Stagger type children positions
+        const staggeredPosition = helpers.isFnc(a3) ? a3 : null;
+        if (staggeredPosition || isStaggerType) {
           const parsedTargetsArray = targets.parseTargets(/** @type {TargetsParam} */(a1));
           // Store initial duration before adding new children that will change the duration
           const tlDuration = this.duration;
@@ -159,28 +164,36 @@ class Timeline extends timer.Timer {
           let i = 0;
           /** @type {Number} */
           const parsedLength = (parsedTargetsArray.length);
+          // Call editor hook once for the entire stagger group instead of per target
+          const resolvedParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3, parsedLength) : null;
+          // Resolve stagger AFTER editor hook so tweaked position value (a3.defaultValue) is used
+          const staggerFn = staggeredPosition || globals.globals.editor.resolveStagger(/** @type {TweakRegister} */(a3).defaultValue);
           parsedTargetsArray.forEach((/** @type {Target} */target) => {
             // Create a new parameter object for each staggered children
-            const staggeredChildParams = { ...childParams };
+            const staggeredChildParams = { ...(resolvedParams || childParams) };
             // Reset the duration of the timeline iteration before each stagger to prevent wrong start value calculation
             this.duration = tlDuration;
             this.iterationDuration = tlIterationDuration;
             if (!helpers.isUnd(id)) staggeredChildParams.id = id + '-' + i;
+            const staggeredTimePosition = position.parseTimelinePosition(this, staggerFn(target, i, parsedTargetsArray, null, this));
             addTlChild(
               staggeredChildParams,
               this,
-              position.parseTimelinePosition(this, staggeredPosition(target, i, parsedLength, this)),
+              staggeredTimePosition,
               target,
               i,
-              parsedLength
+              parsedTargetsArray,
             );
             i++;
           });
         } else {
+          // Call editor hook before resolving position so tweaked values are applied
+          const resolvedChildParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3) : childParams;
+          const resolvedPosition = a3 && /** @type {*} */(a3).type ? /** @type {*} */(a3).defaultValue : a3;
           addTlChild(
-            childParams,
+            resolvedChildParams,
             this,
-            position.parseTimelinePosition(this, a3),
+            position.parseTimelinePosition(this, resolvedPosition),
             /** @type {TargetsParam} */(a1),
           );
         }
@@ -302,7 +315,7 @@ class Timeline extends timer.Timer {
   revert() {
     super.revert();
     helpers.forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => child.revert, true);
-    return styles.cleanInlineStyles(this);
+    return styles.revertValues(this);
   }
 
   /**
@@ -322,7 +335,12 @@ class Timeline extends timer.Timer {
  * @param {TimelineParams} [parameters]
  * @return {Timeline}
  */
-const createTimeline = parameters => new Timeline(parameters).init();
+const createTimeline = parameters => {
+  if (globals.globals.editor) {
+    return /** @type {Timeline} */(/** @type {unknown} */(globals.globals.editor.addTimeline(parameters)));
+  }
+  return new Timeline(parameters).init();
+};
 
 exports.Timeline = Timeline;
 exports.createTimeline = createTimeline;

package/dist/modules/timeline/timeline.d.ts

@@ -16,7 +16,7 @@ export class Timeline extends Timer {
      * @overload
      * @param {TargetsParam} a1
      * @param {AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      * @return {this}
      *
      * @overload
@@ -26,14 +26,14 @@ export class Timeline extends Timer {
      *
      * @param {TargetsParam|TimerParams} a1
      * @param {TimelinePosition|AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      */
-    add(a1: TargetsParam, a2: AnimationParams, a3?: TimelinePosition | StaggerFunction<number | string>): this;
+    add(a1: TargetsParam, a2: AnimationParams, a3?: TimelinePosition | StaggerFunction<number | string> | TweakRegister): this;
     /**
      * @overload
      * @param {TargetsParam} a1
      * @param {AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      * @return {this}
      *
      * @overload
@@ -43,7 +43,7 @@ export class Timeline extends Timer {
      *
      * @param {TargetsParam|TimerParams} a1
      * @param {TimelinePosition|AnimationParams} a2
-     * @param {TimelinePosition|StaggerFunction<Number|String>} [a3]
+     * @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
      */
     add(a1: TimerParams, a2?: TimelinePosition): this;
     /**
@@ -164,6 +164,7 @@ import type { TargetsParam } from '../types/index.js';
 import type { AnimationParams } from '../types/index.js';
 import type { TimelinePosition } from '../types/index.js';
 import type { StaggerFunction } from '../types/index.js';
+import type { TweakRegister } from 'tweaks';
 import type { TimerParams } from '../types/index.js';
 import type { Tickable } from '../types/index.js';
 import type { WAAPIAnimation } from '../waapi/waapi.js';