animejs 4.3.6 → 4.4.1

package/dist/bundles/anime.esm.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - ESM bundle
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -46,7 +46,8 @@
  * @callback StaggerFunction
  * @param {Target} [target]
  * @param {Number} [index]
- * @param {Number} [length]
+ * @param {TargetsArray} [targets]
+ * @param {Tween|null} [prevTween]
  * @param {Timeline} [tl]
  * @return {T}
  */
@@ -54,9 +55,9 @@
 /**
  * @typedef  {Object} StaggerParams
  * @property {Number|String} [start]
- * @property {Number|'first'|'center'|'last'|'random'} [from]
+ * @property {Number|'first'|'center'|'last'|'random'|Array.<Number>} [from]
  * @property {Boolean} [reversed]
- * @property {Array.<Number>} [grid]
+ * @property {Array.<Number>|Boolean} [grid]
  * @property {('x'|'y')} [axis]
  * @property {String|((target: Target, i: Number, length: Number) => Number)} [use]
  * @property {Number} [total]
@@ -117,8 +118,8 @@
 
 // A hack to get both ease names suggestions AND allow any strings
 // https://github.com/microsoft/TypeScript/issues/29729#issuecomment-460346421
-/** @typedef {(String & {})|EaseStringParamNames|EasingFunction|Spring} EasingParam */
-/** @typedef {(String & {})|EaseStringParamNames|WAAPIEaseStringParamNames|EasingFunction|Spring} WAAPIEasingParam */
+/** @typedef {(String & {})|EaseStringParamNames|EasingFunction|Spring|TweakRegister} EasingParam */
+/** @typedef {(String & {})|EaseStringParamNames|WAAPIEaseStringParamNames|EasingFunction|Spring|TweakRegister} WAAPIEasingParam */
 
 // Spring types
 
@@ -174,6 +175,7 @@
  * @property {Boolean|ScrollObserver} [autoplay]
  * @property {Number} [frameRate]
  * @property {Number} [playbackRate]
+ * @property {Number} [priority]
  */
 
 /**
@@ -184,9 +186,10 @@
 
 /**
  * @callback FunctionValue
- * @param {Target} target - The animated target
- * @param {Number} index - The target index
- * @param {Number} length - The total number of animated targets
+ * @param {Target} [target] - The animated target
+ * @param {Number} [index] - The target index
+ * @param {TargetsArray} [targets] - The array of all animated targets
+ * @param {Tween|null} [prevTween] - The previous sibling tween for the same target and property
  * @return {Number|String|TweenObjectValue|EasingParam|Array.<Number|String|TweenObjectValue>}
  */
 
@@ -355,7 +358,7 @@
  * - `'label'` - Label: Position animation at a named label position (e.g., `'My Label'`)<br>
  * - `stagger(String|Nummber)` - Stagger multi-elements animation positions (e.g., 10, 20, 30...)
  *
- * @typedef {TimelinePosition | StaggerFunction<Number|String>} TimelineAnimationPosition
+ * @typedef {TimelinePosition | StaggerFunction<Number|String> | TweakRegister} TimelineAnimationPosition
  */
 
 /**
@@ -379,7 +382,7 @@
  * @callback WAAPIFunctionValue
  * @param {DOMTarget} target - The animated target
  * @param {Number} index - The target index
- * @param {Number} length - The total number of animated targets
+ * @param {DOMTargetsArray} targets - The array of all animated targets
  * @return {WAAPITweenValue|WAAPIEasingParam}
  */
 
@@ -626,6 +629,26 @@
  * @property {Boolean} [debug]
  */
 
+/**
+ * @typedef {Object} ScrambleTextParams
+ * @property {String|function(Target, Number, TargetsArray): String} [text] - the text to transition to, otherwise uses the original text
+ * @property {String|function(Target, Number, TargetsArray): String} [chars] - the characters used for scramble; named sets: 'lowercase', 'uppercase', 'numbers', 'symbols', 'braille', 'blocks', 'shades'; range syntax: 'A-Z', 'a-z0-9'; defaults to 'a-zA-Z0-9!%#_'
+ * @property {EasingParam} [ease] - the easing applied to the scramble animation
+ * @property {Number|'left'|'center'|'right'|'random'|'auto'} [from] - where the reveal wave starts from, 'auto' (default) uses 'left' when text grows and 'right' when it shrinks
+ * @property {Boolean} [reversed] - reverses the reveal order, so 'center' reveals from edges inward instead of center outward
+ * @property {Boolean|Number|String} [cursor] - characters displayed at the leading edge of the reveal wave; true uses '_', a number is a char code, a string is used directly
+ * @property {Number} [perturbation] - adds random timing offsets to each character's start and end, creating a more organic reveal
+ * @property {Number} [seed] - a seed for the random number generator to produce reproducible scramble sequences
+ * @property {Boolean|String} [override] - controls the starting appearance: false shows original text, true scrambles it (default), '' starts from blank, ' ' replaces characters with spaces, a custom string (supports range syntax like 'A-Z') uses its characters as scramble set
+ * @property {Number} [revealRate] - characters per second entering the active zone; higher values make the reveal wave move faster (default: 60)
+ * @property {Number} [settleDuration] - time in ms each character spends scrambling before settling into its final glyph (default: 300)
+ * @property {Number} [settleRate] - how many times per second scramble characters cycle in the active zone (default: 30)
+ * @property {Number|function(Target, Number, TargetsArray): Number} [duration] - if set to a value greater than 0, overrides the computed duration from interval and settle; if unset or 0, duration is calculated automatically from text length and timing parameters
+ * @property {Number|function(Target, Number, TargetsArray): Number} [revealDelay] - delay in ms before the reveal wave starts within the scramble animation
+ * @property {Number|function(Target, Number, TargetsArray): Number} [delay] - delay in ms before the entire scramble animation starts
+ * @property {function(String, Number): void} [onChange] - callback fired each time a character changes during scramble; receives the current scrambled text and the eased progress (0-1)
+ */
+
 // SVG types
 
 /**
@@ -641,7 +664,7 @@
 // TODO: Do we need to check if we're running inside a worker ?
 const isBrowser = typeof window !== 'undefined';
 
-/** @typedef {Window & {AnimeJS: Array} & {AnimeJSDevTools: any}|null} AnimeJSWindow
+/** @typedef {Window & {AnimeJS: Array}|null} AnimeJSWindow
 
 /** @type {AnimeJSWindow} */
 const win = isBrowser ? /** @type {AnimeJSWindow} */(/** @type {unknown} */(window)) : null;
@@ -688,7 +711,6 @@ const isRegisteredTargetSymbol = Symbol();
 const isDomSymbol = Symbol();
 const isSvgSymbol = Symbol();
 const transformsSymbol = Symbol();
-const morphPointsSymbol = Symbol();
 const proxyTargetSymbol = Symbol();
 
 // Numbers
@@ -712,6 +734,7 @@ const shortTransforms = /*#__PURE__*/ (() => {
 })();
 
 const validTransforms = [
+  'perspective',
   'translateX',
   'translateY',
   'translateZ',
@@ -726,9 +749,6 @@ const validTransforms = [
   'skew',
   'skewX',
   'skewY',
-  'matrix',
-  'matrix3d',
-  'perspective',
 ];
 
 const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
@@ -751,12 +771,23 @@ 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 = /(\*=|\+=|-=)/;
 const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
 
 
 
+/**
+ * @typedef {Object} EditorGlobals
+ * @property {boolean} showPanel
+ * @property {boolean} synced
+ * @property {Function} addAnimation
+ * @property {Function} addTimeline
+ * @property {Function} addTimelineChild
+ * @property {Function} resolveStagger
+ * @property {Object|null} _head
+ * @property {Object|null} _tail
+ */
+
 /** @type {DefaultsParams} */
 const defaults = {
   id: null,
@@ -800,11 +831,11 @@ const globals = {
   timeScale: 1,
   /** @type {Number} */
   tickThreshold: 200,
+  /** @type {EditorGlobals|null} */
+  editor: null,
 };
 
-const devTools = isBrowser && win.AnimeJSDevTools;
-
-const globalVersions = { version: '4.3.6', engine: null };
+const globalVersions = { version: '4.4.1', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -920,8 +951,6 @@ const _round = Math.round;
  */
 const clamp$1 = (v, min, max) => v < min ? min : v > max ? max : v;
 
-const powCache = {};
-
 /**
  * Rounds a number to specified decimal places
  *
@@ -929,13 +958,12 @@ const powCache = {};
  * @param  {Number} decimalLength - Number of decimal places
  * @return {Number}
  */
-const round$1 = (v, decimalLength) => {
-  if (decimalLength < 0) return v;
-  if (!decimalLength) return _round(v);
-  let p = powCache[decimalLength];
-  if (!p) p = powCache[decimalLength] = 10 ** decimalLength;
-  return _round(v * p) / p;
-};
+ const round$1 = (v, decimalLength) => {
+   if (decimalLength < 0) return v;
+   if (!decimalLength) return _round(v);
+   const p = 10 ** decimalLength;
+   return _round(v * p) / p;
+ };
 
 /**
  * Snaps a value to nearest increment or array value
@@ -1066,28 +1094,143 @@ const addChild = (parent, child, sortMethod, prevProp = '_prev', nextProp = '_ne
  */
 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;
+    let pos = 0;
+    const len = inlineTransforms.length;
+    let fullTranslateValue;
+    while (pos < len) {
+      // Skip whitespace
+      while (pos < len && inlineTransforms.charCodeAt(pos) === 32) pos++;
+      if (pos >= len) break;
+      // Read function name
+      const nameStart = pos;
+      while (pos < len && inlineTransforms.charCodeAt(pos) !== 40) pos++;
+      if (pos >= len) break;
+      const name = inlineTransforms.substring(nameStart, pos);
+      // Scan to closing paren, recording top-level comma positions
+      let depth = 1;
+      const valueStart = pos + 1;
+      let c1 = -1, c2 = -1;
+      pos++;
+      while (pos < len && depth > 0) {
+        const c = inlineTransforms.charCodeAt(pos);
+        if (c === 40) depth++;
+        else if (c === 41) depth--;
+        else if (c === 44 && depth === 1) {
+          if (c1 === -1) c1 = pos;
+          else if (c2 === -1) c2 = pos;
+        }
+        pos++;
+      }
+      const valueEnd = pos - 1;
+      // Decompose multi-arg functions into individual axis properties
+      if (name === 'translate' || name === 'translate3d') {
+        if (c1 === -1) {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.translateZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+        fullTranslateValue = inlineTransforms.substring(valueStart, valueEnd);
+      } else if (name === 'scale' || name === 'scale3d') {
+        if (c1 === -1) {
+          cachedTransforms.scale = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.scaleX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.scaleZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
         }
+      } else {
+        cachedTransforms[name] = inlineTransforms.substring(valueStart, valueEnd);
       }
     }
+    // Resolve the requested property from the cache
+    if (propName === 'translate3d' && fullTranslateValue) {
+      if (animationInlineStyles) animationInlineStyles[propName] = fullTranslateValue;
+      return fullTranslateValue;
+    }
+    const cached = cachedTransforms[propName];
+    if (!isUnd(cached)) {
+      if (animationInlineStyles) animationInlineStyles[propName] = cached;
+      return cached;
+    }
   }
-  return inlineTransforms && !isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+  return propName === 'translate3d' ? '0px, 0px, 0px' :
+    propName === 'rotate3d' ? '0, 0, 0, 0deg' :
     stringStartsWith(propName, 'scale') ? '1' :
     stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew') ? '0deg' : '0px';
 };
 
+/**
+ * Builds a CSS transform string from the target's cached transform properties.
+ * Iterates validTransforms in order (perspective > translate > rotate > scale > skew > matrix).
+ * When adjacent axis properties are all present, emits a shorter shorthand (translateX + translateY -> translate(x, y))
+ * The index is advanced past consumed properties so they are not emitted twice.
+ * Properties without a grouping partner (e.g. translateY alone, scaleZ alone) emit individually.
+ *
+ * @param  {Record<String, String>} props
+ * @return {String}
+ */
+const buildTransformString = (props) => {
+  let str = emptyString;
+  for (let i = 0, l = validTransforms.length; i < l; i++) {
+    const key = validTransforms[i];
+    const val = props[key];
+    if (val !== undefined) {
+      // Group translateX with adjacent translateY / translateZ
+      if (key === 'translateX') {
+        const next = props.translateY;
+        if (next !== undefined) {
+          const next2 = props.translateZ;
+          if (next2 !== undefined) {
+            str += `translate3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `translate(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // Group scaleX with adjacent scaleY / scaleZ (only when standalone scale is absent)
+      if (key === 'scaleX' && props.scale === undefined) {
+        const next = props.scaleY;
+        if (next !== undefined) {
+          const next2 = props.scaleZ;
+          if (next2 !== undefined) {
+            str += `scale3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `scale(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // All other properties: emit individually using pre-built fragment string
+      str += `${transformsFragmentStrings[key]}${val}) `;
+    }
+    // Preserve non-animatable rotate3d in correct position (after rotateZ, before scale)
+    if (key === 'rotateZ') {
+      if (props.rotate3d !== undefined) str += `rotate3d(${props.rotate3d}) `;
+    }
+  }
+  // Preserve non-animatable matrix/matrix3d from inline styles
+  if (props.matrix !== undefined) str += `matrix(${props.matrix}) `;
+  if (props.matrix3d !== undefined) str += `matrix3d(${props.matrix3d}) `;
+  return str;
+};
+
 
 
 /**
@@ -1189,15 +1332,16 @@ const setValue = (targetValue, defaultValue) => {
  * @param  {TweenPropValue} value
  * @param  {Target} target
  * @param  {Number} index
- * @param  {Number} total
- * @param  {Object} [store]
+ * @param  {TargetsArray} targets
+ * @param  {Object|null} store
+ * @param  {Tween|null} prevTween
  * @return {any}
  */
-const getFunctionValue = (value, target, index, total, store) => {
+const getFunctionValue = (value, target, index, targets, store, prevTween) => {
   let func;
   if (isFnc(value)) {
     func = () => {
-      const computed = /** @type {Function} */(value)(target, index, total);
+      const computed = /** @type {Function} */(value)(target, index, targets, prevTween);
       // Fallback to 0 if the function returns undefined / NaN / null / false / 0
       return !isNaN(+computed) ? +computed : computed || 0;
     };
@@ -1264,9 +1408,17 @@ const getCSSValue = (target, propName, animationInlineStyles) => {
  */
 const getOriginalAnimatableValue = (target, propName, tweenType, animationInlineStyles) => {
   const type = !isUnd(tweenType) ? tweenType : getTweenType(target, propName);
-  return type === tweenTypes.OBJECT ? target[propName] || 0 :
-         type === tweenTypes.ATTRIBUTE ? /** @type {DOMTarget} */(target).getAttribute(propName) :
-         type === tweenTypes.TRANSFORM ? parseInlineTransforms(/** @type {DOMTarget} */(target), propName, animationInlineStyles) :
+  if (type === tweenTypes.OBJECT) {
+    const value = target[propName];
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value || 0;
+  }
+  if (type === tweenTypes.ATTRIBUTE) {
+    const value = /** @type {DOMTarget} */(target).getAttribute(propName);
+    if (value && animationInlineStyles) animationInlineStyles[propName] = value;
+    return value;
+  }
+  return type === tweenTypes.TRANSFORM ? parseInlineTransforms(/** @type {DOMTarget} */(target), propName, animationInlineStyles) :
          type === tweenTypes.CSS_VAR ? getCSSValue(/** @type {DOMTarget} */(target), propName, animationInlineStyles).trimStart() :
          getCSSValue(/** @type {DOMTarget} */(target), propName, animationInlineStyles);
 };
@@ -1368,6 +1520,54 @@ const decomposeTweenValue = (tween, targetObject) => {
 
 const decomposedOriginalValue = createDecomposedValueTargetObject();
 
+/**
+ * @param  {Tween} tween
+ * @param  {Number} progress
+ * @param  {Number} precision
+ * @return {String}
+ */
+const composeColorValue = (tween, progress, precision) => {
+  const mod = tween._modifier;
+  const fn = tween._fromNumbers;
+  const tn = tween._toNumbers;
+  const r = round$1(clamp$1(/** @type {Number} */(mod(lerp$1(fn[0], tn[0], progress))), 0, 255), 0);
+  const g = round$1(clamp$1(/** @type {Number} */(mod(lerp$1(fn[1], tn[1], progress))), 0, 255), 0);
+  const b = round$1(clamp$1(/** @type {Number} */(mod(lerp$1(fn[2], tn[2], progress))), 0, 255), 0);
+  const a = clamp$1(/** @type {Number} */(mod(round$1(lerp$1(fn[3], tn[3], progress), precision))), 0, 1);
+  if (tween._composition !== compositionTypes.none) {
+    const ns = tween._numbers;
+    ns[0] = r;
+    ns[1] = g;
+    ns[2] = b;
+    ns[3] = a;
+  }
+  return `rgba(${r},${g},${b},${a})`;
+};
+
+/**
+ * @param  {Tween} tween
+ * @param  {Number} progress
+ * @param  {Number} precision
+ * @return {String}
+ */
+const composeComplexValue = (tween, progress, precision) => {
+  const mod = tween._modifier;
+  const fn = tween._fromNumbers;
+  const tn = tween._toNumbers;
+  const ts = tween._strings;
+  const hasComposition = tween._composition !== compositionTypes.none;
+  let v = ts[0];
+  for (let j = 0, l = tn.length; j < l; j++) {
+    const n = /** @type {Number} */(mod(round$1(lerp$1(fn[j], tn[j], progress), precision)));
+    const s = ts[j + 1];
+    v += `${s ? n + s : n}`;
+    if (hasComposition) {
+      tween._numbers[j] = n;
+    }
+  }
+  return v;
+};
+
 
 
 
@@ -1396,7 +1596,6 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   const _hasChildren = tickable._hasChildren;
   const tickableDelay = tickable._delay;
   const tickablePrevAbsoluteTime = tickable._currentTime; // TODO: rename ._currentTime to ._absoluteCurrentTime
-
   const tickableEndTime = tickableDelay + iterationDuration;
   const tickableAbsoluteTime = time - tickableDelay;
   const tickablePrevTime = clamp$1(tickablePrevAbsoluteTime, -tickableDelay, duration);
@@ -1528,30 +1727,9 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             number = /** @type {Number} */(tweenModifier(round$1(lerp$1(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision)));
             value = `${number}${tween._unit}`;
           } else if (tweenValueType === valueTypes.COLOR) {
-            const fn = tween._fromNumbers;
-            const tn = tween._toNumbers;
-            const r = round$1(clamp$1(/** @type {Number} */(tweenModifier(lerp$1(fn[0], tn[0], tweenProgress))), 0, 255), 0);
-            const g = round$1(clamp$1(/** @type {Number} */(tweenModifier(lerp$1(fn[1], tn[1], tweenProgress))), 0, 255), 0);
-            const b = round$1(clamp$1(/** @type {Number} */(tweenModifier(lerp$1(fn[2], tn[2], tweenProgress))), 0, 255), 0);
-            const a = clamp$1(/** @type {Number} */(tweenModifier(round$1(lerp$1(fn[3], tn[3], tweenProgress), tweenPrecision))), 0, 1);
-            value = `rgba(${r},${g},${b},${a})`;
-            if (tweenHasComposition) {
-              const ns = tween._numbers;
-              ns[0] = r;
-              ns[1] = g;
-              ns[2] = b;
-              ns[3] = a;
-            }
+            value = composeColorValue(tween, tweenProgress, tweenPrecision);
           } else if (tweenValueType === valueTypes.COMPLEX) {
-            value = tween._strings[0];
-            for (let j = 0, l = tween._toNumbers.length; j < l; j++) {
-              const n = /** @type {Number} */(tweenModifier(round$1(lerp$1(tween._fromNumbers[j], tween._toNumbers[j], tweenProgress), tweenPrecision)));
-              const s = tween._strings[j + 1];
-              value += `${s ? n + s : n}`;
-              if (tweenHasComposition) {
-                tween._numbers[j] = n;
-              }
-            }
+            value = composeComplexValue(tween, tweenProgress, tweenPrecision);
           }
 
           // For additive tweens and Animatables
@@ -1594,14 +1772,8 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
         }
 
-        // NOTE: Possible improvement: Use translate(x,y) / translate3d(x,y,z) syntax
-        // to reduce memory usage on string composition
         if (tweenTransformsNeedUpdate && tween._renderTransforms) {
-          let str = emptyString;
-          for (let key in tweenTargetTransformsProperties) {
-            str += `${transformsFragmentStrings[key]}${tweenTargetTransformsProperties[key]}) `;
-          }
-          tweenStyle.transform = str;
+          tweenStyle.transform = buildTransformString(tweenTargetTransformsProperties);
           tweenTransformsNeedUpdate = 0;
         }
 
@@ -1712,7 +1884,6 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
     // Renders on timeline are triggered by its children so it needs to be set after rendering the children
     if (!muteCallbacks && tlChildrenHasRendered) tl.onRender(/** @type {CallbackArgument} */(tl));
-
     // Triggers the timeline onComplete() once all chindren all completed and the current time has reached the end
     if ((tlChildrenHaveCompleted || tlIsRunningBackwards) && tl._currentTime >= tl.duration) {
       // Make sure the paused flag is false in case it has been skipped in the render function
@@ -1766,59 +1937,78 @@ const sanitizePropertyName = (propertyName, target, tweenType) => {
 /**
  * @template {Renderable} T
  * @param {T} renderable
+ * @param {Boolean} [inlineStylesOnly]
  * @return {T}
  */
-const cleanInlineStyles = renderable => {
-  // Allow cleanInlineStyles() to be called on timelines
+const revertValues = (renderable, inlineStylesOnly = false) => {
+  // Allow revertValues() to be called on timelines
   if (renderable._hasChildren) {
-    forEachChildren(renderable, cleanInlineStyles, true);
+    forEachChildren(renderable, (/** @type {Renderable} */child) => revertValues(child, inlineStylesOnly), true);
   } else {
     const animation = /** @type {JSAnimation} */(renderable);
     animation.pause();
     forEachChildren(animation, (/** @type {Tween} */tween) => {
       const tweenProperty = tween.property;
       const tweenTarget = tween.target;
-      if (tweenTarget[isDomSymbol]) {
-        const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
-        const originalInlinedValue = tween._inlineValue;
-        const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
-        if (tween._tweenType === tweenTypes.TRANSFORM) {
-          const cachedTransforms = tweenTarget[transformsSymbol];
-          if (tweenHadNoInlineValue) {
-            delete cachedTransforms[tweenProperty];
-          } else {
-            cachedTransforms[tweenProperty] = originalInlinedValue;
-          }
-          if (tween._renderTransforms) {
-            if (!Object.keys(cachedTransforms).length) {
-              targetStyle.removeProperty('transform');
+      const tweenType = tween._tweenType;
+      const originalInlinedValue = tween._inlineValue;
+      const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
+      if (tweenType === tweenTypes.OBJECT) {
+        if (!inlineStylesOnly && !tweenHadNoInlineValue) {
+          tweenTarget[tweenProperty] = originalInlinedValue;
+        }
+      } else if (tweenTarget[isDomSymbol]) {
+        if (tweenType === tweenTypes.ATTRIBUTE) {
+          if (!inlineStylesOnly) {
+            if (tweenHadNoInlineValue) {
+              /** @type {DOMTarget} */(tweenTarget).removeAttribute(tweenProperty);
             } else {
-              let str = emptyString;
-              for (let key in cachedTransforms) {
-                str += transformsFragmentStrings[key] + cachedTransforms[key] + ') ';
-              }
-              targetStyle.transform = str;
+              /** @type {DOMTarget} */(tweenTarget).setAttribute(tweenProperty, /** @type {String} */(originalInlinedValue));
             }
           }
         } else {
-          if (tweenHadNoInlineValue) {
-            targetStyle.removeProperty(toLowerCase(tweenProperty));
+          const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
+          if (tweenType === tweenTypes.TRANSFORM) {
+            const cachedTransforms = tweenTarget[transformsSymbol];
+            if (tweenHadNoInlineValue) {
+              delete cachedTransforms[tweenProperty];
+            } else {
+              cachedTransforms[tweenProperty] = originalInlinedValue;
+            }
+            if (tween._renderTransforms) {
+              if (!Object.keys(cachedTransforms).length) {
+                targetStyle.removeProperty('transform');
+              } else {
+                targetStyle.transform = buildTransformString(cachedTransforms);
+              }
+            }
           } else {
-            targetStyle[tweenProperty] = originalInlinedValue;
+            if (tweenHadNoInlineValue) {
+              targetStyle.removeProperty(toLowerCase(tweenProperty));
+            } else {
+              targetStyle[tweenProperty] = originalInlinedValue;
+            }
           }
         }
-        if (animation._tail === tween) {
-          animation.targets.forEach(t => {
-            if (t.getAttribute && t.getAttribute('style') === emptyString) {
-              t.removeAttribute('style');
-            }          });
-        }
+      }
+      if (tweenTarget[isDomSymbol] && animation._tail === tween) {
+        animation.targets.forEach(t => {
+          if (t.getAttribute && t.getAttribute('style') === emptyString) {
+            t.removeAttribute('style');
+          }        });
       }
     });
   }
   return renderable;
 };
 
+/**
+ * @template {Renderable} T
+ * @param {T} renderable
+ * @return {T}
+ */
+const cleanInlineStyles = renderable => revertValues(renderable, true);
+
 
 
 /*
@@ -2503,6 +2693,9 @@ const reviveTimer = timer => {
 
 let timerId = 0;
 
+/** @param {Timer} prev @param {Timer} child */
+const sortByPriority = (prev, child) => prev._priority > child._priority;
+
 /**
  * Base class used to create Timers, Animations and Timelines
  */
@@ -2529,6 +2722,7 @@ class Timer extends Clock {
       autoplay,
       frameRate,
       playbackRate,
+      priority,
       onComplete,
       onLoop,
       onPause,
@@ -2550,16 +2744,6 @@ class Timer extends Clock {
                               /** @type {Number} */(timerLoop) < 0 ? Infinity :
                               /** @type {Number} */(timerLoop) + 1;
 
-    if (devTools) {
-      const isInfinite = timerIterationCount === Infinity;
-      const registered = devTools.register(this, parameters, isInfinite);
-      if (registered && isInfinite) {
-        const minIterations = alternate ? 2 : 1;
-        const iterations = parent ? devTools.maxNestedInfiniteLoops : devTools.maxInfiniteLoops;
-        timerIterationCount = Math.max(iterations, minIterations);
-      }
-    }
-
     let offsetPosition = 0;
 
     if (parent) {
@@ -2643,6 +2827,8 @@ class Timer extends Clock {
     this._fps = setValue(frameRate, timerDefaults.frameRate);
     /** @type {Number} */
     this._speed = setValue(playbackRate, timerDefaults.playbackRate);
+    /** @type {Number} */
+    this._priority = +setValue(priority, 1);
   }
 
   get cancelled() {
@@ -2787,7 +2973,7 @@ class Timer extends Clock {
       tick(this, minValue, 0, 0, tickModes.FORCE);
     } else {
       if (!this._running) {
-        addChild(engine, this);
+        addChild(engine, this, sortByPriority);
         engine._hasChildren = true;
         this._running = true;
       }
@@ -3382,7 +3568,7 @@ class JSAnimation extends Timer {
    * @param {Number} [parentPosition]
    * @param {Boolean} [fastSet=false]
    * @param {Number} [index=0]
-   * @param {Number} [length=0]
+   * @param {TargetsArray} [allTargets]
    */
   constructor(
     targets,
@@ -3391,7 +3577,7 @@ class JSAnimation extends Timer {
     parentPosition,
     fastSet = false,
     index = 0,
-    length = 0
+    allTargets
   ) {
 
     super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
@@ -3442,7 +3628,7 @@ class JSAnimation extends Timer {
 
       const target = parsedTargets[targetIndex];
       const ti = index || targetIndex;
-      const tl = length || targetsLength;
+      const tl = allTargets || parsedTargets;
 
       let lastTransformGroupIndex = NaN;
       let lastTransformGroupLength = NaN;
@@ -3518,7 +3704,14 @@ class JSAnimation extends Timer {
             toFunctionStore.func = null;
             fromFunctionStore.func = null;
 
-            const computedToValue = getFunctionValue(key.to, target, ti, tl, toFunctionStore);
+            const computedComposition = getFunctionValue(setValue(key.composition, tComposition), target, ti, tl, null, null);
+            const tweenComposition = isNum(computedComposition) ? computedComposition : compositionTypes[computedComposition];
+            if (!siblings && tweenComposition !== compositionTypes.none) siblings = getTweenSiblings(target, propName);
+            // Timelines pass the last sibling tween if it belongs to the same timeline
+            // Standalone animations only pass prevTween when the property has multiple keyframes
+            const tailTween = siblings ? siblings._tail : null;
+            const prevSiblingTween = parent && tailTween && tailTween.parent.parent === parent ? tailTween : prevTween;
+            const computedToValue = getFunctionValue(key.to, target, ti, tl, toFunctionStore, prevSiblingTween);
 
             let tweenToValue;
             // Allows function based values to return an object syntax value ({to: v})
@@ -3528,20 +3721,18 @@ class JSAnimation extends Timer {
             } else {
               tweenToValue = computedToValue;
             }
-            const tweenFromValue = getFunctionValue(key.from, target, ti, tl);
+            const tweenFromValue = getFunctionValue(key.from, target, ti, tl, null, prevSiblingTween);
             const easeToParse = key.ease || tEasing;
 
-            const easeFunctionResult = getFunctionValue(easeToParse, target, ti, tl);
+            const easeFunctionResult = getFunctionValue(easeToParse, target, ti, tl, null, prevSiblingTween);
             const keyEasing = isFnc(easeFunctionResult) || isStr(easeFunctionResult) ? easeFunctionResult : easeToParse;
 
             const hasSpring = !isUnd(keyEasing) && !isUnd(/** @type {Spring} */(keyEasing).ease);
             const tweenEasing = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
             // Calculate default individual keyframe duration by dividing the tl of keyframes
-            const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(setValue(key.duration, (l > 1 ? getFunctionValue(tDuration, target, ti, tl) / l : tDuration)), target, ti, tl);
+            const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(setValue(key.duration, (l > 1 ? getFunctionValue(tDuration, target, ti, tl, null, prevSiblingTween) / l : tDuration)), target, ti, tl, null, prevSiblingTween);
             // Default delay value should only be applied to the first tween
-            const tweenDelay = getFunctionValue(setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl);
-            const computedComposition = getFunctionValue(setValue(key.composition, tComposition), target, ti, tl);
-            const tweenComposition = isNum(computedComposition) ? computedComposition : compositionTypes[computedComposition];
+            const tweenDelay = getFunctionValue(setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl, null, prevSiblingTween);
             // Modifiers are treated differently and don't accept function based value to prevent having to pass a function wrapper
             const tweenModifier = key.modifier || tModifier;
             const hasFromvalue = !isUnd(tweenFromValue);
@@ -3558,7 +3749,6 @@ class JSAnimation extends Timer {
             let prevSibling = prevTween;
 
             if (tweenComposition !== compositionTypes.none) {
-              if (!siblings) siblings = getTweenSiblings(target, propName);
               let nextSibling = siblings._head;
               // Iterate trough all the next siblings until we find a sibling with an equal or inferior start time
               while (nextSibling && !nextSibling._isOverridden && nextSibling._absoluteStartTime <= absoluteStartTime) {
@@ -3577,8 +3767,8 @@ class JSAnimation extends Timer {
 
             // Decompose values
             if (isFromToValue) {
-              decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[0], target, ti, tl, fromFunctionStore) : tweenFromValue, fromTargetObject);
-              decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore) : tweenToValue, toTargetObject);
+              decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[0], target, ti, tl, fromFunctionStore, prevSiblingTween) : tweenFromValue, fromTargetObject);
+              decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore, prevSiblingTween) : tweenToValue, toTargetObject);
               // Needed to force an inline style registration
               const originalValue = getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore);
               if (fromTargetObject.t === valueTypes.NUMBER) {
@@ -3732,6 +3922,18 @@ class JSAnimation extends Timer {
               composeTween(tween, siblings);
             }
 
+            // Pre-compute the tween end value for function-based value chaining (ie morphTo / scrambleText in keyframe arrays and timelines)
+            const vt = tween._valueType;
+            if (vt === valueTypes.COMPLEX) {
+              tween._value = composeComplexValue(tween, 1, -1);
+            } else if (vt === valueTypes.COLOR) {
+              tween._value = composeColorValue(tween, 1, -1);
+            } else if (vt === valueTypes.UNIT) {
+              tween._value = `${tweenModifier(tween._toNumber)}${tween._unit}`;
+            } else {
+              tween._value = tweenModifier(tween._toNumber);
+            }
+
             if (isNaN(firstTweenChangeStartTime)) {
               firstTweenChangeStartTime = tween._startTime;
             }
@@ -3889,7 +4091,7 @@ class JSAnimation extends Timer {
    */
   revert() {
     super.revert();
-    return cleanInlineStyles(this);
+    return revertValues(this);
   }
 
   /**
@@ -3911,170 +4113,12 @@ class JSAnimation extends Timer {
  * @param {AnimationParams} parameters
  * @return {JSAnimation}
  */
-const animate = (targets, parameters) => new JSAnimation(targets, parameters, null, 0, false).init();
-
-
-
-
-
-const WAAPIAnimationsLookups = {
-  _head: null,
-  _tail: null,
-};
-
-/**
- * @param {DOMTarget} $el
- * @param {String} [property]
- * @param {WAAPIAnimation} [parent]
- * @return {globalThis.Animation}
- */
-const removeWAAPIAnimation = ($el, property, parent) => {
-  let nextLookup = WAAPIAnimationsLookups._head;
-  let anim;
-  while (nextLookup) {
-    const next = nextLookup._next;
-    const matchTarget = nextLookup.$el === $el;
-    const matchProperty = !property || nextLookup.property === property;
-    const matchParent = !parent || nextLookup.parent === parent;
-    if (matchTarget && matchProperty && matchParent) {
-      anim = nextLookup.animation;
-      try { anim.commitStyles(); } catch {}      anim.cancel();
-      removeChild(WAAPIAnimationsLookups, nextLookup);
-      const lookupParent = nextLookup.parent;
-      if (lookupParent) {
-        lookupParent._completed++;
-        if (lookupParent.animations.length === lookupParent._completed) {
-          lookupParent.completed = true;
-          lookupParent.paused = true;
-          if (!lookupParent.muteCallbacks) {
-            lookupParent.onComplete(lookupParent);
-            lookupParent._resolve(lookupParent);
-          }
-        }
-      }
-    }
-    nextLookup = next;
-  }
-  return anim;
-};
-
-/**
- * @param {WAAPIAnimation} parent
- * @param {DOMTarget} $el
- * @param {String} property
- * @param {PropertyIndexedKeyframes} keyframes
- * @param {KeyframeAnimationOptions} params
- * @retun {globalThis.Animation}
- */
-const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
-  const animation = $el.animate(keyframes, params);
-  const animTotalDuration = params.delay + (+params.duration * params.iterations);
-  animation.playbackRate = parent._speed;
-  if (parent.paused) animation.pause();
-  if (parent.duration < animTotalDuration) {
-    parent.duration = animTotalDuration;
-    parent.controlAnimation = animation;
-  }
-  parent.animations.push(animation);
-  removeWAAPIAnimation($el, property);
-  addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
-  const handleRemove = () => removeWAAPIAnimation($el, property, parent);
-  animation.oncancel = handleRemove;
-  animation.onremove = handleRemove;
-  if (!parent.persist) {
-    animation.onfinish = handleRemove;
-  }
-  return animation;
-};
-
-
-
-
-
-/**
- * @overload
- * @param  {DOMTargetSelector} targetSelector
- * @param  {String} propName
- * @return {String}
- *
- * @overload
- * @param  {JSTargetsParam} targetSelector
- * @param  {String} propName
- * @return {Number|String}
- *
- * @overload
- * @param  {DOMTargetsParam} targetSelector
- * @param  {String} propName
- * @param  {String} unit
- * @return {String}
- *
- * @overload
- * @param  {TargetsParam} targetSelector
- * @param  {String} propName
- * @param  {Boolean} unit
- * @return {Number}
- *
- * @param  {TargetsParam} targetSelector
- * @param  {String} propName
- * @param  {String|Boolean} [unit]
- */
-function get(targetSelector, propName, unit) {
-  const targets = registerTargets(targetSelector);
-  if (!targets.length) return;
-  const [ target ] = targets;
-  const tweenType = getTweenType(target, propName);
-  const normalizePropName = sanitizePropertyName(propName, target, tweenType);
-  let originalValue = getOriginalAnimatableValue(target, normalizePropName);
-  if (isUnd(unit)) {
-    return originalValue;
+const animate = (targets, parameters) => {
+  if (globals.editor) {
+    return globals.editor.addAnimation(targets, parameters);
   } else {
-    decomposeRawValue(originalValue, decomposedOriginalValue);
-    if (decomposedOriginalValue.t === valueTypes.NUMBER || decomposedOriginalValue.t === valueTypes.UNIT) {
-      if (unit === false) {
-        return decomposedOriginalValue.n;
-      } else {
-        const convertedValue = convertValueUnit(/** @type {DOMTarget} */(target), decomposedOriginalValue, /** @type {String} */(unit), false);
-        return `${round$1(convertedValue.n, globals.precision)}${convertedValue.u}`;
-      }
-    }
+    return new JSAnimation(targets, parameters, null, 0, false).init();
   }
-}
-
-/**
- * @param  {TargetsParam} targets
- * @param  {AnimationParams} parameters
- * @return {JSAnimation}
- */
-const set = (targets, parameters) => {
-  if (isUnd(parameters)) return;
-  parameters.duration = minValue;
-  // Do not overrides currently active tweens by default
-  parameters.composition = setValue(parameters.composition, compositionTypes.none);
-  // Skip init() and force rendering by playing the animation
-  return new JSAnimation(targets, parameters, null, 0, true).resume();
-};
-
-/**
- * @param  {TargetsParam} targets
- * @param  {Renderable|WAAPIAnimation} [renderable]
- * @param  {String} [propertyName]
- * @return {TargetsArray}
- */
-const remove = (targets, renderable, propertyName) => {
-  const targetsArray = parseTargets(targets);
-  for (let i = 0, l = targetsArray.length; i < l; i++) {
-    removeWAAPIAnimation(
-      /** @type {DOMTarget}  */(targetsArray[i]),
-      propertyName,
-      renderable && /** @type {WAAPIAnimation} */(renderable).controlAnimation && /** @type {WAAPIAnimation} */(renderable),
-    );
-  }
-  removeTargetsFromRenderable(
-    targetsArray,
-    /** @type {Renderable} */(renderable),
-    propertyName
-  );
-  return targetsArray;
 };
 
 
@@ -4130,6 +4174,8 @@ const parseTimelinePosition = (timeline, timePosition) => {
 
 
 
+
+
 /**
  * @param {Timeline} tl
  * @return {Number}
@@ -4151,7 +4197,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
@@ -4159,15 +4205,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 = isNum(childParams.duration) && /** @type {Number} */(childParams.duration) <= 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 - minValue : timePosition;
   if (tl.composition) tick(tl, adjustedPosition, 1, 1, tickModes.AUTO);
   const tlChild = targets ?
-    new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
+    new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, allTargets) :
     new Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
   if (tl.composition) tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
@@ -4215,7 +4261,7 @@ 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
@@ -4225,7 +4271,7 @@ 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, a2, a3) {
     const isAnim = isObj(a2);
@@ -4234,9 +4280,11 @@ class Timeline extends Timer {
       this._hasChildren = true;
       if (isAnim) {
         const childParams = /** @type {AnimationParams} */(a2);
-        // Check for function for children stagger positions
-        if (isFnc(a3)) {
-          const staggeredPosition = a3;
+        const editorHook = globals.editor && globals.editor.addTimelineChild;
+        const isStaggerType = a3 && /** @type {TweakRegister} */(a3).type === 'Stagger' && globals.editor;
+        // Check for function or Stagger type children positions
+        const staggeredPosition = isFnc(a3) ? a3 : null;
+        if (staggeredPosition || isStaggerType) {
           const parsedTargetsArray = parseTargets(/** @type {TargetsParam} */(a1));
           // Store initial duration before adding new children that will change the duration
           const tlDuration = this.duration;
@@ -4247,28 +4295,36 @@ class Timeline extends 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.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 (!isUnd(id)) staggeredChildParams.id = id + '-' + i;
+            const staggeredTimePosition = parseTimelinePosition(this, staggerFn(target, i, parsedTargetsArray, null, this));
             addTlChild(
               staggeredChildParams,
               this,
-              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,
-            parseTimelinePosition(this, a3),
+            parseTimelinePosition(this, resolvedPosition),
             /** @type {TargetsParam} */(a1),
           );
         }
@@ -4390,7 +4446,7 @@ class Timeline extends Timer {
   revert() {
     super.revert();
     forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => child.revert, true);
-    return cleanInlineStyles(this);
+    return revertValues(this);
   }
 
   /**
@@ -4410,7 +4466,12 @@ class Timeline extends Timer {
  * @param {TimelineParams} [parameters]
  * @return {Timeline}
  */
-const createTimeline = parameters => new Timeline(parameters).init();
+const createTimeline = parameters => {
+  if (globals.editor) {
+    return /** @type {Timeline} */(/** @type {unknown} */(globals.editor.addTimeline(parameters)));
+  }
+  return new Timeline(parameters).init();
+};
 
 
 
@@ -4857,6 +4918,170 @@ const createSpring = (parameters) => {
 
 
 
+const WAAPIAnimationsLookups = {
+  _head: null,
+  _tail: null,
+};
+
+/**
+ * @param {DOMTarget} $el
+ * @param {String} [property]
+ * @param {WAAPIAnimation} [parent]
+ * @return {globalThis.Animation}
+ */
+const removeWAAPIAnimation = ($el, property, parent) => {
+  let nextLookup = WAAPIAnimationsLookups._head;
+  let anim;
+  while (nextLookup) {
+    const next = nextLookup._next;
+    const matchTarget = nextLookup.$el === $el;
+    const matchProperty = !property || nextLookup.property === property;
+    const matchParent = !parent || nextLookup.parent === parent;
+    if (matchTarget && matchProperty && matchParent) {
+      anim = nextLookup.animation;
+      try { anim.commitStyles(); } catch {}      anim.cancel();
+      removeChild(WAAPIAnimationsLookups, nextLookup);
+      const lookupParent = nextLookup.parent;
+      if (lookupParent) {
+        lookupParent._completed++;
+        if (lookupParent.animations.length === lookupParent._completed) {
+          lookupParent.completed = true;
+          lookupParent.paused = true;
+          if (!lookupParent.muteCallbacks) {
+            lookupParent.onComplete(lookupParent);
+            lookupParent._resolve(lookupParent);
+          }
+        }
+      }
+    }
+    nextLookup = next;
+  }
+  return anim;
+};
+
+/**
+ * @param {WAAPIAnimation} parent
+ * @param {DOMTarget} $el
+ * @param {String} property
+ * @param {PropertyIndexedKeyframes} keyframes
+ * @param {KeyframeAnimationOptions} params
+ * @retun {globalThis.Animation}
+ */
+const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
+  const animation = $el.animate(keyframes, params);
+  const animTotalDuration = params.delay + (+params.duration * params.iterations);
+  animation.playbackRate = parent._speed;
+  if (parent.paused) animation.pause();
+  if (parent.duration < animTotalDuration) {
+    parent.duration = animTotalDuration;
+    parent.controlAnimation = animation;
+  }
+  parent.animations.push(animation);
+  removeWAAPIAnimation($el, property);
+  addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
+  const handleRemove = () => removeWAAPIAnimation($el, property, parent);
+  animation.oncancel = handleRemove;
+  animation.onremove = handleRemove;
+  if (!parent.persist) {
+    animation.onfinish = handleRemove;
+  }
+  return animation;
+};
+
+
+
+
+
+/**
+ * @overload
+ * @param  {DOMTargetSelector} targetSelector
+ * @param  {String} propName
+ * @return {String}
+ *
+ * @overload
+ * @param  {JSTargetsParam} targetSelector
+ * @param  {String} propName
+ * @return {Number|String}
+ *
+ * @overload
+ * @param  {DOMTargetsParam} targetSelector
+ * @param  {String} propName
+ * @param  {String} unit
+ * @return {String}
+ *
+ * @overload
+ * @param  {TargetsParam} targetSelector
+ * @param  {String} propName
+ * @param  {Boolean} unit
+ * @return {Number}
+ *
+ * @param  {TargetsParam} targetSelector
+ * @param  {String} propName
+ * @param  {String|Boolean} [unit]
+ */
+function get(targetSelector, propName, unit) {
+  const targets = registerTargets(targetSelector);
+  if (!targets.length) return;
+  const [ target ] = targets;
+  const tweenType = getTweenType(target, propName);
+  const normalizePropName = sanitizePropertyName(propName, target, tweenType);
+  let originalValue = getOriginalAnimatableValue(target, normalizePropName);
+  if (isUnd(unit)) {
+    return originalValue;
+  } else {
+    decomposeRawValue(originalValue, decomposedOriginalValue);
+    if (decomposedOriginalValue.t === valueTypes.NUMBER || decomposedOriginalValue.t === valueTypes.UNIT) {
+      if (unit === false) {
+        return decomposedOriginalValue.n;
+      } else {
+        const convertedValue = convertValueUnit(/** @type {DOMTarget} */(target), decomposedOriginalValue, /** @type {String} */(unit), false);
+        return `${round$1(convertedValue.n, globals.precision)}${convertedValue.u}`;
+      }
+    }
+  }
+}
+
+/**
+ * @param  {TargetsParam} targets
+ * @param  {AnimationParams} parameters
+ * @return {JSAnimation}
+ */
+const set = (targets, parameters) => {
+  if (isUnd(parameters)) return;
+  parameters.duration = minValue;
+  // Do not overrides currently active tweens by default
+  parameters.composition = setValue(parameters.composition, compositionTypes.none);
+  // Skip init() and force rendering by playing the animation
+  return new JSAnimation(targets, parameters, null, 0, true).resume();
+};
+
+/**
+ * @param  {TargetsParam} targets
+ * @param  {Renderable|WAAPIAnimation} [renderable]
+ * @param  {String} [propertyName]
+ * @return {TargetsArray}
+ */
+const remove = (targets, renderable, propertyName) => {
+  const targetsArray = parseTargets(targets);
+  for (let i = 0, l = targetsArray.length; i < l; i++) {
+    removeWAAPIAnimation(
+      /** @type {DOMTarget}  */(targetsArray[i]),
+      propertyName,
+      renderable && /** @type {WAAPIAnimation} */(renderable).controlAnimation && /** @type {WAAPIAnimation} */(renderable),
+    );
+  }
+  removeTargetsFromRenderable(
+    targetsArray,
+    /** @type {Renderable} */(renderable),
+    propertyName
+  );
+  return targetsArray;
+};
+
+
+
+
+
 /**
  * @param {Event} e
  */
@@ -6059,19 +6284,20 @@ const sync = (callback = noop) => {
 };
 
 /**
- * @param  {(...args: any[]) => Tickable | ((...args: any[]) => void)} constructor
+ * @param  {(...args: any[]) => Tickable | ((...args: any[]) => void) | void} constructor
  * @return {(...args: any[]) => Tickable | ((...args: any[]) => void)}
  */
 const keepTime = constructor => {
   /** @type {Tickable} */
   let tracked;
   return (...args) => {
-    let currentIteration, currentIterationProgress, reversed, alternate;
+    let currentIteration, currentIterationProgress, reversed, alternate, startTime;
     if (tracked) {
       currentIteration = tracked.currentIteration;
       currentIterationProgress = tracked.iterationProgress;
       reversed = tracked.reversed;
       alternate = tracked._alternate;
+      startTime = tracked._startTime;
       tracked.revert();
     }
     const cleanup = constructor(...args);
@@ -6079,6 +6305,7 @@ const keepTime = constructor => {
     if (!isUnd(currentIterationProgress)) {
       /** @type {Tickable} */(tracked).currentIteration = currentIteration;
       /** @type {Tickable} */(tracked).iterationProgress = (alternate ? !(currentIteration % 2) ? reversed : !reversed : reversed) ? 1 - currentIterationProgress : currentIterationProgress;
+      /** @type {Tickable} */(tracked)._startTime = startTime;
     }
     return cleanup || noop;
   }
@@ -7424,12 +7651,12 @@ let transformsPropertiesRegistered = null;
  * @param  {WAAPIKeyframeValue} value
  * @param  {DOMTarget} $el
  * @param  {Number} i
- * @param  {Number} targetsLength
+ * @param  {DOMTargetsArray} parsedTargets
  * @return {String}
  */
-const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
+const normalizeTweenValue = (propName, value, $el, i, parsedTargets) => {
   // Do not try to compute strings with getFunctionValue otherwise it will convert CSS variables
-  let v = isStr(value) ? value : getFunctionValue(/** @type {any} */(value), $el, i, targetsLength);
+  let v = isStr(value) ? value : getFunctionValue(/** @type {any} */(value), $el, i, parsedTargets, null, null);
   if (!isNum(v)) return v;
   if (commonDefaultPXProperties.includes(propName) || stringStartsWith(propName, 'translate')) return `${v}px`;
   if (stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew')) return `${v}deg`;
@@ -7442,18 +7669,18 @@ const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
  * @param  {WAAPIKeyframeValue} from
  * @param  {WAAPIKeyframeValue} to
  * @param  {Number} i
- * @param  {Number} targetsLength
+ * @param  {DOMTargetsArray} parsedTargets
  * @return {WAAPITweenValue}
  */
-const parseIndividualTweenValue = ($el, propName, from, to, i, targetsLength) => {
+const parseIndividualTweenValue = ($el, propName, from, to, i, parsedTargets) => {
   /** @type {WAAPITweenValue} */
   let tweenValue = '0';
-  const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, targetsLength) : getComputedStyle($el)[propName];
+  const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, parsedTargets) : getComputedStyle($el)[propName];
   if (!isUnd(from)) {
-    const computedFrom = normalizeTweenValue(propName, from, $el, i, targetsLength);
+    const computedFrom = normalizeTweenValue(propName, from, $el, i, parsedTargets);
     tweenValue = [computedFrom, computedTo];
   } else {
-    tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, targetsLength)) : computedTo;
+    tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, parsedTargets)) : computedTo;
   }
   return tweenValue;
 };
@@ -7492,9 +7719,8 @@ class WAAPIAnimation {
     }
 
     const parsedTargets = registerTargets(targets);
-    const targetsLength = parsedTargets.length;
 
-    if (!targetsLength) {
+    if (!parsedTargets.length) {
       console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
     }
 
@@ -7550,7 +7776,7 @@ class WAAPIAnimation {
 
       const easeToParse = setValue(params.ease, globals.defaults.ease);
 
-      const easeFunctionResult = getFunctionValue(easeToParse, $el, i, targetsLength);
+      const easeFunctionResult = getFunctionValue(easeToParse, $el, i, parsedTargets, null, null);
       const keyEasing = isFnc(easeFunctionResult) || isStr(easeFunctionResult) ? easeFunctionResult : easeToParse;
 
       const spring = /** @type {Spring} */(easeToParse).ease && easeToParse;
@@ -7558,9 +7784,9 @@ class WAAPIAnimation {
       const easing = parseWAAPIEasing(keyEasing);
 
       /** @type {Number} */
-      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, parsedTargets, null, null)) * timeScale;
       /** @type {Number} */
-      const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, targetsLength) * timeScale;
+      const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, parsedTargets, null, null) * timeScale;
       /** @type {CompositeOperation} */
       const composite = /** @type {CompositeOperation} */(setValue(params.composition, 'replace'));
 
@@ -7586,19 +7812,19 @@ class WAAPIAnimation {
           const to = /** @type {WAAPITweenOptions} */(tweenOptions).to;
           const from = /** @type {WAAPITweenOptions} */(tweenOptions).from;
           /** @type {Number} */
-          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : getFunctionValue(setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
+          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).settlingDuration : getFunctionValue(setValue(tweenOptions.duration, duration), $el, i, parsedTargets, null, null)) * timeScale;
           /** @type {Number} */
-          tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, targetsLength) * timeScale;
+          tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, parsedTargets, null, null) * timeScale;
           /** @type {CompositeOperation} */
           tweenParams.composite = /** @type {CompositeOperation} */(setValue(tweenOptions.composition, composite));
           /** @type {String} */
           tweenParams.easing = parseWAAPIEasing(tweenOptionsEase);
-          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, parsedTargets);
           if (individualTransformProperty) {
             keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
             cachedTransforms[individualTransformProperty] = parsedPropertyValue;
           } else {
-            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, parsedTargets);
           }
           addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
           if (!isUnd(from)) {
@@ -7611,8 +7837,8 @@ class WAAPIAnimation {
           }
         } else {
           parsedPropertyValue = isArr(propertyValue) ?
-                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, targetsLength)) :
-                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, targetsLength);
+                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, parsedTargets)) :
+                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, parsedTargets);
           if (individualTransformProperty) {
             keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
             cachedTransforms[individualTransformProperty] = parsedPropertyValue;
@@ -7845,6 +8071,7 @@ const waapi = {
 
 /**
  * @typedef {Object} LayoutSpecificAnimationParams
+ * @property {Number|String} [id]
  * @property {Number|FunctionValue} [delay]
  * @property {Number|FunctionValue} [duration]
  * @property {EasingParam|FunctionValue} [ease]
@@ -7887,7 +8114,7 @@ const waapi = {
  * @property {String} id
  * @property {DOMTarget} $el
  * @property {Number} index
- * @property {Number} total
+ * @property {Array<DOMTarget>} targets
  * @property {Number} delay
  * @property {Number} duration
  * @property {EasingParam} ease
@@ -8031,7 +8258,7 @@ const createNode = ($el, parentNode, state, recycledNode) => {
   node.$measure = $el;
   node.id = dataId;
   node.index = 0;
-  node.total = 1;
+  node.targets = null;
   node.delay = 0;
   node.duration = 0;
   node.ease = null;
@@ -8217,12 +8444,12 @@ const updateNodeProperties = (node, props) => {
  * @param  {LayoutAnimationTimingsParams} params
  */
 const updateNodeTimingParams = (node, params) => {
-  const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.total);
+  const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.targets, null, null);
   const keyEasing = isFnc(easeFunctionResult) ? easeFunctionResult : params.ease;
   const hasSpring = !isUnd(keyEasing) && !isUnd(/** @type {Spring} */(keyEasing).ease);
   node.ease = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
-  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.total);
-  node.delay = getFunctionValue(params.delay, node.$el, node.index, node.total);
+  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.targets, null, null);
+  node.delay = getFunctionValue(params.delay, node.$el, node.index, node.targets, null, null);
 };
 
 /**
@@ -8595,10 +8822,12 @@ class LayoutSnapshot {
 
     const inRootNodeIds = new Set();
     // Update index and total for inital timing calculation
-    let index = 0, total = this.nodes.size;
+    let index = 0;
+    const allNodeTargets = [];
+    this.nodes.forEach((node) => { allNodeTargets.push(node.$el); });
     this.nodes.forEach((node, id) => {
       node.index = index++;
-      node.total = total;
+      node.targets = allNodeTargets;
       // Track ids of nodes that belong to the current root to filter detached matches
       if (node && node.measuredIsInsideRoot) {
         inRootNodeIds.add(id);
@@ -8710,8 +8939,8 @@ class AutoLayout {
     this.params = params;
     /** @type {DOMTarget} */
     this.root = /** @type {DOMTarget} */(registerTargets(root)[0]);
-    /** @type {Number} */
-    this.id = layoutId++;
+    /** @type {Number|String} */
+    this.id = params.id || layoutId++;
     /** @type {LayoutChildrenParam} */
     this.children = params.children || '*';
     /** @type {Boolean} */
@@ -8834,7 +9063,9 @@ class AutoLayout {
       duration: setValue(params.duration, this.params.duration),
     };
     /** @type {TimelineParams} */
-    const tlParams = {};
+    const tlParams = {
+      id: this.id
+    };
     const onComplete = setValue(params.onComplete, this.params.onComplete);
     const onPause = setValue(params.onPause, this.params.onPause);
     for (let name in defaults) {
@@ -8848,7 +9079,8 @@ class AutoLayout {
     }
     tlParams.onComplete = () => {
       const ap = /** @type {ScrollObserver} */(params.autoplay);
-      const isScrollControled = ap && ap.linked;
+      const ed = globals.editor;
+      const isScrollControled = (ap && ap.linked) || (ed && ed.showPanel);
       if (isScrollControled) {
         if (onComplete) onComplete(this.timeline);
         return;
@@ -9047,41 +9279,39 @@ class AutoLayout {
         animatedParent = animatedParent.parentNode;
       }
 
-      const animatingTotal = animating.length;
-
       // Root is always animated first in sync with the first child (animating.length is the total of children)
       if (node === rootNode) {
         node.index = 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else if (node.isEntering) {
         node.index = animatedParent ? animatedParent.index : enteringIndex;
-        node.total = animatedParent ? animatingTotal : entering.length;
+        node.targets = animatedParent ? animating : entering;
         updateNodeTimingParams(node, enterFromTimings);
         enteringIndex++;
       } else if (node.isLeaving) {
         node.index = animatedParent ? animatedParent.index : leavingIndex;
-        node.total = animatedParent ? animatingTotal : leaving.length;
+        node.targets = animatedParent ? animating : leaving;
         leavingIndex++;
         updateNodeTimingParams(node, leaveToTimings);
       } else if (node.isTarget) {
         node.index = animatingIndex++;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else {
         node.index = animatedParent ? animatedParent.index : 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, swapAtTimings);
       }
 
       // Make sure the old state node has its inex and total values up to date for valid "from" function values calculation
       oldStateNode.index = node.index;
-      oldStateNode.total = node.total;
+      oldStateNode.targets = node.targets;
 
       // Computes all values up front so we can check for changes and we don't have to re-compute them inside the animation props
       for (let prop in nodeProperties) {
-        nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.total);
-        oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.total);
+        nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.targets, null, null);
+        oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.targets, null, null);
       }
 
       // Use a 1px tolerance to detect dimensions changes to prevent width / height animations on barelly visible elements
@@ -9307,8 +9537,8 @@ class AutoLayout {
         }
         $el.style.transform = oldState.getComputedValue($el, 'transform');
         if (animatedSwap.includes($el)) {
-          node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
-          node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
+          node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.targets, null, null);
+          node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.targets, null, null);
         }
       }
       this.transformAnimation = waapi.animate(transformed, {
@@ -9323,7 +9553,7 @@ class AutoLayout {
           if (!animatedSwap.includes($el)) return newValue;
           const oldValue = oldState.getComputedValue($el, 'transform');
           const node = newState.getNode($el);
-          return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
+          return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.targets, null, null), newValue]
         },
         autoplay: false,
         // persist: true,
@@ -9380,10 +9610,13 @@ const chain = fn => {
     const result = fn(...args);
     return new Proxy(noop, {
       apply: (_, __, [v]) => result(v),
-      get: (_, prop) => chain(/**@param {...Number|String} nextArgs */(...nextArgs) => {
-        const nextResult = chainables[prop](...nextArgs);
-        return (/**@type {Number|String} */v) => nextResult(result(v));
-      })
+      get: (_, prop) => {
+        if (!chainables[prop]) return undefined;
+        return chain(/**@param {...Number|String} nextArgs */(...nextArgs) => {
+          const nextResult = chainables[prop](...nextArgs);
+          return (/**@type {Number|String} */v) => nextResult(result(v));
+        })
+      }
     });
   }
 };
@@ -9594,24 +9827,28 @@ const shuffle = items => {
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<Number>}
  */
+
 /**
  * @overload
  * @param {String} val
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<String>}
  */
+
 /**
  * @overload
  * @param {[Number, Number]} val
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<Number>}
  */
+
 /**
  * @overload
  * @param {[String, String]} val
  * @param {StaggerParams} [params]
  * @return {StaggerFunction<String>}
  */
+
 /**
  * @param {Number|String|[Number, Number]|[String, String]} val The staggered value or range
  * @param {StaggerParams} [params] The stagger parameters
@@ -9620,6 +9857,7 @@ const shuffle = items => {
 const stagger = (val, params = {}) => {
   let values = [];
   let maxValue = 0;
+  let cachedOffset;
   const from = params.from;
   const reversed = params.reversed;
   const ease = params.ease;
@@ -9627,12 +9865,14 @@ const stagger = (val, params = {}) => {
   const hasSpring = hasEasing && !isUnd(/** @type {Spring} */(ease).ease);
   const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? parseEase(ease) : null;
   const grid = params.grid;
+  const autoGrid = grid === true;
   const axis = params.axis;
   const customTotal = params.total;
   const fromFirst = isUnd(from) || from === 0 || from === 'first';
   const fromCenter = from === 'center';
   const fromLast = from === 'last';
   const fromRandom = from === 'random';
+  const fromArr = isArr(from);
   const isRange = isArr(val);
   const useProp = params.use;
   const val1 = isRange ? parseNumber(val[0]) : parseNumber(val);
@@ -9640,40 +9880,129 @@ const stagger = (val, params = {}) => {
   const unitMatch = unitsExecRgx.exec((isRange ? val[1] : val) + emptyString);
   const start = params.start || 0 + (isRange ? val1 : 0);
   let fromIndex = fromFirst ? 0 : isNum(from) ? from : 0;
-  return (target, i, t, tl) => {
+  return (target, i, t, _, tl) => {
     const [ registeredTarget ] = registerTargets(target);
-    const total = isUnd(customTotal) ? t : customTotal;
+    const total = isUnd(customTotal) ? t.length : customTotal;
     const customIndex = !isUnd(useProp) ? isFnc(useProp) ? useProp(registeredTarget, i, total) : getOriginalAnimatableValue(registeredTarget, useProp) : false;
     const staggerIndex = isNum(customIndex) || isStr(customIndex) && isNum(+customIndex) ? +customIndex : i;
     if (fromCenter) fromIndex = (total - 1) / 2;
     if (fromLast) fromIndex = total - 1;
     if (!values.length) {
-      for (let index = 0; index < total; index++) {
-        if (!grid) {
-          values.push(abs(fromIndex - index));
+      if (autoGrid) {
+        let hasPositions = true;
+        let minPosX = Infinity;
+        let minPosY = Infinity;
+        let maxPosX = -Infinity;
+        let maxPosY = -Infinity;
+        const pxArr = [];
+        const pyArr = [];
+        for (let index = 0; index < total; index++) {
+          const el = t[index];
+          let px = 0;
+          let py = 0;
+          let found = false;
+          if (el && isFnc(el.getBoundingClientRect)) {
+            const rect = el.getBoundingClientRect();
+            px = rect.left + rect.width / 2;
+            py = rect.top + rect.height / 2;
+            found = true;
+          } else {
+            const obj = /** @type {JSTarget} */(el);
+            if (obj && isNum(obj.x) && isNum(obj.y)) {
+              px = obj.x;
+              py = obj.y;
+              found = true;
+            }
+          }
+          if (!found) {
+            hasPositions = false;
+            break;
+          }
+          pxArr.push(px);
+          pyArr.push(py);
+          if (px < minPosX) minPosX = px;
+          if (py < minPosY) minPosY = py;
+          if (px > maxPosX) maxPosX = px;
+          if (py > maxPosY) maxPosY = py;
+        }
+        if (hasPositions) {
+          let fX = pxArr[0];
+          let fY = pyArr[0];
+          if (fromArr) {
+            fX = minPosX + from[0] * (maxPosX - minPosX);
+            fY = minPosY + from[1] * (maxPosY - minPosY);
+          } else if (fromCenter) {
+            fX = (minPosX + maxPosX) / 2;
+            fY = (minPosY + maxPosY) / 2;
+          } else if (fromLast) {
+            fX = pxArr[total - 1];
+            fY = pyArr[total - 1];
+          } else if (isNum(from)) {
+            fX = pxArr[from];
+            fY = pyArr[from];
+          }
+          for (let index = 0; index < total; index++) {
+            const distanceX = fX - pxArr[index];
+            const distanceY = fY - pyArr[index];
+            let value = sqrt(distanceX * distanceX + distanceY * distanceY);
+            if (axis === 'x') value = -distanceX;
+            if (axis === 'y') value = -distanceY;
+            values.push(value);
+          }
+          let minDist = Infinity;
+          for (let index = 0, l = values.length; index < l; index++) {
+            const absVal = abs(values[index]);
+            if (absVal > 0 && absVal < minDist) minDist = absVal;
+          }
+          if (minDist > 0 && minDist < Infinity) {
+            for (let index = 0, l = values.length; index < l; index++) {
+              values[index] = values[index] / minDist;
+            }
+          }
         } else {
-          const fromX = !fromCenter ? fromIndex % grid[0] : (grid[0] - 1) / 2;
-          const fromY = !fromCenter ? floor(fromIndex / grid[0]) : (grid[1] - 1) / 2;
-          const toX = index % grid[0];
-          const toY = floor(index / grid[0]);
-          const distanceX = fromX - toX;
-          const distanceY = fromY - toY;
-          let value = sqrt(distanceX * distanceX + distanceY * distanceY);
-          if (axis === 'x') value = -distanceX;
-          if (axis === 'y') value = -distanceY;
-          values.push(value);
+          for (let index = 0; index < total; index++) {
+            values.push(abs(fromIndex - index));
+          }
+        }
+      } else {
+        for (let index = 0; index < total; index++) {
+          if (!grid) {
+            values.push(abs(fromIndex - index));
+          } else {
+            let fromX, fromY;
+            if (fromArr) {
+              fromX = from[0] * (grid[0] - 1);
+              fromY = from[1] * (grid[1] - 1);
+            } else if (fromCenter) {
+              fromX = (grid[0] - 1) / 2;
+              fromY = (grid[1] - 1) / 2;
+            } else {
+              fromX = fromIndex % grid[0];
+              fromY = floor(fromIndex / grid[0]);
+            }
+            const toX = index % grid[0];
+            const toY = floor(index / grid[0]);
+            const distanceX = fromX - toX;
+            const distanceY = fromY - toY;
+            let value = sqrt(distanceX * distanceX + distanceY * distanceY);
+            if (axis === 'x') value = -distanceX;
+            if (axis === 'y') value = -distanceY;
+            values.push(value);
+          }
         }
-        maxValue = max(...values);
       }
+      maxValue = max(...values);
       if (staggerEase) values = values.map(val => staggerEase(val / maxValue) * maxValue);
       if (reversed) values = values.map(val => axis ? (val < 0) ? val * -1 : -val : abs(maxValue - val));
       if (fromRandom) values = shuffle(values);
     }
     const spacing = isRange ? (val2 - val1) / maxValue : val1;
-    const offset = tl ? parseTimelinePosition(tl, isUnd(params.start) ? tl.iterationDuration : start) : /** @type {Number} */(start);
+    if (isUnd(cachedOffset)) {
+      cachedOffset = tl ? parseTimelinePosition(tl, isUnd(params.start) ? tl.iterationDuration : start) : /** @type {Number} */(start);
+    }
     /** @type {String|Number} */
-    let output = offset + ((spacing * round$1(values[staggerIndex], 2)) || 0);
-    if (params.modifier) output = params.modifier(output);
+    let output = cachedOffset + ((spacing * round$1(values[staggerIndex], 2)) || 0);
+    if (params.modifier) output = params.modifier(/** @type {Number} */(output));
     if (unitMatch) output = `${output}${unitMatch[2]}`;
     return output;
   }
@@ -9682,11 +10011,13 @@ const stagger = (val, params = {}) => {
 var index$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   $: registerTargets,
+  addChild: addChild,
   clamp: clamp,
   cleanInlineStyles: cleanInlineStyles,
   createSeededRandom: createSeededRandom,
   damp: damp,
   degToRad: degToRad,
+  forEachChildren: forEachChildren,
   get: get,
   keepTime: keepTime,
   lerp: lerp,
@@ -9697,6 +10028,7 @@ var index$2 = /*#__PURE__*/Object.freeze({
   random: random,
   randomPick: randomPick,
   remove: remove,
+  removeChild: removeChild,
   round: round,
   roundPad: roundPad,
   set: set,
@@ -9896,7 +10228,7 @@ const createDrawable = (selector, start = 0, end = 0) => {
  * @param  {Number} [precision]
  * @return {FunctionValue}
  */
-const morphTo = (path2, precision = .33) => ($path1) => {
+const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
   const tagName1 = ($path1.tagName || '').toLowerCase();
   if (!tagName1.match(/^(path|polygon|polyline)$/)) {
     throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
@@ -9911,7 +10243,7 @@ const morphTo = (path2, precision = .33) => ($path1) => {
   }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
-  const previousPoints = $path1[morphPointsSymbol];
+  const previousPoints = prevTween ? prevTween._value : null;
   if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
 
   let v1 = '', v2 = '';
@@ -9933,8 +10265,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
     }
   }
 
-  $path1[morphPointsSymbol] = v2;
-
   return [v1, v2];
 };
 
@@ -10120,7 +10450,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 = {}) {
@@ -10192,11 +10522,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);
@@ -10402,7 +10732,7 @@ class TextSplitter {
 }
 
 /**
- * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+ * @param  {Element|NodeList|String|Array<Element>} target
  * @param  {TextSplitterParams} [parameters]
  * @return {TextSplitter}
  */
@@ -10420,11 +10750,263 @@ const split = (target, parameters) => {
   return new TextSplitter(target, parameters);
 };
 
+
+
+/**
+ * '-' 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$1((animDuration + revealDelay) / globals.timeScale, 0) * globals.timeScale;
+    const revealDelayRatio = revealDelay > 0 ? round$1(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$1(settleDuration / animDuration, 12);
+    // settleSpacing is the time gap between consecutive characters entering the active zone
+    const settleSpacing = round$1((1 - settleRatio) / animLength, 12);
+    const cursorZone = cursorLen * settleSpacing;
+    // stepRatio controls how often scramble characters refresh (based on settleRate)
+    const stepRatio = round$1(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;
+      }
+    }
+  }
+};
+
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   TextSplitter: TextSplitter,
+  scrambleText: scrambleText,
   split: split,
   splitText: splitText
 });
 
-export { registerTargets as $, Animatable, AutoLayout, Draggable, JSAnimation, Scope, ScrollObserver, Spring, TextSplitter, Timeline, Timer, WAAPIAnimation, animate, clamp, cleanInlineStyles, createAnimatable, createDraggable, createDrawable, createLayout, createMotionPath, createScope, createSeededRandom, createSpring, createTimeline, createTimer, cubicBezier, damp, degToRad, eases, index$3 as easings, engine, get, irregular, keepTime, lerp, linear, mapRange, morphTo, onScroll, padEnd, padStart, radToDeg, random, randomPick, remove, round, roundPad, scrollContainers, set, shuffle, snap, split, splitText, spring, stagger, steps, index$1 as svg, sync, index as text, index$2 as utils, waapi, wrap };
+export { registerTargets as $, Animatable, AutoLayout, Draggable, JSAnimation, Scope, ScrollObserver, Spring, TextSplitter, Timeline, Timer, WAAPIAnimation, addChild, animate, clamp, cleanInlineStyles, createAnimatable, createDraggable, createDrawable, createLayout, createMotionPath, createScope, createSeededRandom, createSpring, createTimeline, createTimer, cubicBezier, damp, degToRad, eases, index$3 as easings, engine, forEachChildren, get, globals, irregular, keepTime, lerp, linear, mapRange, morphTo, onScroll, padEnd, padStart, radToDeg, random, randomPick, remove, removeChild, round, roundPad, scrambleText, scrollContainers, set, shuffle, snap, split, splitText, spring, stagger, steps, index$1 as svg, sync, index as text, index$2 as utils, waapi, wrap };