animejs 4.2.2 → 4.3.0-beta.1

package/dist/bundles/anime.umd.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - UMD bundle
- * @version v4.2.2
+ * @version v4.3.0-beta.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -37,7 +37,7 @@
 /** @typedef {JSAnimation|Timeline} Renderable */
 /** @typedef {Timer|Renderable} Tickable */
 /** @typedef {Timer&JSAnimation&Timeline} CallbackArgument */
-/** @typedef {Animatable|Tickable|WAAPIAnimation|Draggable|ScrollObserver|TextSplitter|Scope} Revertible */
+/** @typedef {Animatable|Tickable|WAAPIAnimation|Draggable|ScrollObserver|TextSplitter|Scope|AutoLayout} Revertible */
 
 // Stagger types
 
@@ -361,6 +361,7 @@
  * @typedef {Object} TimelineOptions
  * @property {DefaultsParams} [defaults]
  * @property {EasingParam} [playbackEase]
+ * @property {Boolean} [composition]
  */
 
 /**
@@ -644,8 +645,10 @@
   // TODO: Do we need to check if we're running inside a worker ?
   const isBrowser = typeof window !== 'undefined';
 
-  /** @type {Window & {AnimeJS: Array}|null} */
-  const win = isBrowser ? /** @type {Window & {AnimeJS: Array}} */(/** @type {unknown} */(window)) : null;
+  /** @typedef {Window & {AnimeJS: Array} & {AnimeJSDevTools: any}|null} AnimeJSWindow
+
+  /** @type {AnimeJSWindow} */
+  const win = isBrowser ? /** @type {AnimeJSWindow} */(/** @type {unknown} */(window)) : null;
 
   /** @type {Document|null} */
   const doc = isBrowser ? document : null;
@@ -697,7 +700,7 @@
   const minValue = 1e-11;
   const maxValue = 1e12;
   const K = 1e3;
-  const maxFps = 120;
+  const maxFps = 240;
 
   // Strings
 
@@ -802,7 +805,9 @@
     tickThreshold: 200,
   };
 
-  const globalVersions = { version: '4.2.2', engine: null };
+  const devTools = isBrowser && win.AnimeJSDevTools;
+
+  const globalVersions = { version: '4.3.0-beta.1', engine: null };
 
   if (isBrowser) {
     if (!win.AnimeJS) win.AnimeJS = [];
@@ -1832,7 +1837,7 @@
       /** @type {Number} */
       this._currentTime = initTime;
       /** @type {Number} */
-      this._elapsedTime = initTime;
+      this._lastTickTime = initTime;
       /** @type {Number} */
       this._startTime = initTime;
       /** @type {Number} */
@@ -1840,7 +1845,7 @@
       /** @type {Number} */
       this._scheduledTime = 0;
       /** @type {Number} */
-      this._frameDuration = round$1(K / maxFps, 0);
+      this._frameDuration = K / maxFps;
       /** @type {Number} */
       this._fps = maxFps;
       /** @type {Number} */
@@ -1861,7 +1866,8 @@
       const previousFrameDuration = this._frameDuration;
       const fr = +frameRate;
       const fps = fr < minValue ? minValue : fr;
-      const frameDuration = round$1(K / fps, 0);
+      const frameDuration = K / fps;
+      if (fps > defaults.frameRate) defaults.frameRate = fps;
       this._fps = fps;
       this._frameDuration = frameDuration;
       this._scheduledTime += frameDuration - previousFrameDuration;
@@ -1882,14 +1888,13 @@
      */
     requestTick(time) {
       const scheduledTime = this._scheduledTime;
-      const elapsedTime = this._elapsedTime;
-      this._elapsedTime += (time - elapsedTime);
-      // If the elapsed time is lower than the scheduled time
+      this._lastTickTime = time;
+      // If the current time is lower than the scheduled time
       // this means not enough time has passed to hit one frameDuration
       // so skip that frame
-      if (elapsedTime < scheduledTime) return tickModes.NONE;
+      if (time < scheduledTime) return tickModes.NONE;
       const frameDuration = this._frameDuration;
-      const frameDelta = elapsedTime - scheduledTime;
+      const frameDelta = time - scheduledTime;
       // Ensures that _scheduledTime progresses in steps of at least 1 frameDuration.
       // Skips ahead if the actual elapsed time is higher.
       this._scheduledTime += frameDelta < frameDuration ? frameDuration : frameDelta;
@@ -2026,7 +2031,7 @@
 
     wake() {
       if (this.useDefaultMainLoop && !this.reqId) {
-        // Imediatly request a tick to update engine._elapsedTime and get accurate offsetPosition calculation in timer.js
+        // Imediatly request a tick to update engine._lastTickTime and get accurate offsetPosition calculation in timer.js
         this.requestTick(now());
         this.reqId = engineTickMethod(tickEngine);
       }
@@ -2514,6 +2519,8 @@
 
       super(0);
 
+      ++timerId;
+
       const {
         id,
         delay,
@@ -2535,31 +2542,42 @@
 
       if (scope.current) scope.current.register(this);
 
-      const timerInitTime = parent ? 0 : engine._elapsedTime;
+      const timerInitTime = parent ? 0 : engine._lastTickTime;
       const timerDefaults = parent ? parent.defaults : globals.defaults;
       const timerDelay = /** @type {Number} */(isFnc(delay) || isUnd(delay) ? timerDefaults.delay : +delay);
       const timerDuration = isFnc(duration) || isUnd(duration) ? Infinity : +duration;
       const timerLoop = setValue(loop, timerDefaults.loop);
       const timerLoopDelay = setValue(loopDelay, timerDefaults.loopDelay);
-      const timerIterationCount = timerLoop === true ||
-                                  timerLoop === Infinity ||
-                                  /** @type {Number} */(timerLoop) < 0 ? Infinity :
-                                  /** @type {Number} */(timerLoop) + 1;
+      let timerIterationCount = timerLoop === true ||
+                                timerLoop === Infinity ||
+                                /** @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) {
         offsetPosition = parentPosition;
       } else {
-        // Make sure to tick the engine once if not currently running to get up to date engine._elapsedTime
+        // Make sure to tick the engine once if not currently running to get up to date engine._lastTickTime
         // to avoid big gaps with the following offsetPosition calculation
         if (!engine.reqId) engine.requestTick(now());
         // Make sure to scale the offset position with globals.timeScale to properly handle seconds unit
-        offsetPosition = (engine._elapsedTime - engine._startTime) * globals.timeScale;
+        offsetPosition = (engine._lastTickTime - engine._startTime) * globals.timeScale;
       }
 
       // Timer's parameters
-      this.id = !isUnd(id) ? id : ++timerId;
+      /** @type {String|Number} */
+      this.id = !isUnd(id) ? id : timerId;
       /** @type {Timeline} */
       this.parent = parent;
       // Total duration of the timer
@@ -2619,7 +2637,7 @@
 
       // Clock's parameters
       /** @type {Number} */
-      this._elapsedTime = timerInitTime;
+      this._lastTickTime = timerInitTime;
       /** @type {Number} */
       this._startTime = timerInitTime;
       /** @type {Number} */
@@ -2650,7 +2668,7 @@
     }
 
     get iterationCurrentTime() {
-      return round$1(this._iterationTime, globals.precision);
+      return clamp$1(round$1(this._iterationTime, globals.precision), 0, this.iterationDuration);
     }
 
     set iterationCurrentTime(time) {
@@ -2748,9 +2766,9 @@
     /** @return {this} */
     resetTime() {
       const timeScale = 1 / (this._speed * engine._speed);
-      // TODO: See if we can safely use engine._elapsedTime here
+      // TODO: See if we can safely use engine._lastTickTime here
       // if (!engine.reqId) engine.requestTick(now())
-      // this._startTime = engine._elapsedTime - (this._currentTime + this._delay) * timeScale;
+      // this._startTime = engine._lastTickTime - (this._currentTime + this._delay) * timeScale;
       this._startTime = now() - (this._currentTime + this._delay) * timeScale;
       return this;
     }
@@ -3264,6 +3282,7 @@
   const keyObjectTarget = { to: null };
 
   let tweenId = 0;
+  let JSAnimationId = 0;
   let keyframes;
   /** @type {TweenParamsOptions & TweenValues} */
   let key;
@@ -3378,6 +3397,8 @@
 
       super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
 
+      ++JSAnimationId;
+
       const parsedTargets = registerTargets(targets);
       const targetsLength = parsedTargets.length;
 
@@ -3387,6 +3408,7 @@
       const params = /** @type {AnimationParams} */(kfParams ? mergeObjects(generateKeyframes(/** @type {DurationKeyframes} */(kfParams), parameters), parameters) : parameters);
 
       const {
+        id,
         delay,
         duration,
         ease,
@@ -3397,11 +3419,12 @@
       } = params;
 
       const animDefaults = parent ? parent.defaults : globals.defaults;
-      const animaPlaybackEase = setValue(playbackEase, animDefaults.playbackEase);
-      const animEase = animaPlaybackEase ? parseEase(animaPlaybackEase) : null;
-      const hasSpring = !isUnd(ease) && !isUnd(/** @type {Spring} */(ease).ease);
-      const tEasing = hasSpring ? /** @type {Spring} */(ease).ease : setValue(ease, animEase ? 'linear' : animDefaults.ease);
-      const tDuration = hasSpring ? /** @type {Spring} */(ease).settlingDuration : setValue(duration, animDefaults.duration);
+      const animEase = setValue(ease, animDefaults.ease);
+      const animPlaybackEase = setValue(playbackEase, animDefaults.playbackEase);
+      const parsedAnimPlaybackEase = animPlaybackEase ? parseEase(animPlaybackEase) : null;
+      const hasSpring = !isUnd(/** @type {Spring} */(animEase).ease);
+      const tEasing = hasSpring ? /** @type {Spring} */(animEase).ease : setValue(ease, parsedAnimPlaybackEase ? 'linear' : animDefaults.ease);
+      const tDuration = hasSpring ? /** @type {Spring} */(animEase).settlingDuration : setValue(duration, animDefaults.duration);
       const tDelay = setValue(delay, animDefaults.delay);
       const tModifier = modifier || animDefaults.modifier;
       // If no composition is defined and the targets length is high (>= 1000) set the composition to 'none' (0) for faster tween creation
@@ -3409,7 +3432,7 @@
       // const absoluteOffsetTime = this._offset;
       const absoluteOffsetTime = this._offset + (parent ? parent._offset : 0);
       // This allows targeting the current animation in the spring onComplete callback
-      if (hasSpring) /** @type {Spring} */(ease).parent = this;
+      if (hasSpring) /** @type {Spring} */(animEase).parent = this;
 
       let iterationDuration = NaN;
       let iterationDelay = NaN;
@@ -3553,6 +3576,8 @@
               if (isFromToValue) {
                 decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[0], target, ti, tl) : tweenFromValue, fromTargetObject);
                 decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore) : tweenToValue, toTargetObject);
+                // Needed to force an inline style registration
+                const originalValue = getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore);
                 if (fromTargetObject.t === valueTypes.NUMBER) {
                   if (prevSibling) {
                     if (prevSibling._valueType === valueTypes.UNIT) {
@@ -3561,7 +3586,7 @@
                     }
                   } else {
                     decomposeRawValue(
-                      getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore),
+                      originalValue,
                       decomposedOriginalValue
                     );
                     if (decomposedOriginalValue.t === valueTypes.UNIT) {
@@ -3780,12 +3805,14 @@
       }
       /** @type {TargetsArray} */
       this.targets = parsedTargets;
+      /** @type {String|Number} */
+      this.id = !isUnd(id) ? id : JSAnimationId;
       /** @type {Number} */
       this.duration = iterationDuration === minValue ? minValue : clampInfinity(((iterationDuration + this._loopDelay) * this.iterationCount) - this._loopDelay) || minValue;
       /** @type {Callback<this>} */
       this.onRender = onRender || animDefaults.onRender;
       /** @type {EasingFunction} */
-      this._ease = animEase;
+      this._ease = parsedAnimPlaybackEase;
       /** @type {Number} */
       this._delay = iterationDelay;
       // NOTE: I'm keeping delay values separated from offsets in timelines because delays can override previous tweens and it could be confusing to debug a timeline with overridden tweens and no associated visible delays.
@@ -4123,11 +4150,11 @@
     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;
-    tick(tl, adjustedPosition, 1, 1, tickModes.AUTO);
+    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 Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
-    tlChild.init(true);
+    if (tl.composition) tlChild.init(true);
     // TODO: Might be better to insert at a position relative to startTime?
     addChild(tl, tlChild);
     forEachChildren(tl, (/** @type {Renderable} */child) => {
@@ -4139,6 +4166,8 @@
     return tl;
   }
 
+  let TLId = 0;
+
   class Timeline extends Timer {
 
     /**
@@ -4146,6 +4175,9 @@
      */
     constructor(parameters = {}) {
       super(/** @type {TimerParams&TimelineParams} */(parameters), null, 0);
+      ++TLId;
+      /** @type {String|Number} */
+      this.id = !isUnd(parameters.id) ? parameters.id : TLId;
       /** @type {Number} */
       this.duration = 0; // TL duration starts at 0 and grows when adding children
       /** @type {Record<String, Number>} */
@@ -4154,6 +4186,8 @@
       const globalDefaults = globals.defaults;
       /** @type {DefaultsParams} */
       this.defaults = defaultsParams ? mergeObjects(defaultsParams, globalDefaults) : globalDefaults;
+      /** @type {Boolean} */
+      this.composition = setValue(parameters.composition, true);
       /** @type {Callback<this>} */
       this.onRender = parameters.onRender || globalDefaults.onRender;
       const tlPlaybackEase = setValue(parameters.playbackEase, globalDefaults.playbackEase);
@@ -4231,7 +4265,8 @@
             parseTimelinePosition(this,a2),
           );
         }
-        return this.init(true);
+        if (this.composition) this.init(true);
+        return this;
       }
     }
 
@@ -4258,7 +4293,7 @@
       if (isUnd(synced) || synced && isUnd(synced.pause)) return this;
       synced.pause();
       const duration = +(/** @type {globalThis.Animation} */(synced).effect ? /** @type {globalThis.Animation} */(synced).effect.getTiming().duration : /** @type {Tickable} */(synced).duration);
-      return this.add(synced, { currentTime: [0, duration], duration, ease: 'linear' }, position);
+      return this.add(synced, { currentTime: [0, duration], duration, delay: 0, ease: 'linear', playbackEase: 'linear' }, position);
     }
 
     /**
@@ -4281,7 +4316,7 @@
      */
     call(callback, position) {
       if (isUnd(callback) || callback && !isFnc(callback)) return this;
-      return this.add({ duration: 0, onComplete: () => callback(this) }, position);
+      return this.add({ duration: 0, delay: 0, onComplete: () => callback(this) }, position);
     }
 
     /**
@@ -7287,1521 +7322,2889 @@
     steps: steps
   });
 
-  // Chain-able utilities
+  
 
-  const numberUtils = numberImports; // Needed to keep the import when bundling
+  
 
-  const chainables = {};
+  
 
   /**
-   * @callback UtilityFunction
-   * @param {...*} args
-   * @return {Number|String}
-   *
-   * @param {UtilityFunction} fn
-   * @param {Number} [last=0]
-   * @return {function(...(Number|String)): function(Number|String): (Number|String)}
+   * Converts an easing function into a valid CSS linear() timing function string
+   * @param {EasingFunction} fn
+   * @param {number} [samples=100]
+   * @returns {string} CSS linear() timing function
    */
-  const curry = (fn, last = 0) => (...args) => last ? v => fn(...args, v) : v => fn(v, ...args);
+  const easingToLinear = (fn, samples = 100) => {
+    const points = [];
+    for (let i = 0; i <= samples; i++) points.push(round$1(fn(i / samples), 4));
+    return `linear(${points.join(', ')})`;
+  };
+
+  const WAAPIEasesLookups = {};
 
   /**
-   * @param {Function} fn
-   * @return {function(...(Number|String))}
+   * @param  {EasingParam} ease
+   * @return {String}
    */
-  const chain = fn => {
-     return (...args) => {
-      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));
-        })
-      });
+  const parseWAAPIEasing = (ease) => {
+    let parsedEase = WAAPIEasesLookups[ease];
+    if (parsedEase) return parsedEase;
+    parsedEase = 'linear';
+    if (isStr(ease)) {
+      if (
+        stringStartsWith(ease, 'linear') ||
+        stringStartsWith(ease, 'cubic-') ||
+        stringStartsWith(ease, 'steps') ||
+        stringStartsWith(ease, 'ease')
+      ) {
+        parsedEase = ease;
+      } else if (stringStartsWith(ease, 'cubicB')) {
+        parsedEase = toLowerCase(ease);
+      } else {
+        const parsed = parseEaseString(ease);
+        if (isFnc(parsed)) parsedEase = parsed === none ? 'linear' : easingToLinear(parsed);
+      }
+      // Only cache string based easing name, otherwise function arguments get lost
+      WAAPIEasesLookups[ease] = parsedEase;
+    } else if (isFnc(ease)) {
+      const easing = easingToLinear(ease);
+      if (easing) parsedEase = easing;
+    } else if (/** @type {Spring} */(ease).ease) {
+      parsedEase = easingToLinear(/** @type {Spring} */(ease).ease);
     }
+    return parsedEase;
   };
 
-  /**
-   * @param {UtilityFunction} fn
-   * @param {String} name
-   * @param {Number} [right]
-   * @return {function(...(Number|String)): UtilityFunction}
-   */
-  const makeChainable = (name, fn, right = 0) => {
-    const chained = (...args) => (args.length < fn.length ? chain(curry(fn, right)) : fn)(...args);
-    if (!chainables[name]) chainables[name] = chained;
-    return chained;
-  };
+  const transformsShorthands = ['x', 'y', 'z'];
+  const commonDefaultPXProperties = [
+    'perspective',
+    'width',
+    'height',
+    'margin',
+    'padding',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'borderWidth',
+    'fontSize',
+    'borderRadius',
+    ...transformsShorthands
+  ];
 
-  /**
-   * @typedef {Object} ChainablesMap
-   * @property {ChainedClamp} clamp
-   * @property {ChainedRound} round
-   * @property {ChainedSnap} snap
-   * @property {ChainedWrap} wrap
-   * @property {ChainedLerp} lerp
-   * @property {ChainedDamp} damp
-   * @property {ChainedMapRange} mapRange
-   * @property {ChainedRoundPad} roundPad
-   * @property {ChainedPadStart} padStart
-   * @property {ChainedPadEnd} padEnd
-   * @property {ChainedDegToRad} degToRad
-   * @property {ChainedRadToDeg} radToDeg
-   */
+  const validIndividualTransforms = /*#__PURE__*/ (() => [...transformsShorthands, ...validTransforms.filter(t => ['X', 'Y', 'Z'].some(axis => t.endsWith(axis)))])();
 
-  /**
-   * @callback ChainedUtilsResult
-   * @param {Number} value - The value to process through the chained operations
-   * @return {Number} The processed result
-   */
+  let transformsPropertiesRegistered = null;
 
   /**
-   * @typedef {ChainablesMap & ChainedUtilsResult} ChainableUtil
+   * @param  {String} propName
+   * @param  {WAAPIKeyframeValue} value
+   * @param  {DOMTarget} $el
+   * @param  {Number} i
+   * @param  {Number} targetsLength
+   * @return {String}
    */
-
-  // Chainable
+  const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
+    // 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);
+    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`;
+    return `${v}`;
+  };
 
   /**
-   * @callback ChainedRoundPad
-   * @param {Number} decimalLength - Number of decimal places
-   * @return {ChainableUtil}
+   * @param  {DOMTarget} $el
+   * @param  {String} propName
+   * @param  {WAAPIKeyframeValue} from
+   * @param  {WAAPIKeyframeValue} to
+   * @param  {Number} i
+   * @param  {Number} targetsLength
+   * @return {WAAPITweenValue}
    */
-  const roundPad = /** @type {typeof numberUtils.roundPad & ChainedRoundPad} */(makeChainable('roundPad', numberUtils.roundPad));
+  const parseIndividualTweenValue = ($el, propName, from, to, i, targetsLength) => {
+    /** @type {WAAPITweenValue} */
+    let tweenValue = '0';
+    const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, targetsLength) : getComputedStyle($el)[propName];
+    if (!isUnd(from)) {
+      const computedFrom = normalizeTweenValue(propName, from, $el, i, targetsLength);
+      tweenValue = [computedFrom, computedTo];
+    } else {
+      tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, targetsLength)) : computedTo;
+    }
+    return tweenValue;
+  };
 
+  class WAAPIAnimation {
   /**
-   * @callback ChainedPadStart
-   * @param {Number} totalLength - Target length
-   * @param {String} padString - String to pad with
-   * @return {ChainableUtil}
+   * @param {DOMTargetsParam} targets
+   * @param {WAAPIAnimationParams} params
    */
-  const padStart = /** @type {typeof numberUtils.padStart & ChainedPadStart} */(makeChainable('padStart', numberUtils.padStart));
+    constructor(targets, params) {
 
-  /**
-   * @callback ChainedPadEnd
-   * @param {Number} totalLength - Target length
-   * @param {String} padString - String to pad with
-   * @return {ChainableUtil}
-   */
-  const padEnd = /** @type {typeof numberUtils.padEnd & ChainedPadEnd} */(makeChainable('padEnd', numberUtils.padEnd));
+      if (scope.current) scope.current.register(this);
 
-  /**
-   * @callback ChainedWrap
-   * @param {Number} min - Minimum boundary
-   * @param {Number} max - Maximum boundary
-   * @return {ChainableUtil}
-   */
-  const wrap = /** @type {typeof numberUtils.wrap & ChainedWrap} */(makeChainable('wrap', numberUtils.wrap));
+      // Skip the registration and fallback to no animation in case CSS.registerProperty is not supported
+      if (isNil(transformsPropertiesRegistered)) {
+        if (isBrowser && (isUnd(CSS) || !Object.hasOwnProperty.call(CSS, 'registerProperty'))) {
+          transformsPropertiesRegistered = false;
+        } else {
+          validTransforms.forEach(t => {
+            const isSkew = stringStartsWith(t, 'skew');
+            const isScale = stringStartsWith(t, 'scale');
+            const isRotate = stringStartsWith(t, 'rotate');
+            const isTranslate = stringStartsWith(t, 'translate');
+            const isAngle = isRotate || isSkew;
+            const syntax = isAngle ? '<angle>' : isScale ? "<number>" : isTranslate ? "<length-percentage>" : "*";
+            try {
+              CSS.registerProperty({
+                name: '--' + t,
+                syntax,
+                inherits: false,
+                initialValue: isTranslate ? '0px' : isAngle ? '0deg' : isScale ? '1' : '0',
+              });
+            } catch {}        });
+          transformsPropertiesRegistered = true;
+        }
+      }
 
-  /**
-   * @callback ChainedMapRange
-   * @param {Number} inLow - Input range minimum
-   * @param {Number} inHigh - Input range maximum
-   * @param {Number} outLow - Output range minimum
-   * @param {Number} outHigh - Output range maximum
-   * @return {ChainableUtil}
-   */
-  const mapRange = /** @type {typeof numberUtils.mapRange & ChainedMapRange} */(makeChainable('mapRange', numberUtils.mapRange));
+      const parsedTargets = registerTargets(targets);
+      const targetsLength = parsedTargets.length;
 
-  /**
-   * @callback ChainedDegToRad
-   * @return {ChainableUtil}
-   */
-  const degToRad = /** @type {typeof numberUtils.degToRad & ChainedDegToRad} */(makeChainable('degToRad', numberUtils.degToRad));
+      if (!targetsLength) {
+        console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
+      }
 
-  /**
-   * @callback ChainedRadToDeg
-   * @return {ChainableUtil}
-   */
-  const radToDeg = /** @type {typeof numberUtils.radToDeg & ChainedRadToDeg} */(makeChainable('radToDeg', numberUtils.radToDeg));
+      const ease = setValue(params.ease, parseWAAPIEasing(globals.defaults.ease));
+      const spring = /** @type {Spring} */(ease).ease && ease;
+      const autoplay = setValue(params.autoplay, globals.defaults.autoplay);
+      const scroll = autoplay && /** @type {ScrollObserver} */(autoplay).link ? autoplay : false;
+      const alternate = params.alternate && /** @type {Boolean} */(params.alternate) === true;
+      const reversed = params.reversed && /** @type {Boolean} */(params.reversed) === true;
+      const loop = setValue(params.loop, globals.defaults.loop);
+      const iterations = /** @type {Number} */((loop === true || loop === Infinity) ? Infinity : isNum(loop) ? loop + 1 : 1);
+      /** @type {PlaybackDirection} */
+      const direction = alternate ? reversed ? 'alternate-reverse' : 'alternate' : reversed ? 'reverse' : 'normal';
+      /** @type {FillMode} */
+      const fill = 'both'; // We use 'both' here because the animation can be reversed during playback
+      /** @type {String} */
+      const easing = parseWAAPIEasing(ease);
+      const timeScale = (globals.timeScale === 1 ? 1 : K);
 
-  /**
-   * @callback ChainedSnap
-   * @param {Number|Array<Number>} increment - Step size or array of snap points
-   * @return {ChainableUtil}
-   */
-  const snap = /** @type {typeof numberUtils.snap & ChainedSnap} */(makeChainable('snap', numberUtils.snap));
+      /** @type {DOMTargetsArray}] */
+      this.targets = parsedTargets;
+      /** @type {Array<globalThis.Animation>}] */
+      this.animations = [];
+      /** @type {globalThis.Animation}] */
+      this.controlAnimation = null;
+      /** @type {Callback<this>} */
+      this.onComplete = params.onComplete || /** @type {Callback<WAAPIAnimation>} */(/** @type {unknown} */(globals.defaults.onComplete));
+      /** @type {Number} */
+      this.duration = 0;
+      /** @type {Boolean} */
+      this.muteCallbacks = false;
+      /** @type {Boolean} */
+      this.completed = false;
+      /** @type {Boolean} */
+      this.paused = !autoplay || scroll !== false;
+      /** @type {Boolean} */
+      this.reversed = reversed;
+      /** @type {Boolean} */
+      this.persist = setValue(params.persist, globals.defaults.persist);
+      /** @type {Boolean|ScrollObserver} */
+      this.autoplay = autoplay;
+      /** @type {Number} */
+      this._speed = setValue(params.playbackRate, globals.defaults.playbackRate);
+      /** @type {Function} */
+      this._resolve = noop; // Used by .then()
+      /** @type {Number} */
+      this._completed = 0;
+      /** @type {Array.<Object>} */
+      this._inlineStyles = [];
 
-  /**
-   * @callback ChainedClamp
-   * @param {Number} min - Minimum boundary
-   * @param {Number} max - Maximum boundary
-   * @return {ChainableUtil}
-   */
-  const clamp = /** @type {typeof numberUtils.clamp & ChainedClamp} */(makeChainable('clamp', numberUtils.clamp));
+      parsedTargets.forEach(($el, i) => {
 
-  /**
-   * @callback ChainedRound
-   * @param {Number} decimalLength - Number of decimal places
-   * @return {ChainableUtil}
-   */
-  const round = /** @type {typeof numberUtils.round & ChainedRound} */(makeChainable('round', numberUtils.round));
+        const cachedTransforms = $el[transformsSymbol];
+        const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
+        const elStyle = $el.style;
+        const inlineStyles = this._inlineStyles[i] = {};
 
-  /**
-   * @callback ChainedLerp
-   * @param {Number} start - Starting value
-   * @param {Number} end - Ending value
-   * @return {ChainableUtil}
-   */
-  const lerp = /** @type {typeof numberUtils.lerp & ChainedLerp} */(makeChainable('lerp', numberUtils.lerp, 1));
+        /** @type {Number} */
+        const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+        /** @type {Number} */
+        const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, targetsLength) * timeScale;
+        /** @type {CompositeOperation} */
+        const composite = /** @type {CompositeOperation} */(setValue(params.composition, 'replace'));
 
-  /**
-   * @callback ChainedDamp
-   * @param {Number} start - Starting value
-   * @param {Number} end - Target value
-   * @param {Number} deltaTime - Delta time in ms
-   * @return {ChainableUtil}
-   */
-  const damp = /** @type {typeof numberUtils.damp & ChainedDamp} */(makeChainable('damp', numberUtils.damp, 1));
+        for (let name in params) {
+          if (!isKey(name)) continue;
+          /** @type {PropertyIndexedKeyframes} */
+          const keyframes = {};
+          /** @type {KeyframeAnimationOptions} */
+          const tweenParams = { iterations, direction, fill, easing, duration, delay, composite };
+          const propertyValue = params[name];
+          const individualTransformProperty = hasIndividualTransforms ? validTransforms.includes(name) ? name : shortTransforms.get(name) : false;
 
-  /**
-   * Generate a random number between optional min and max (inclusive) and decimal precision
-   *
-   * @callback RandomNumberGenerator
-   * @param    {Number} [min=0] - The minimum value (inclusive)
-   * @param    {Number} [max=1] - The maximum value (inclusive)
-   * @param    {Number} [decimalLength=0] - Number of decimal places to round to
-   * @return   {Number} A random number between min and max
-   */
+          const styleName = individualTransformProperty ? 'transform' : name;
+          if (!inlineStyles[styleName]) {
+            inlineStyles[styleName] = elStyle[styleName];
+          }
 
-  /**
-   * Generates a random number between min and max (inclusive) with optional decimal precision
-   *
-   * @type {RandomNumberGenerator}
-   */
-  const random = (min = 0, max = 1, decimalLength = 0) => {
-    const m = 10 ** decimalLength;
-    return Math.floor((Math.random() * (max - min + (1 / m)) + min) * m) / m;
-  };
+          let parsedPropertyValue;
+          if (isObj(propertyValue)) {
+            const tweenOptions = /** @type {WAAPITweenOptions} */(propertyValue);
+            const tweenOptionsEase = setValue(tweenOptions.ease, ease);
+            const tweenOptionsSpring = /** @type {Spring} */(tweenOptionsEase).ease && tweenOptionsEase;
+            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;
+            /** @type {Number} */
+            tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, targetsLength) * 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);
+            if (individualTransformProperty) {
+              keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
+              cachedTransforms[individualTransformProperty] = parsedPropertyValue;
+            } else {
+              keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+            }
+            addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
+            if (!isUnd(from)) {
+              if (!individualTransformProperty) {
+                elStyle[name] = keyframes[name][0];
+              } else {
+                const key = `--${individualTransformProperty}`;
+                elStyle.setProperty(key, keyframes[key][0]);
+              }
+            }
+          } else {
+            parsedPropertyValue = isArr(propertyValue) ?
+                                  propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, targetsLength)) :
+                                  normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, targetsLength);
+            if (individualTransformProperty) {
+              keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
+              cachedTransforms[individualTransformProperty] = parsedPropertyValue;
+            } else {
+              keyframes[name] = parsedPropertyValue;
+            }
+            addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
+          }
+        }
+        if (hasIndividualTransforms) {
+          let transforms = emptyString;
+          for (let t in cachedTransforms) {
+            transforms += `${transformsFragmentStrings[t]}var(--${t})) `;
+          }
+          elStyle.transform = transforms;
+        }
+      });
 
-  let _seed = 0;
+      if (scroll) {
+        /** @type {ScrollObserver} */(this.autoplay).link(this);
+      }
+    }
 
-  /**
-   * Creates a seeded pseudorandom number generator function
-   *
-   * @param  {Number} [seed] - The seed value for the random number generator
-   * @param  {Number} [seededMin=0] - The minimum default value (inclusive) of the returned function
-   * @param  {Number} [seededMax=1] - The maximum default value (inclusive) of the returned function
-   * @param  {Number} [seededDecimalLength=0] - Default number of decimal places to round to of the returned function
-   * @return {RandomNumberGenerator} A function to generate a random number between optional min and max (inclusive) and decimal precision
-   */
-  const createSeededRandom = (seed, seededMin = 0, seededMax = 1, seededDecimalLength = 0) => {
-    let t = seed === undefined ? _seed++ : seed;
-    return (min = seededMin, max = seededMax, decimalLength = seededDecimalLength) => {
-      t += 0x6D2B79F5;
-      t = Math.imul(t ^ t >>> 15, t | 1);
-      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-      const m = 10 ** decimalLength;
-      return Math.floor(((((t ^ t >>> 14) >>> 0) / 4294967296) * (max - min + (1 / m)) + min) * m) / m;
+    /**
+     * @callback forEachCallback
+     * @param {globalThis.Animation} animation
+     */
+
+    /**
+     * @param  {forEachCallback|String} callback
+     * @return {this}
+     */
+    forEach(callback) {
+      try {
+        const cb = isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
+        this.animations.forEach(cb);
+      } catch {}    return this;
     }
-  };
 
-  /**
-   * Picks a random element from an array or a string
-   *
-   * @template T
-   * @param    {String|Array<T>} items - The array or string to pick from
-   * @return   {String|T} A random element from the array or character from the string
-   */
-  const randomPick = items => items[random(0, items.length - 1)];
+    get speed() {
+      return this._speed;
+    }
 
-  /**
-   * Shuffles an array in-place using the Fisher-Yates algorithm
-   * Adapted from https://bost.ocks.org/mike/shuffle/
-   *
-   * @param  {Array} items - The array to shuffle (will be modified in-place)
-   * @return {Array} The same array reference, now shuffled
-   */
-  const shuffle = items => {
-    let m = items.length, t, i;
-    while (m) { i = random(0, --m); t = items[m]; items[m] = items[i]; items[i] = t; }
-    return items;
-  };
+    set speed(speed) {
+      this._speed = +speed;
+      this.forEach(anim => anim.playbackRate = speed);
+    }
 
-  
+    get currentTime() {
+      const controlAnimation = this.controlAnimation;
+      const timeScale = globals.timeScale;
+      return this.completed ? this.duration : controlAnimation ? +controlAnimation.currentTime * (timeScale === 1 ? 1 : timeScale) : 0;
+    }
 
-  
+    set currentTime(time) {
+      const t = time * (globals.timeScale === 1 ? 1 : K);
+      this.forEach(anim => {
+        // Make sure the animation playState is not 'paused' in order to properly trigger an onfinish callback.
+        // The "paused" play state supersedes the "finished" play state; if the animation is both paused and finished, the "paused" state is the one that will be reported.
+        // https://developer.mozilla.org/en-US/docs/Web/API/Animation/finish_event
+        // This is not needed for persisting animations since they never finish.
+        if (!this.persist && t >= this.duration) anim.play();
+        anim.currentTime = t;
+      });
+    }
 
-  /**
-   * @overload
-   * @param {Number} val
-   * @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
-   * @return {StaggerFunction<Number|String>}
-   */
-  const stagger = (val, params = {}) => {
-    let values = [];
-    let maxValue = 0;
-    const from = params.from;
-    const reversed = params.reversed;
-    const ease = params.ease;
-    const hasEasing = !isUnd(ease);
-    const hasSpring = hasEasing && !isUnd(/** @type {Spring} */(ease).ease);
-    const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? parseEase(ease) : null;
-    const grid = params.grid;
-    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 isRange = isArr(val);
-    const useProp = params.use;
-    const val1 = isRange ? parseNumber(val[0]) : parseNumber(val);
-    const val2 = isRange ? parseNumber(val[1]) : 0;
-    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) => {
-      const [ registeredTarget ] = registerTargets(target);
-      const total = isUnd(customTotal) ? t : 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));
+    get progress() {
+      return this.currentTime / this.duration;
+    }
+
+    set progress(progress) {
+      this.forEach(anim => anim.currentTime = progress * this.duration || 0);
+    }
+
+    resume() {
+      if (!this.paused) return this;
+      this.paused = false;
+      // TODO: Store the current time, and seek back to the last position
+      return this.forEach('play');
+    }
+
+    pause() {
+      if (this.paused) return this;
+      this.paused = true;
+      return this.forEach('pause');
+    }
+
+    alternate() {
+      this.reversed = !this.reversed;
+      this.forEach('reverse');
+      if (this.paused) this.forEach('pause');
+      return this;
+    }
+
+    play() {
+      if (this.reversed) this.alternate();
+      return this.resume();
+    }
+
+    reverse() {
+      if (!this.reversed) this.alternate();
+      return this.resume();
+    }
+
+   /**
+    * @param {Number} time
+    * @param {Boolean} muteCallbacks
+    */
+    seek(time, muteCallbacks = false) {
+      if (muteCallbacks) this.muteCallbacks = true;
+      if (time < this.duration) this.completed = false;
+      this.currentTime = time;
+      this.muteCallbacks = false;
+      if (this.paused) this.pause();
+      return this;
+    }
+
+    restart() {
+      this.completed = false;
+      return this.seek(0, true).resume();
+    }
+
+    commitStyles() {
+      return this.forEach('commitStyles');
+    }
+
+    complete() {
+      return this.seek(this.duration);
+    }
+
+    cancel() {
+      this.muteCallbacks = true; // This prevents triggering the onComplete callback and resolving the Promise
+      this.commitStyles().forEach('cancel');
+      this.animations.length = 0; // Needed to release all animations from memory
+      requestAnimationFrame(() => {
+        this.targets.forEach(($el) => { // Needed to avoid unecessary inline transorms
+          if ($el.style.transform === 'none') $el.style.removeProperty('transform');
+        });
+      });
+      return this;
+    }
+
+    revert() {
+      // NOTE: We need a better way to revert the transforms, since right now the entire transform property value is reverted,
+      // This means if you have multiple animations animating different transforms on the same target,
+      // reverting one of them will also override the transform property of the other animations.
+      // A better approach would be to store the original custom property values if they exist instead of the entire transform value,
+      // and update the CSS variables with the orignal value
+      this.cancel().targets.forEach(($el, i) => {
+        const targetStyle = $el.style;
+        const targetInlineStyles = this._inlineStyles[i];
+        for (let name in targetInlineStyles) {
+          const originalInlinedValue = targetInlineStyles[name];
+          if (isUnd(originalInlinedValue) || originalInlinedValue === emptyString) {
+            targetStyle.removeProperty(toLowerCase(name));
           } 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);
+            $el.style[name] = originalInlinedValue;
           }
-          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);
-      /** @type {String|Number} */
-      let output = offset + ((spacing * round$1(values[staggerIndex], 2)) || 0);
-      if (params.modifier) output = params.modifier(output);
-      if (unitMatch) output = `${output}${unitMatch[2]}`;
-      return output;
+        // Remove style attribute if empty
+        if ($el.getAttribute('style') === emptyString) $el.removeAttribute('style');
+      });
+      return this;
     }
-  };
 
-  var index$2 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    $: registerTargets,
-    clamp: clamp,
-    cleanInlineStyles: cleanInlineStyles,
-    createSeededRandom: createSeededRandom,
-    damp: damp,
-    degToRad: degToRad,
-    get: get,
-    keepTime: keepTime,
-    lerp: lerp,
-    mapRange: mapRange,
-    padEnd: padEnd,
-    padStart: padStart,
-    radToDeg: radToDeg,
-    random: random,
-    randomPick: randomPick,
-    remove: remove,
-    round: round,
-    roundPad: roundPad,
-    set: set,
-    shuffle: shuffle,
-    snap: snap,
-    stagger: stagger,
-    sync: sync,
-    wrap: wrap
-  });
+    /**
+     * @typedef {this & {then: null}} ResolvedWAAPIAnimation
+     */
 
-  
+    /**
+     * @param  {Callback<ResolvedWAAPIAnimation>} [callback]
+     * @return Promise<this>
+     */
+    then(callback = noop) {
+      const then = this.then;
+      const onResolve = () => {
+        this.then = null;
+        callback(/** @type {ResolvedWAAPIAnimation} */(this));
+        this.then = then;
+        this._resolve = noop;
+      };
+      return new Promise(r => {
+        this._resolve = () => r(onResolve());
+        if (this.completed) this._resolve();
+        return this;
+      });
+    }
+  }
 
+  const waapi = {
   /**
-   * @param  {TargetsParam} path
-   * @return {SVGGeometryElement|void}
+   * @param {DOMTargetsParam} targets
+   * @param {WAAPIAnimationParams} params
+   * @return {WAAPIAnimation}
    */
-  const getPath = path => {
-    const parsedTargets = parseTargets(path);
-    const $parsedSvg = /** @type {SVGGeometryElement} */(parsedTargets[0]);
-    if (!$parsedSvg || !isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
-    return $parsedSvg;
+    animate: (targets, params) => new WAAPIAnimation(targets, params),
+    convertEase: easingToLinear
   };
 
   
 
-  // Motion path animation
+  
+
+  
+
+  
 
   /**
-   * @param {SVGGeometryElement} $path
-   * @param {Number} totalLength
-   * @param {Number} progress
-   * @param {Number} lookup
-   * @param {Boolean} shouldClamp
-   * @return {DOMPoint}
+   * @typedef {DOMTargetSelector|Array<DOMTargetSelector>} LayoutChildrenParam
    */
-  const getPathPoint = ($path, totalLength, progress, lookup, shouldClamp) => {
-    const point = progress + lookup;
-    const pointOnPath = shouldClamp
-      ? Math.max(0, Math.min(point, totalLength)) // Clamp between 0 and totalLength
-      : (point % totalLength + totalLength) % totalLength; // Wrap around
-    return $path.getPointAtLength(pointOnPath);
-  };
 
   /**
-   * @param {SVGGeometryElement} $path
-   * @param {String} pathProperty
-   * @param {Number} [offset=0]
-   * @return {FunctionValue}
+   * @typedef {Record<String, Number|String>} LayoutStateParams
    */
-  const getPathProgess = ($path, pathProperty, offset = 0) => {
-    return $el => {
-      const totalLength = +($path.getTotalLength());
-      const inSvg = $el[isSvgSymbol];
-      const ctm = $path.getCTM();
-      const shouldClamp = offset === 0;
-      /** @type {TweenObjectValue} */
-      return {
-        from: 0,
-        to: totalLength,
-        /** @type {TweenModifier} */
-        modifier: progress => {
-          const offsetLength = offset * totalLength;
-          const newProgress = progress + offsetLength;
-          if (pathProperty === 'a') {
-            const p0 = getPathPoint($path, totalLength, newProgress, -1, shouldClamp);
-            const p1 = getPathPoint($path, totalLength, newProgress, 1, shouldClamp);
-            return atan2(p1.y - p0.y, p1.x - p0.x) * 180 / PI;
-          } else {
-            const p = getPathPoint($path, totalLength, newProgress, 0, shouldClamp);
-            return pathProperty === 'x' ?
-              inSvg || !ctm ? p.x : p.x * ctm.a + p.y * ctm.c + ctm.e :
-              inSvg || !ctm ? p.y : p.x * ctm.b + p.y * ctm.d + ctm.f
-          }
-        }
-      }
-    }
-  };
 
   /**
-   * @param {TargetsParam} path
-   * @param {Number} [offset=0]
+   * @typedef {Object} LayoutAnimationParams
+   * @property {Number|FunctionValue} [delay]
+   * @property {Number|FunctionValue} [duration]
+   * @property {EasingParam} [ease]
+   * @property {LayoutStateParams} [frozen]
+   * @property {LayoutStateParams} [added]
+   * @property {LayoutStateParams} [removed]
+   * @property {Callback<AutoLayout>} [onComplete]
    */
-  const createMotionPath = (path, offset = 0) => {
-    const $path = getPath(path);
-    if (!$path) return;
-    return {
-      translateX: getPathProgess($path, 'x', offset),
-      translateY: getPathProgess($path, 'y', offset),
-      rotate: getPathProgess($path, 'a', offset),
-    }
-  };
-
-  
 
   /**
-   * @param {SVGGeometryElement} [$el]
-   * @return {Number}
+   * @typedef {LayoutAnimationParams & {
+   *   children?: LayoutChildrenParam,
+   *   properties?: Array<String>,
+   * }} AutoLayoutParams
    */
-  const getScaleFactor = $el => {
-    let scaleFactor = 1;
-    if ($el && $el.getCTM) {
-      const ctm = $el.getCTM();
-      if (ctm) {
-        const scaleX = sqrt(ctm.a * ctm.a + ctm.b * ctm.b);
-        const scaleY = sqrt(ctm.c * ctm.c + ctm.d * ctm.d);
-        scaleFactor = (scaleX + scaleY) / 2;
-      }
-    }
-    return scaleFactor;
-  };
 
   /**
-   * Creates a proxy that wraps an SVGGeometryElement and adds drawing functionality.
-   * @param {SVGGeometryElement} $el - The SVG element to transform into a drawable
-   * @param {number} start - Starting position (0-1)
-   * @param {number} end - Ending position (0-1)
-   * @return {DrawableSVGGeometry} - Returns a proxy that preserves the original element's type with additional 'draw' attribute functionality
+   * @typedef {Record<String, Number|String> & {
+   *   transform: String,
+   *   x: Number,
+   *   y: Number,
+   *   left: Number,
+   *   top: Number,
+   *   clientLeft: Number,
+   *   clientTop: Number,
+   *   width: Number,
+   *   height: Number,
+   * }} LayoutNodeProperties
    */
-  const createDrawableProxy = ($el, start, end) => {
-    const pathLength = K;
-    const computedStyles = getComputedStyle($el);
-    const strokeLineCap = computedStyles.strokeLinecap;
-    // @ts-ignore
-    const $scalled = computedStyles.vectorEffect === 'non-scaling-stroke' ? $el : null;
-    let currentCap = strokeLineCap;
-
-    const proxy = new Proxy($el, {
-      get(target, property) {
-        const value = target[property];
-        if (property === proxyTargetSymbol) return target;
-        if (property === 'setAttribute') {
-          return (...args) => {
-            if (args[0] === 'draw') {
-              const value = args[1];
-              const values = value.split(' ');
-              const v1 = +values[0];
-              const v2 = +values[1];
-              // TOTO: Benchmark if performing two slices is more performant than one split
-              // const spaceIndex = value.indexOf(' ');
-              // const v1 = round(+value.slice(0, spaceIndex), precision);
-              // const v2 = round(+value.slice(spaceIndex + 1), precision);
-              const scaleFactor = getScaleFactor($scalled);
-              const os = v1 * -pathLength * scaleFactor;
-              const d1 = (v2 * pathLength * scaleFactor) + os;
-              const d2 = (pathLength * scaleFactor +
-                        ((v1 === 0 && v2 === 1) || (v1 === 1 && v2 === 0) ? 0 : 10 * scaleFactor) - d1);
-              if (strokeLineCap !== 'butt') {
-                const newCap = v1 === v2 ? 'butt' : strokeLineCap;
-                if (currentCap !== newCap) {
-                  target.style.strokeLinecap = `${newCap}`;
-                  currentCap = newCap;
-                }
-              }
-              target.setAttribute('stroke-dashoffset', `${os}`);
-              target.setAttribute('stroke-dasharray', `${d1} ${d2}`);
-            }
-            return Reflect.apply(value, target, args);
-          };
-        }
 
-        if (isFnc(value)) {
-          return (...args) => Reflect.apply(value, target, args);
-        } else {
-          return value;
-        }
-      }
-    });
+  /**
+   * @typedef {Object} LayoutNode
+   * @property {String} id
+   * @property {DOMTarget} $el
+   * @property {Number} index
+   * @property {Number} total
+   * @property {Number} delay
+   * @property {Number} duration
+   * @property {DOMTarget} $measure
+   * @property {LayoutSnapshot} state
+   * @property {AutoLayout} layout
+   * @property {LayoutNode|null} parentNode
+   * @property {Boolean} isTarget
+   * @property {Boolean} hasTransform
+   * @property {Boolean} isAnimated
+   * @property {Array<String>} inlineStyles
+   * @property {String|null} inlineTransforms
+   * @property {String|null} inlineTransition
+   * @property {Boolean} branchAdded
+   * @property {Boolean} branchRemoved
+   * @property {Boolean} branchNotRendered
+   * @property {Boolean} sizeChanged
+   * @property {Boolean} isInlined
+   * @property {Boolean} hasVisibilitySwap
+   * @property {Boolean} hasDisplayNone
+   * @property {Boolean} hasVisibilityHidden
+   * @property {String|null} measuredInlineTransform
+   * @property {String|null} measuredInlineTransition
+   * @property {String|null} measuredDisplay
+   * @property {String|null} measuredVisibility
+   * @property {String|null} measuredPosition
+   * @property {Boolean} measuredHasDisplayNone
+   * @property {Boolean} measuredHasVisibilityHidden
+   * @property {Boolean} measuredIsVisible
+   * @property {Boolean} measuredIsRemoved
+   * @property {Boolean} measuredIsInsideRoot
+   * @property {LayoutNodeProperties} properties
+   * @property {LayoutNode|null} _head
+   * @property {LayoutNode|null} _tail
+   * @property {LayoutNode|null} _prev
+   * @property {LayoutNode|null} _next
+   */
+
+  /**
+   * @callback LayoutNodeIterator
+   * @param {LayoutNode} node
+   * @param {Number} index
+   * @return {void}
+   */
 
-    if ($el.getAttribute('pathLength') !== `${pathLength}`) {
-      $el.setAttribute('pathLength', `${pathLength}`);
-      proxy.setAttribute('draw', `${start} ${end}`);
-    }
+  let layoutId = 0;
+  let nodeId = 0;
 
-    return /** @type {DrawableSVGGeometry} */(proxy);
+  /**
+   * @param {DOMTarget} root
+   * @param {DOMTarget} $el
+   * @return {Boolean}
+   */
+  const isElementInRoot = (root, $el) => {
+    if (!root || !$el) return false;
+    return root === $el || root.contains($el);
   };
 
   /**
-   * Creates drawable proxies for multiple SVG elements.
-   * @param {TargetsParam} selector - CSS selector, SVG element, or array of elements and selectors
-   * @param {number} [start=0] - Starting position (0-1)
-   * @param {number} [end=0] - Ending position (0-1)
-   * @return {Array<DrawableSVGGeometry>} - Array of proxied elements with drawing functionality
+   * @param {Node} node
+   * @param {'previousSibling'|'nextSibling'} direction
+   * @return {Boolean}
    */
-  const createDrawable = (selector, start = 0, end = 0) => {
-    const els = parseTargets(selector);
-    return els.map($el => createDrawableProxy(
-      /** @type {SVGGeometryElement} */($el),
-      start,
-      end
-    ));
+  const hasTextSibling = (node, direction) => {
+    let sibling = node[direction];
+    while (sibling && sibling.nodeType === Node.TEXT_NODE && !sibling.textContent.trim()) {
+      sibling = sibling[direction];
+    }
+    return sibling && sibling.nodeType === Node.TEXT_NODE;
   };
 
-  
-
   /**
-   * @param  {TargetsParam} path2
-   * @param  {Number} [precision]
-   * @return {FunctionValue}
+   * @param {DOMTarget} $el
+   * @return {Boolean}
    */
-  const morphTo = (path2, precision = .33) => ($path1) => {
-    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>.`);
-    }
-    const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
-    if (!$path2) {
-      throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
-    }
-    const tagName2 = ($path2.tagName || '').toLowerCase();
-    if (!tagName2.match(/^(path|polygon|polyline)$/)) {
-      throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
-    }
-    const isPath = $path1.tagName === 'path';
-    const separator = isPath ? ' ' : ',';
-    const previousPoints = $path1[morphPointsSymbol];
-    if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
+  const isElementSurroundedByText = $el => hasTextSibling($el, 'previousSibling') || hasTextSibling($el, 'nextSibling');
 
-    let v1 = '', v2 = '';
+  /**
+   * @param {DOMTarget|null} $el
+   * @return {String|null}
+   */
+  const muteElementTransition = $el => {
+    if (!$el) return null;
+    const style = $el.style;
+    const transition = style.transition || '';
+    style.setProperty('transition', 'none', 'important');
+    return transition;
+  };
 
-    if (!precision) {
-      v1 = $path1.getAttribute(isPath ? 'd' : 'points');
-      v2 = $path2.getAttribute(isPath ? 'd' : 'points');
+  /**
+   * @param {DOMTarget|null} $el
+   * @param {String|null} transition
+   */
+  const restoreElementTransition = ($el, transition) => {
+    if (!$el) return;
+    const style = $el.style;
+    if (transition) {
+      style.transition = transition;
     } else {
-      const length1 = /** @type {SVGGeometryElement} */($path1).getTotalLength();
-      const length2 = $path2.getTotalLength();
-      const maxPoints = Math.max(Math.ceil(length1 * precision), Math.ceil(length2 * precision));
-      for (let i = 0; i < maxPoints; i++) {
-        const t = i / (maxPoints - 1);
-        const pointOnPath1 = /** @type {SVGGeometryElement} */($path1).getPointAtLength(length1 * t);
-        const pointOnPath2 = $path2.getPointAtLength(length2 * t);
-        const prefix = isPath ? (i === 0 ? 'M' : 'L') : '';
-        v1 += prefix + round$1(pointOnPath1.x, 3) + separator + pointOnPath1.y + ' ';
-        v2 += prefix + round$1(pointOnPath2.x, 3) + separator + pointOnPath2.y + ' ';
-      }
+      style.removeProperty('transition');
     }
-
-    $path1[morphPointsSymbol] = v2;
-
-    return [v1, v2];
   };
 
-  var index$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    createDrawable: createDrawable,
-    createMotionPath: createMotionPath,
-    morphTo: morphTo
-  });
-
-  
-
-  const segmenter = (typeof Intl !== 'undefined') && Intl.Segmenter;
-  const valueRgx = /\{value\}/g;
-  const indexRgx = /\{i\}/g;
-  const whiteSpaceGroupRgx = /(\s+)/;
-  const whiteSpaceRgx = /^\s+$/;
-  const lineType = 'line';
-  const wordType = 'word';
-  const charType = 'char';
-  const dataLine = `data-line`;
-
   /**
-   * @typedef {Object} Segment
-   * @property {String} segment
-   * @property {Boolean} [isWordLike]
+   * @param {LayoutNode} node
    */
+  const muteNodeTransition = node => {
+    const store = node.layout.transitionMuteStore;
+    const $el = node.$el;
+    const $measure = node.$measure;
+    if ($el && !store.has($el)) store.set($el, muteElementTransition($el));
+    if ($measure && !store.has($measure)) store.set($measure, muteElementTransition($measure));
+  };
 
   /**
-   * @typedef {Object} Segmenter
-   * @property {function(String): Iterable<Segment>} segment
+   * @param {Map<DOMTarget, String|null>} store
    */
+  const restoreLayoutTransition = store => {
+    store.forEach((value, $el) => restoreElementTransition($el, value));
+    store.clear();
+  };
 
-  /** @type {Segmenter} */
-  let wordSegmenter = null;
-  /** @type {Segmenter} */
-  let graphemeSegmenter = null;
-  let $splitTemplate = null;
+  const hiddenComputedStyle = /** @type {CSSStyleDeclaration} */({
+    display: 'none',
+    visibility: 'hidden',
+    opacity: '0',
+    transform: 'none',
+    position: 'static',
+  });
 
   /**
-   * @param  {Segment} seg
-   * @return {Boolean}
+   * @param {LayoutNode|null} node
    */
-  const isSegmentWordLike = seg => {
-    return seg.isWordLike ||
-           seg.segment === ' ' || // Consider spaces as words first, then handle them diffrently later
-           isNum(+seg.segment);   // Safari doesn't considers numbers as words
+  const detachNode = node => {
+    if (!node) return;
+    const parent = node.parentNode;
+    if (!parent) return;
+    if (parent._head === node) parent._head = node._next;
+    if (parent._tail === node) parent._tail = node._prev;
+    if (node._prev) node._prev._next = node._next;
+    if (node._next) node._next._prev = node._prev;
+    node._prev = null;
+    node._next = null;
+    node.parentNode = null;
   };
 
   /**
-   * @param {HTMLElement} $el
-   */
-  const setAriaHidden = $el => $el.setAttribute('aria-hidden', 'true');
+   * @param {DOMTarget} $el
+   * @param {LayoutNode|null} parentNode
+   * @param {LayoutSnapshot} state
+   * @param {LayoutNode} [recycledNode]
+   * @return {LayoutNode}
+   */
+  const createNode = ($el, parentNode, state, recycledNode) => {
+    let dataId = $el.dataset.layoutId;
+    if (!dataId) dataId = $el.dataset.layoutId = `node-${nodeId++}`;
+    const node = recycledNode ? recycledNode : /** @type {LayoutNode} */({});
+    node.$el = $el;
+    node.$measure = $el;
+    node.id = dataId;
+    node.index = 0;
+    node.total = 1;
+    node.delay = 0;
+    node.duration = 0;
+    node.state = state;
+    node.layout = state.layout;
+    node.parentNode = parentNode || null;
+    node.isTarget = false;
+    node.hasTransform = false;
+    node.isAnimated = false;
+    node.inlineStyles = [];
+    node.inlineTransforms = null;
+    node.inlineTransition = null;
+    node.branchAdded = false;
+    node.branchRemoved = false;
+    node.branchNotRendered = false;
+    node.sizeChanged = false;
+    node.isInlined = false;
+    node.hasVisibilitySwap = false;
+    node.hasDisplayNone = false;
+    node.hasVisibilityHidden = false;
+    node.measuredInlineTransform = null;
+    node.measuredInlineTransition = null;
+    node.measuredDisplay = null;
+    node.measuredVisibility = null;
+    node.measuredPosition = null;
+    node.measuredHasDisplayNone = false;
+    node.measuredHasVisibilityHidden = false;
+    node.measuredIsVisible = false;
+    node.measuredIsRemoved = false;
+    node.measuredIsInsideRoot = false;
+    node.properties = /** @type {LayoutNodeProperties} */({
+      transform: 'none',
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      clientLeft: 0,
+      clientTop: 0,
+      width: 0,
+      height: 0,
+    });
+    node.layout.properties.forEach(prop => node.properties[prop] = 0);
+    node._head = null;
+    node._tail = null;
+    node._prev = null;
+    node._next = null;
+    return node;
+  };
 
   /**
-   * @param {DOMTarget} $el
-   * @param {String} type
-   * @return {Array<HTMLElement>}
-   */
-  const getAllTopLevelElements = ($el, type) => [.../** @type {*} */($el.querySelectorAll(`[data-${type}]:not([data-${type}] [data-${type}])`))];
+   * @param {LayoutNode} node
+   * @param {DOMTarget} $measure
+   * @param {CSSStyleDeclaration} computedStyle
+   * @param {Boolean} skipMeasurements
+   * @return {LayoutNode}
+   */
+  const recordNodeState = (node, $measure, computedStyle, skipMeasurements) => {
+    const $el = node.$el;
+    const root = node.layout.root;
+    const isRoot = root === $el;
+    const properties = node.properties;
+    const rootNode = node.state.rootNode;
+    const parentNode = node.parentNode;
+    const computedTransforms = computedStyle.transform;
+    const inlineTransforms = $el.style.transform;
+    const parentNotRendered = parentNode ? parentNode.measuredIsRemoved : false;
+    const position = computedStyle.position;
+    if (isRoot) node.layout.absoluteCoords = position === 'fixed' || position === 'absolute';
+    node.$measure = $measure;
+    node.inlineTransforms = inlineTransforms;
+    node.hasTransform = computedTransforms && computedTransforms !== 'none';
+    node.measuredIsInsideRoot = isElementInRoot(root, $measure);
+    node.measuredInlineTransform = null;
+    node.measuredDisplay = computedStyle.display;
+    node.measuredVisibility = computedStyle.visibility;
+    node.measuredPosition = position;
+    node.measuredHasDisplayNone = computedStyle.display === 'none';
+    node.measuredHasVisibilityHidden = computedStyle.visibility === 'hidden';
+    node.measuredIsVisible = !(node.measuredHasDisplayNone || node.measuredHasVisibilityHidden);
+    node.measuredIsRemoved = node.measuredHasDisplayNone || node.measuredHasVisibilityHidden || parentNotRendered;
+    node.isInlined = node.measuredDisplay.includes('inline') && isElementSurroundedByText($el);
+
+    // Mute transforms (and transition to avoid triggering an animation) before the position calculation
+    if (node.hasTransform && !skipMeasurements) {
+      const transitionMuteStore = node.layout.transitionMuteStore;
+      if (!transitionMuteStore.get($el)) node.inlineTransition = muteElementTransition($el);
+      if ($measure === $el) {
+        $el.style.transform = 'none';
+      } else {
+        if (!transitionMuteStore.get($measure)) node.measuredInlineTransition = muteElementTransition($measure);
+        node.measuredInlineTransform = $measure.style.transform;
+        $measure.style.transform = 'none';
+      }
+    }
 
-  const debugColors = { line: '#00D672', word: '#FF4B4B', char: '#5A87FF' };
+    let left = 0;
+    let top = 0;
+    let width = 0;
+    let height = 0;
+
+    if (!skipMeasurements) {
+      const rect = $measure.getBoundingClientRect();
+      left = rect.left;
+      top = rect.top;
+      width = rect.width;
+      height = rect.height;
+    }
+
+    for (let name in properties) {
+      const computedProp = name === 'transform' ? computedTransforms : computedStyle[name] || (computedStyle.getPropertyValue && computedStyle.getPropertyValue(name));
+      if (!isUnd(computedProp)) properties[name] = computedProp;
+    }
+
+    properties.left = left;
+    properties.top = top;
+    properties.clientLeft = skipMeasurements ? 0 : $measure.clientLeft;
+    properties.clientTop = skipMeasurements ? 0 : $measure.clientTop;
+    // Compute local x/y relative to parent
+    let absoluteLeft, absoluteTop;
+    if (isRoot) {
+      if (!node.layout.absoluteCoords) {
+        absoluteLeft = 0;
+        absoluteTop = 0;
+      } else {
+        absoluteLeft = left;
+        absoluteTop = top;
+      }
+    } else {
+      const p = parentNode || rootNode;
+      const parentLeft = p.properties.left;
+      const parentTop = p.properties.top;
+      const borderLeft = p.properties.clientLeft;
+      const borderTop = p.properties.clientTop;
+      if (!node.layout.absoluteCoords) {
+        if (p === rootNode) {
+          const rootLeft = rootNode.properties.left;
+          const rootTop = rootNode.properties.top;
+          const rootBorderLeft = rootNode.properties.clientLeft;
+          const rootBorderTop = rootNode.properties.clientTop;
+          absoluteLeft = left - rootLeft - rootBorderLeft;
+          absoluteTop = top - rootTop - rootBorderTop;
+        } else {
+          absoluteLeft = left - parentLeft - borderLeft;
+          absoluteTop = top - parentTop - borderTop;
+        }
+      } else {
+        absoluteLeft = left - parentLeft - borderLeft;
+        absoluteTop = top - parentTop - borderTop;
+      }
+    }
+    properties.x = absoluteLeft;
+    properties.y = absoluteTop;
+    properties.width = width;
+    properties.height = height;
+    return node;
+  };
 
   /**
-   * @param {HTMLElement} $el
+   * @param {LayoutNode} node
+   * @param {LayoutStateParams} [props]
    */
-  const filterEmptyElements = $el => {
-    if (!$el.childElementCount && !$el.textContent.trim()) {
-      const $parent = $el.parentElement;
-      $el.remove();
-      if ($parent) filterEmptyElements($parent);
+  const updateNodeProperties = (node, props) => {
+    if (!props) return;
+    for (let name in props) {
+      node.properties[name] = props[name];
     }
   };
 
   /**
-   * @param {HTMLElement} $el
-   * @param {Number} lineIndex
-   * @param {Set<HTMLElement>} bin
-   * @returns {Set<HTMLElement>}
+   * @param {LayoutNode} node
    */
-  const filterLineElements = ($el, lineIndex, bin) => {
-    const dataLineAttr = $el.getAttribute(dataLine);
-    if (dataLineAttr !== null && +dataLineAttr !== lineIndex || $el.tagName === 'BR') bin.add($el);
-    let i = $el.childElementCount;
-    while (i--) filterLineElements(/** @type {HTMLElement} */($el.children[i]), lineIndex, bin);
-    return bin;
+  const recordNodeInlineStyles = node => {
+    const style = node.$el.style;
+    const stylesStore = node.inlineStyles;
+    stylesStore.length = 0;
+    node.layout.recordedProperties.forEach(prop => {
+      stylesStore.push(prop, style[prop] || '');
+    });
   };
 
   /**
-   * @param  {'line'|'word'|'char'} type
-   * @param  {SplitTemplateParams} params
-   * @return {String}
+   * @param {LayoutNode} node
    */
-  const generateTemplate = (type, params = {}) => {
-    let template = ``;
-    const classString = isStr(params.class) ? ` class="${params.class}"` : '';
-    const cloneType = setValue(params.clone, false);
-    const wrapType = setValue(params.wrap, false);
-    const overflow = wrapType ? wrapType === true ? 'clip' : wrapType : cloneType ? 'clip' : false;
-    if (wrapType) template += `<span${overflow ? ` style="overflow:${overflow};"` : ''}>`;
-    template += `<span${classString}${cloneType ? ` style="position:relative;"` : ''} data-${type}="{i}">`;
-    if (cloneType) {
-      const left = cloneType === 'left' ? '-100%' : cloneType === 'right' ? '100%' : '0';
-      const top = cloneType === 'top' ? '-100%' : cloneType === 'bottom' ? '100%' : '0';
-      template += `<span>{value}</span>`;
-      template += `<span inert style="position:absolute;top:${top};left:${left};white-space:nowrap;">{value}</span>`;
-    } else {
-      template += `{value}`;
+  const restoreNodeInlineStyles = node => {
+    const style = node.$el.style;
+    const stylesStore = node.inlineStyles;
+    for (let i = 0, l = stylesStore.length; i < l; i += 2) {
+      const property = stylesStore[i];
+      const styleValue = stylesStore[i + 1];
+      if (styleValue && styleValue !== '') {
+        style[property] = styleValue;
+      } else {
+        style[property] = '';
+        style.removeProperty(property);
+      }
     }
-    template += `</span>`;
-    if (wrapType) template += `</span>`;
-    return template;
   };
 
   /**
-   * @param  {String|SplitFunctionValue} htmlTemplate
-   * @param  {Array<HTMLElement>} store
-   * @param  {Node|HTMLElement} node
-   * @param  {DocumentFragment} $parentFragment
-   * @param  {'line'|'word'|'char'} type
-   * @param  {Boolean} debug
-   * @param  {Number} lineIndex
-   * @param  {Number} [wordIndex]
-   * @param  {Number} [charIndex]
-   * @return {HTMLElement}
+   * @param {LayoutNode} node
    */
-  const processHTMLTemplate = (htmlTemplate, store, node, $parentFragment, type, debug, lineIndex, wordIndex, charIndex) => {
-    const isLine = type === lineType;
-    const isChar = type === charType;
-    const className = `_${type}_`;
-    const template = isFnc(htmlTemplate) ? htmlTemplate(node) : htmlTemplate;
-    const displayStyle = isLine ? 'block' : 'inline-block';
-    $splitTemplate.innerHTML = template
-      .replace(valueRgx, `<i class="${className}"></i>`)
-      .replace(indexRgx, `${isChar ? charIndex : isLine ? lineIndex : wordIndex}`);
-    const $content = $splitTemplate.content;
-    const $highestParent = /** @type {HTMLElement} */($content.firstElementChild);
-    const $split = /** @type {HTMLElement} */($content.querySelector(`[data-${type}]`)) || $highestParent;
-    const $replacables = /** @type {NodeListOf<HTMLElement>} */($content.querySelectorAll(`i.${className}`));
-    const replacablesLength = $replacables.length;
-    if (replacablesLength) {
-      $highestParent.style.display = displayStyle;
-      $split.style.display = displayStyle;
-      $split.setAttribute(dataLine, `${lineIndex}`);
-      if (!isLine) {
-        $split.setAttribute('data-word', `${wordIndex}`);
-        if (isChar) $split.setAttribute('data-char', `${charIndex}`);
-      }
-      let i = replacablesLength;
-      while (i--) {
-        const $replace = $replacables[i];
-        const $closestParent = $replace.parentElement;
-        $closestParent.style.display = displayStyle;
-        if (isLine) {
-          $closestParent.innerHTML = /** @type {HTMLElement} */(node).innerHTML;
-        } else {
-          $closestParent.replaceChild(node.cloneNode(true), $replace);
-        }
+  const restoreNodeTransform = node => {
+    const inlineTransforms = node.inlineTransforms;
+    const nodeStyle = node.$el.style;
+    if (!node.hasTransform || !inlineTransforms || (node.hasTransform && nodeStyle.transform === 'none') || (inlineTransforms && inlineTransforms === 'none')) {
+      nodeStyle.removeProperty('transform');
+    } else if (inlineTransforms) {
+      nodeStyle.transform = inlineTransforms;
+    }
+    const $measure = node.$measure;
+    if (node.hasTransform && $measure !== node.$el) {
+      const measuredStyle = $measure.style;
+      const measuredInline = node.measuredInlineTransform;
+      if (measuredInline && measuredInline !== '') {
+        measuredStyle.transform = measuredInline;
+      } else {
+        measuredStyle.removeProperty('transform');
       }
-      store.push($split);
-      $parentFragment.appendChild($content);
-    } else {
-      console.warn(`The expression "{value}" is missing from the provided template.`);
     }
-    if (debug) $highestParent.style.outline = `1px dotted ${debugColors[type]}`;
-    return $highestParent;
+    node.measuredInlineTransform = null;
+    if (node.inlineTransition !== null) {
+      restoreElementTransition(node.$el, node.inlineTransition);
+      node.inlineTransition = null;
+    }
+    if ($measure !== node.$el && node.measuredInlineTransition !== null) {
+      restoreElementTransition($measure, node.measuredInlineTransition);
+      node.measuredInlineTransition = null;
+    }
   };
 
   /**
-   * A class that splits text into words and wraps them in span elements while preserving the original HTML structure.
-   * @class
+   * @param {LayoutNode} node
    */
-  class TextSplitter {
-    /**
-     * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
-     * @param  {TextSplitterParams} [parameters]
-     */
-    constructor(target, parameters = {}) {
-      // Only init segmenters when needed
-      if (!wordSegmenter) wordSegmenter = segmenter ? new segmenter([], { granularity: wordType }) : {
-        segment: (text) => {
-          const segments = [];
-          const words = text.split(whiteSpaceGroupRgx);
-          for (let i = 0, l = words.length; i < l; i++) {
-            const segment = words[i];
-            segments.push({
-              segment,
-              isWordLike: !whiteSpaceRgx.test(segment), // Consider non-whitespace as word-like
-            });
-          }
-          return segments;
-        }
-      };
-      if (!graphemeSegmenter) graphemeSegmenter = segmenter ? new segmenter([], { granularity: 'grapheme' }) : {
-        segment: text => [...text].map(char => ({ segment: char }))
-      };
-      if (!$splitTemplate && isBrowser) $splitTemplate = doc.createElement('template');
-      if (scope.current) scope.current.register(this);
-      const { words, chars, lines, accessible, includeSpaces, debug } = parameters;
-      const $target = /** @type {HTMLElement} */((target = isArr(target) ? target[0] : target) && /** @type {Node} */(target).nodeType ? target : (getNodeList(target) || [])[0]);
-      const lineParams = lines === true ? {} : lines;
-      const wordParams = words === true || isUnd(words) ? {} : words;
-      const charParams = chars === true ? {} : chars;
-      this.debug = setValue(debug, false);
-      this.includeSpaces = setValue(includeSpaces, false);
-      this.accessible = setValue(accessible, true);
-      this.linesOnly = lineParams && (!wordParams && !charParams);
-      /** @type {String|false|SplitFunctionValue} */
-      this.lineTemplate = isObj(lineParams) ? generateTemplate(lineType, /** @type {SplitTemplateParams} */(lineParams)) : lineParams;
-      /** @type {String|false|SplitFunctionValue} */
-      this.wordTemplate = isObj(wordParams) || this.linesOnly ? generateTemplate(wordType, /** @type {SplitTemplateParams} */(wordParams)) : wordParams;
-      /** @type {String|false|SplitFunctionValue} */
-      this.charTemplate = isObj(charParams) ? generateTemplate(charType, /** @type {SplitTemplateParams} */(charParams)) : charParams;
-      this.$target = $target;
-      this.html = $target && $target.innerHTML;
-      this.lines = [];
-      this.words = [];
-      this.chars = [];
-      this.effects = [];
-      this.effectsCleanups = [];
-      this.cache = null;
-      this.ready = false;
-      this.width = 0;
-      this.resizeTimeout = null;
-      const handleSplit = () => this.html && (lineParams || wordParams || charParams) && this.split();
-      // Make sure this is declared before calling handleSplit() in case revert() is called inside an effect callback
-      this.resizeObserver = new ResizeObserver(() => {
-        // Use a setTimeout instead of a Timer for better tree shaking
-        clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = setTimeout(() => {
-          const currentWidth = /** @type {HTMLElement} */($target).offsetWidth;
-          if (currentWidth === this.width) return;
-          this.width = currentWidth;
-          handleSplit();
-        }, 150);
-      });
-      // Only declare the font ready promise when splitting by lines and not alreay split
-      if (this.lineTemplate && !this.ready) {
-        doc.fonts.ready.then(handleSplit);
-      } else {
-        handleSplit();
+  const restoreNodeVisualState = node => {
+    if (node.measuredIsRemoved || node.hasVisibilitySwap) {
+      node.$el.style.removeProperty('display');
+      node.$el.style.removeProperty('visibility');
+      if (node.hasVisibilitySwap) {
+        node.$measure.style.removeProperty('display');
+        node.$measure.style.removeProperty('visibility');
       }
-      $target ? this.resizeObserver.observe($target) : console.warn('No Text Splitter target found.');
     }
+    if (node.measuredIsRemoved) {
+      node.layout.pendingRemoved.delete(node.$el);
+    }
+  };
+
+  /**
+   * @param {LayoutNode} node
+   * @param {LayoutNode} targetNode
+   * @param {LayoutSnapshot} newState
+   * @return {LayoutNode}
+   */
+  const cloneNodeProperties = (node, targetNode, newState) => {
+    targetNode.properties = /** @type {LayoutNodeProperties} */({ ...node.properties });
+    targetNode.state = newState;
+    targetNode.isTarget = node.isTarget;
+    targetNode.hasTransform = node.hasTransform;
+    targetNode.inlineTransforms = node.inlineTransforms;
+    targetNode.measuredIsVisible = node.measuredIsVisible;
+    targetNode.measuredDisplay = node.measuredDisplay;
+    targetNode.measuredIsRemoved = node.measuredIsRemoved;
+    targetNode.measuredHasDisplayNone = node.measuredHasDisplayNone;
+    targetNode.measuredHasVisibilityHidden = node.measuredHasVisibilityHidden;
+    targetNode.hasDisplayNone = node.hasDisplayNone;
+    targetNode.isInlined = node.isInlined;
+    targetNode.hasVisibilityHidden = node.hasVisibilityHidden;
+    return targetNode;
+  };
 
+  class LayoutSnapshot {
     /**
-     * @param  {(...args: any[]) => Tickable | (() => void)} effect
-     * @return this
+     * @param {AutoLayout} layout
      */
-    addEffect(effect) {
-      if (!isFnc(effect)) return console.warn('Effect must return a function.');
-      const refreshableEffect = keepTime(effect);
-      this.effects.push(refreshableEffect);
-      if (this.ready) this.effectsCleanups[this.effects.length - 1] = refreshableEffect(this);
-      return this;
+    constructor(layout) {
+      /** @type {AutoLayout} */
+      this.layout = layout;
+      /** @type {LayoutNode|null} */
+      this.rootNode = null;
+      /** @type {Set<LayoutNode>} */
+      this.rootNodes = new Set();
+      /** @type {Map<String, LayoutNode>} */
+      this.nodes = new Map();
+      /** @type {Number} */
+      this.scrollX = 0;
+      /** @type {Number} */
+      this.scrollY = 0;
     }
 
+    /**
+     * @return {this}
+     */
     revert() {
-      clearTimeout(this.resizeTimeout);
-      this.lines.length = this.words.length = this.chars.length = 0;
-      this.resizeObserver.disconnect();
-      // Make sure to revert the effects after disconnecting the resizeObserver to avoid triggering it in the process
-      this.effectsCleanups.forEach(cleanup => isFnc(cleanup) ? cleanup(this) : cleanup.revert && cleanup.revert());
-      this.$target.innerHTML = this.html;
+      this.forEachNode(node => {
+        node.$el.removeAttribute('data-layout-id');
+        node.$measure.removeAttribute('data-layout-id');
+      });
+      this.rootNode = null;
+      this.rootNodes.clear();
+      this.nodes.clear();
       return this;
     }
 
     /**
-     * Recursively processes a node and its children
-     * @param {Node} node
+     * @param {DOMTarget} $el
+     * @return {LayoutNodeProperties|undefined}
      */
-    splitNode(node) {
-      const wordTemplate = this.wordTemplate;
-      const charTemplate = this.charTemplate;
-      const includeSpaces = this.includeSpaces;
-      const debug = this.debug;
-      const nodeType = node.nodeType;
-      if (nodeType === 3) {
-        const nodeText = node.nodeValue;
-        // If the nodeText is only whitespace, leave it as is
-        if (nodeText.trim()) {
-          const tempWords = [];
-          const words = this.words;
-          const chars = this.chars;
-          const wordSegments = wordSegmenter.segment(nodeText);
-          const $wordsFragment = doc.createDocumentFragment();
-          let prevSeg = null;
-          for (const wordSegment of wordSegments) {
-            const segment = wordSegment.segment;
-            const isWordLike = isSegmentWordLike(wordSegment);
-            // Determine if this segment should be a new word, first segment always becomes a new word
-            if (!prevSeg || (isWordLike && (prevSeg && (isSegmentWordLike(prevSeg))))) {
-              tempWords.push(segment);
-            } else {
-              // Only concatenate if both current and previous are non-word-like and don't contain spaces
-              const lastWordIndex = tempWords.length - 1;
-              const lastWord = tempWords[lastWordIndex];
-              if (!lastWord.includes(' ') && !segment.includes(' ')) {
-                tempWords[lastWordIndex] += segment;
-              } else {
-                tempWords.push(segment);
-              }
-            }
-            prevSeg = wordSegment;
-          }
+    get($el) {
+      const node = this.nodes.get($el.dataset.layoutId);
+      if (!node) {
+        console.warn(`No node found on state`);
+        return;
+      }
+      return node.properties;
+    }
 
-          for (let i = 0, l = tempWords.length; i < l; i++) {
-            const word = tempWords[i];
-            if (!word.trim()) {
-              // Preserve whitespace only if includeSpaces is false and if the current space is not the first node
-              if (i && includeSpaces) continue;
-              $wordsFragment.appendChild(doc.createTextNode(word));
-            } else {
-              const nextWord = tempWords[i + 1];
-              const hasWordFollowingSpace = includeSpaces && nextWord && !nextWord.trim();
-              const wordToProcess = word;
-              const charSegments = charTemplate ? graphemeSegmenter.segment(wordToProcess) : null;
-              const $charsFragment = charTemplate ? doc.createDocumentFragment() : doc.createTextNode(hasWordFollowingSpace ? word + '\xa0' : word);
-              if (charTemplate) {
-                const charSegmentsArray = [...charSegments];
-                for (let j = 0, jl = charSegmentsArray.length; j < jl; j++) {
-                  const charSegment = charSegmentsArray[j];
-                  const isLastChar = j === jl - 1;
-                  // If this is the last character and includeSpaces is true with a following space, append the space
-                  const charText = isLastChar && hasWordFollowingSpace ? charSegment.segment + '\xa0' : charSegment.segment;
-                  const $charNode = doc.createTextNode(charText);
-                  processHTMLTemplate(charTemplate, chars, $charNode, /** @type {DocumentFragment} */($charsFragment), charType, debug, -1, words.length, chars.length);
-                }
-              }
-              if (wordTemplate) {
-                processHTMLTemplate(wordTemplate, words, $charsFragment, $wordsFragment, wordType, debug, -1, words.length, chars.length);
-                // Chars elements must be re-parsed in the split() method if both words and chars are parsed
-              } else if (charTemplate) {
-                $wordsFragment.appendChild($charsFragment);
-              } else {
-                $wordsFragment.appendChild(doc.createTextNode(word));
-              }
-              // Skip the next iteration if we included a space
-              if (hasWordFollowingSpace) i++;
-            }
+    /**
+     * @param {DOMTarget} $el
+     * @param {String} prop
+     * @return {Number|String|undefined}
+     */
+    getValue($el, prop) {
+      if (!$el || !$el.dataset) {
+        console.warn(`No element found on state (${$el})`);
+        return;
+      }
+      const node = this.nodes.get($el.dataset.layoutId);
+      if (!node) {
+        console.warn(`No node found on state`);
+        return;
+      }
+      const value = node.properties[prop];
+      if (!isUnd(value)) return getFunctionValue(value, $el, node.index, node.total);
+    }
+
+    /**
+     * @param {LayoutNode|null} rootNode
+     * @param {LayoutNodeIterator} cb
+     */
+    forEach(rootNode, cb) {
+      let node = rootNode;
+      let i = 0;
+      while (node) {
+        cb(node, i++);
+        if (node._head) {
+          node = node._head;
+        } else if (node._next) {
+          node = node._next;
+        } else {
+          while (node && !node._next) {
+            node = node.parentNode;
           }
-          node.parentNode.replaceChild($wordsFragment, node);
+          if (node) node = node._next;
         }
-      } else if (nodeType === 1) {
-        // Converting to an array is necessary to work around childNodes pottential mutation
-        const childNodes = /** @type {Array<Node>} */([.../** @type {*} */(node.childNodes)]);
-        for (let i = 0, l = childNodes.length; i < l; i++) this.splitNode(childNodes[i]);
       }
     }
 
     /**
-     * @param {Boolean} clearCache
-     * @return {this}
+     * @param {LayoutNodeIterator} cb
      */
-    split(clearCache = false) {
-      const $el = this.$target;
-      const isCached = !!this.cache && !clearCache;
-      const lineTemplate = this.lineTemplate;
-      const wordTemplate = this.wordTemplate;
-      const charTemplate = this.charTemplate;
-      const fontsReady = doc.fonts.status !== 'loading';
-      const canSplitLines = lineTemplate && fontsReady;
-      this.ready = !lineTemplate || fontsReady;
-      if (canSplitLines || clearCache) {
-        // No need to revert effects animations here since it's already taken care by the refreshable
-        this.effectsCleanups.forEach(cleanup => isFnc(cleanup) && cleanup(this));
+    forEachRootNode(cb) {
+      this.forEach(this.rootNode, cb);
+    }
+
+    /**
+     * @param {LayoutNodeIterator} cb
+     */
+    forEachNode(cb) {
+      for (const rootNode of this.rootNodes) {
+        this.forEach(rootNode, cb);
       }
-      if (!isCached) {
-        if (clearCache) {
-          $el.innerHTML = this.html;
-          this.words.length = this.chars.length = 0;
+    }
+
+    /**
+     * @param {DOMTarget} $el
+     * @param {LayoutNode|null} parentNode
+     * @return {LayoutNode|null}
+     */
+    registerElement($el, parentNode) {
+      if (!$el || $el.nodeType !== 1) return null;
+
+      if (!this.layout.transitionMuteStore.has($el)) this.layout.transitionMuteStore.set($el, muteElementTransition($el));
+
+      /** @type {Array<DOMTarget|LayoutNode|null>} */
+      const stack = [$el, parentNode];
+      const root = this.layout.root;
+      let firstNode = null;
+
+      while (stack.length) {
+        /** @type {LayoutNode|null} */
+        const $parent = /** @type {LayoutNode|null} */(stack.pop());
+        /** @type {DOMTarget|null} */
+        const $current = /** @type {DOMTarget|null} */(stack.pop());
+        if (!$current || $current.nodeType !== 1 || isSvg($current)) continue;
+
+        const skipMeasurements = $parent ? $parent.measuredIsRemoved : false;
+
+        const computedStyle = skipMeasurements ? hiddenComputedStyle : getComputedStyle($current);
+        const hasDisplayNone = skipMeasurements ? true : computedStyle.display === 'none';
+        const hasVisibilityHidden = skipMeasurements ? true : computedStyle.visibility === 'hidden';
+        const isVisible = !hasDisplayNone && !hasVisibilityHidden;
+        const existingId = $current.dataset.layoutId;
+        const isInsideRoot = isElementInRoot(root, $current);
+
+        let node = existingId ? this.nodes.get(existingId) : null;
+
+        if (node && node.$el !== $current) {
+          const nodeInsideRoot = isElementInRoot(root, node.$el);
+          const measuredVisible = node.measuredIsVisible;
+          const shouldReassignNode = !nodeInsideRoot && (isInsideRoot || (!isInsideRoot && !measuredVisible && isVisible));
+          const shouldReuseMeasurements = nodeInsideRoot && !measuredVisible && isVisible;
+          // Rebind nodes that move into the root or whose detached twin just became visible
+          if (shouldReassignNode) {
+            detachNode(node);
+            node = createNode($current, $parent, this, node);
+          // for hidden element with in-root sibling, keep the hidden node but borrow measurements from its visible in-root twin element
+          } else if (shouldReuseMeasurements) {
+            recordNodeState(node, $current, computedStyle, skipMeasurements);
+            let $child = $current.lastElementChild;
+            while ($child) {
+              stack.push(/** @type {DOMTarget} */($child), node);
+              $child = $child.previousElementSibling;
+            }
+            if (!firstNode) firstNode = node;
+            continue;
+          // No reassignment needed so keep walking descendants under the current parent
+          } else {
+            let $child = $current.lastElementChild;
+            while ($child) {
+              stack.push(/** @type {DOMTarget} */($child), $parent);
+              $child = $child.previousElementSibling;
+            }
+            if (!firstNode) firstNode = node;
+            continue;
+          }
+        } else {
+          node = createNode($current, $parent, this, node);
         }
-        this.splitNode($el);
-        this.cache = $el.innerHTML;
+
+        node.branchAdded = false;
+        node.branchRemoved = false;
+        node.branchNotRendered = false;
+        node.isTarget = false;
+        node.isAnimated = false;
+        node.hasVisibilityHidden = hasVisibilityHidden;
+        node.hasDisplayNone = hasDisplayNone;
+        node.hasVisibilitySwap = (hasVisibilityHidden && !node.measuredHasVisibilityHidden) || (hasDisplayNone && !node.measuredHasDisplayNone);
+        // node.hasVisibilitySwap = (hasVisibilityHidden !== node.measuredHasVisibilityHidden) || (hasDisplayNone !== node.measuredHasDisplayNone);
+
+        this.nodes.set(node.id, node);
+
+        node.parentNode = $parent || null;
+        node._prev = null;
+        node._next = null;
+
+        if ($parent) {
+          this.rootNodes.delete(node);
+          if (!$parent._head) {
+            $parent._head = node;
+            $parent._tail = node;
+          } else {
+            $parent._tail._next = node;
+            node._prev = $parent._tail;
+            $parent._tail = node;
+          }
+        } else {
+          this.rootNodes.add(node);
+        }
+
+        recordNodeState(node, node.$el, computedStyle, skipMeasurements);
+
+        let $child = $current.lastElementChild;
+        while ($child) {
+          stack.push(/** @type {DOMTarget} */($child), node);
+          $child = $child.previousElementSibling;
+        }
+
+        if (!firstNode) firstNode = node;
       }
-      if (canSplitLines) {
-        if (isCached) $el.innerHTML = this.cache;
-        this.lines.length = 0;
-        if (wordTemplate) this.words = getAllTopLevelElements($el, wordType);
+
+      return firstNode;
+    }
+
+    /**
+     * @param {DOMTarget} $el
+     * @param {Set<DOMTarget>} candidates
+     * @return {LayoutNode|null}
+     */
+    ensureDetachedNode($el, candidates) {
+      if (!$el || $el === this.layout.root) return null;
+      const existingId = $el.dataset.layoutId;
+      const existingNode = existingId ? this.nodes.get(existingId) : null;
+      if (existingNode && existingNode.$el === $el) return existingNode;
+      let parentNode = null;
+      let $ancestor = $el.parentElement;
+      while ($ancestor && $ancestor !== this.layout.root) {
+        if (candidates.has($ancestor)) {
+          parentNode = this.ensureDetachedNode($ancestor, candidates);
+          break;
+        }
+        $ancestor = $ancestor.parentElement;
       }
-      // Always reparse characters after a line reset or if both words and chars are activated
-      if (charTemplate && (canSplitLines || wordTemplate)) {
-        this.chars = getAllTopLevelElements($el, charType);
+      return this.registerElement($el, parentNode);
+    }
+
+    /**
+     * @return {this}
+     */
+    record() {
+      const { children, root } = this.layout;
+      const toParse = isArr(children) ? children : [children];
+      const scoped = [];
+      const scopeRoot = children === '*' ? root : scope.root;
+
+      for (let i = 0, l = toParse.length; i < l; i++) {
+        const child = toParse[i];
+        scoped[i] = isStr(child) ? scopeRoot.querySelectorAll(child) : child;
       }
-      // Words are used when lines only and prioritized over chars
-      const elementsArray = this.words.length ? this.words : this.chars;
-      let y, linesCount = 0;
-      for (let i = 0, l = elementsArray.length; i < l; i++) {
-        const $el = elementsArray[i];
-        const { top, height } = $el.getBoundingClientRect();
-        if (y && top - y > height * .5) linesCount++;
-        $el.setAttribute(dataLine, `${linesCount}`);
-        const nested = $el.querySelectorAll(`[${dataLine}]`);
-        let c = nested.length;
-        while (c--) nested[c].setAttribute(dataLine, `${linesCount}`);
-        y = top;
+
+      const parsedChildren = registerTargets(scoped);
+
+      this.nodes.clear();
+      this.rootNodes.clear();
+
+      const rootNode = this.registerElement(root, null);
+      // Root node are always targets
+      rootNode.isTarget = true;
+      this.rootNode = rootNode;
+
+      // Track ids of nodes that belong to the current root to filter detached matches
+      const inRootNodeIds = new Set();
+      this.nodes.forEach((node, id) => {
+        if (node && node.measuredIsInsideRoot) {
+          inRootNodeIds.add(id);
+        }
+      });
+
+      // Elements with a layout id outside the root that match the children selector
+      const detachedElementsLookup = new Set();
+      const orderedDetachedElements = [];
+
+      for (let i = 0, l = parsedChildren.length; i < l; i++) {
+        const $el = parsedChildren[i];
+        if (!$el || $el.nodeType !== 1 || $el === root) continue;
+        const insideRoot = isElementInRoot(root, $el);
+        if (!insideRoot) {
+          const layoutNodeId = $el.dataset.layoutId;
+          if (!layoutNodeId || !inRootNodeIds.has(layoutNodeId)) continue;
+        }
+        if (!detachedElementsLookup.has($el)) {
+          detachedElementsLookup.add($el);
+          orderedDetachedElements.push($el);
+        }
       }
-      if (canSplitLines) {
-        const linesFragment = doc.createDocumentFragment();
-        const parents = new Set();
-        const clones = [];
-        for (let lineIndex = 0; lineIndex < linesCount + 1; lineIndex++) {
-          const $clone = /** @type {HTMLElement} */($el.cloneNode(true));
-          filterLineElements($clone, lineIndex, new Set()).forEach($el => {
-            const $parent = $el.parentElement;
-            if ($parent) parents.add($parent);
-            $el.remove();
+
+      for (let i = 0, l = orderedDetachedElements.length; i < l; i++) {
+        this.ensureDetachedNode(orderedDetachedElements[i], detachedElementsLookup);
+      }
+
+      for (let i = 0, l = parsedChildren.length; i < l; i++) {
+        const $el = parsedChildren[i];
+        const node = this.nodes.get($el.dataset.layoutId);
+        if (node) {
+          let cur = node;
+          while (cur) {
+            if (cur.isTarget) break;
+            cur.isTarget = true;
+            cur = cur.parentNode;
+          }
+        }
+      }
+
+      this.scrollX = window.scrollX;
+      this.scrollY = window.scrollY;
+
+      const total = this.nodes.size;
+
+      this.forEachNode(restoreNodeTransform);
+      this.forEachNode((node, i) => {
+        node.index = i;
+        node.total = total;
+      });
+
+      return this;
+    }
+  }
+
+  class AutoLayout {
+    /**
+     * @param {DOMTargetSelector} root
+     * @param {AutoLayoutParams} [params]
+     */
+    constructor(root, params = {}) {
+      if (scope.current) scope.current.register(this);
+      const frozenParams = params.frozen;
+      const addedParams = params.added;
+      const removedParams = params.removed;
+      const propsParams = params.properties;
+      /** @type {AutoLayoutParams} */
+      this.params = params;
+      /** @type {DOMTarget} */
+      this.root = /** @type {DOMTarget} */(registerTargets(root)[0]);
+      /** @type {Number} */
+      this.id = layoutId++;
+      /** @type {LayoutChildrenParam} */
+      this.children = params.children || '*';
+      /** @type {Boolean} */
+      this.absoluteCoords = false;
+      /** @type {Number|FunctionValue} */
+      this.duration = setValue(params.duration, 500);
+      /** @type {Number|FunctionValue} */
+      this.delay = setValue(params.delay, 0);
+      /** @type {EasingParam} */
+      this.ease = setValue(params.ease, 'inOut(3.5)');
+      /** @type {Callback<this>} */
+      this.onComplete = setValue(params.onComplete, /** @type {Callback<this>} */(noop));
+      /** @type {LayoutStateParams} */
+      this.frozenParams = frozenParams || { opacity: 0 };
+      /** @type {LayoutStateParams} */
+      this.addedParams = addedParams || { opacity: 0 };
+      /** @type {LayoutStateParams} */
+      this.removedParams = removedParams || { opacity: 0 };
+      /** @type {Set<String>} */
+      this.properties = new Set([
+        'opacity',
+        'borderRadius',
+      ]);
+      if (frozenParams) for (let name in frozenParams) this.properties.add(name);
+      if (addedParams) for (let name in addedParams) this.properties.add(name);
+      if (removedParams) for (let name in removedParams) this.properties.add(name);
+      if (propsParams) for (let i = 0, l = propsParams.length; i < l; i++) this.properties.add(propsParams[i]);
+      /** @type {Set<String>} */
+      this.recordedProperties = new Set([
+        'display',
+        'visibility',
+        'translate',
+        'position',
+        'left',
+        'top',
+        'marginLeft',
+        'marginTop',
+        'width',
+        'height',
+        'maxWidth',
+        'maxHeight',
+        'minWidth',
+        'minHeight',
+      ]);
+      this.properties.forEach(prop => this.recordedProperties.add(prop));
+      /** @type {WeakSet<DOMTarget>} */
+      this.pendingRemoved = new WeakSet();
+      /** @type {Map<DOMTarget, String|null>} */
+      this.transitionMuteStore = new Map();
+      /** @type {LayoutSnapshot} */
+      this.oldState = new LayoutSnapshot(this);
+      /** @type {LayoutSnapshot} */
+      this.newState = new LayoutSnapshot(this);
+      /** @type {Timeline|null} */
+      this.timeline = null;
+      /** @type {WAAPIAnimation|null} */
+      this.transformAnimation = null;
+      /** @type {Array<DOMTarget>} */
+      this.frozen = [];
+      /** @type {Array<DOMTarget>} */
+      this.removed = [];
+      /** @type {Array<DOMTarget>} */
+      this.added = [];
+      // Record the current state as the old state to init the data attributes
+      this.oldState.record();
+      // And all layout transition muted during the record
+      restoreLayoutTransition(this.transitionMuteStore);
+    }
+
+    /**
+     * @return {this}
+     */
+    revert() {
+      if (this.timeline) {
+        this.timeline.complete();
+        this.timeline = null;
+      }
+      if (this.transformAnimation) {
+        this.transformAnimation.complete();
+        this.transformAnimation = null;
+      }
+      this.root.classList.remove('is-animated');
+      this.frozen.length = this.removed.length = this.added.length = 0;
+      this.oldState.revert();
+      this.newState.revert();
+      requestAnimationFrame(() => restoreLayoutTransition(this.transitionMuteStore));
+      return this;
+    }
+
+    /**
+     * @return {this}
+     */
+    record() {
+      // Commit transforms before measuring
+      if (this.transformAnimation) {
+        this.transformAnimation.cancel();
+        this.transformAnimation = null;
+      }
+      // Record the old state
+      this.oldState.record();
+      // Cancel any running timeline
+      if (this.timeline) {
+        this.timeline.cancel();
+        this.timeline = null;
+      }
+      // Restore previously captured inline styles
+      this.newState.forEachRootNode(restoreNodeInlineStyles);
+      return this;
+    }
+
+    /**
+     * @param {LayoutAnimationParams} [params]
+     * @return {Timeline}
+     */
+    animate(params = {}) {
+      const delay = setValue(params.delay, this.delay);
+      const duration = setValue(params.duration, this.duration);
+      const onComplete = setValue(params.onComplete, this.onComplete);
+      const frozenParams = params.frozen ? mergeObjects(params.frozen, this.frozenParams) : this.frozenParams;
+      const addedParams = params.added ? mergeObjects(params.added, this.addedParams) : this.addedParams;
+      const removedParams = params.removed ? mergeObjects(params.removed, this.removedParams) : this.removedParams;
+      const oldState = this.oldState;
+      const newState = this.newState;
+      const added = this.added;
+      const removed = this.removed;
+      const frozen = this.frozen;
+      const pendingRemoved = this.pendingRemoved;
+
+      added.length = removed.length = frozen.length = 0;
+
+      // Mute old state CSS transitions to prevent wrong properties calculation
+      oldState.forEachRootNode(muteNodeTransition);
+      // Capture the new state before animation
+      newState.record();
+      newState.forEachRootNode(recordNodeInlineStyles);
+
+      const targets = [];
+      const animated = [];
+      const transformed = [];
+      const animatedFrozen = [];
+      const root = newState.rootNode.$el;
+
+      newState.forEachRootNode(node => {
+        const $el = node.$el;
+        const id = node.id;
+        const parent = node.parentNode;
+        const parentAdded = parent ? parent.branchAdded : false;
+        const parentRemoved = parent ? parent.branchRemoved : false;
+        const parentNotRendered = parent ? parent.branchNotRendered : false;
+
+        // Delay and duration must be calculated in the animate() call to support delay override
+        node.delay = +(isFnc(delay) ? delay($el, node.index, node.total) : delay);
+        node.duration = +(isFnc(duration) ? duration($el, node.index, node.total) : duration);
+
+        let oldStateNode = oldState.nodes.get(id);
+
+        const hasNoOldState = !oldStateNode;
+
+        if (hasNoOldState) {
+          oldStateNode = cloneNodeProperties(node, /** @type {LayoutNode} */({}), oldState);
+          oldState.nodes.set(id, oldStateNode);
+          oldStateNode.measuredIsRemoved = true;
+        } else if (oldStateNode.measuredIsRemoved && !node.measuredIsRemoved) {
+          cloneNodeProperties(node, oldStateNode, oldState);
+          oldStateNode.measuredIsRemoved = true;
+        }
+
+        const oldParentNode = oldStateNode.parentNode;
+        const oldParentId = oldParentNode ? oldParentNode.id : null;
+        const newParentId = parent ? parent.id : null;
+        const parentChanged = oldParentId !== newParentId;
+        const elementChanged = oldStateNode.$el !== node.$el;
+        const wasRemovedBefore = oldStateNode.measuredIsRemoved;
+        const isRemovedNow = node.measuredIsRemoved;
+
+        // Recalculate postion relative to their parent for elements that have been moved
+        if (!oldStateNode.measuredIsRemoved && !isRemovedNow && !hasNoOldState && (parentChanged || elementChanged)) {
+          let offsetX = 0;
+          let offsetY = 0;
+          let current = node.parentNode;
+          while (current) {
+            offsetX += current.properties.x || 0;
+            offsetY += current.properties.y || 0;
+            if (current.parentNode === newState.rootNode) break;
+            current = current.parentNode;
+          }
+          let oldOffsetX = 0;
+          let oldOffsetY = 0;
+          let oldCurrent = oldStateNode.parentNode;
+          while (oldCurrent) {
+            oldOffsetX += oldCurrent.properties.x || 0;
+            oldOffsetY += oldCurrent.properties.y || 0;
+            if (oldCurrent.parentNode === oldState.rootNode) break;
+            oldCurrent = oldCurrent.parentNode;
+          }
+          oldStateNode.properties.x += oldOffsetX - offsetX;
+          oldStateNode.properties.y += oldOffsetY - offsetY;
+        }
+
+        if (node.hasVisibilitySwap) {
+          if (node.hasVisibilityHidden) {
+            node.$el.style.visibility = 'visible';
+            node.$measure.style.visibility = 'hidden';
+          }
+          if (node.hasDisplayNone) {
+            node.$el.style.display = oldStateNode.measuredDisplay || node.measuredDisplay || '';
+            // Setting visibility 'hidden' instead of display none to avoid calculation issues
+            node.$measure.style.visibility = 'hidden';
+            // @TODO: check why setting display here can cause calculation issues
+            // node.$measure.style.display = 'none';
+          }
+        }
+
+        const wasPendingRemoval = pendingRemoved.has($el);
+        const wasVisibleBefore = oldStateNode.measuredIsVisible;
+        const isVisibleNow = node.measuredIsVisible;
+        const becomeVisible = !wasVisibleBefore && isVisibleNow && !parentNotRendered;
+        const topLevelAdded = !isRemovedNow && (wasRemovedBefore || wasPendingRemoval) && !parentAdded;
+        const newlyRemoved = isRemovedNow && !wasRemovedBefore && !parentRemoved;
+        const topLevelRemoved = newlyRemoved || isRemovedNow && wasPendingRemoval && !parentRemoved;
+
+        if (node.measuredIsRemoved && wasVisibleBefore) {
+          node.$el.style.display = oldStateNode.measuredDisplay;
+          node.$el.style.visibility = 'visible';
+          cloneNodeProperties(oldStateNode, node, newState);
+        }
+
+        if (newlyRemoved) {
+          removed.push($el);
+          pendingRemoved.add($el);
+        } else if (!isRemovedNow && wasPendingRemoval) {
+          pendingRemoved.delete($el);
+        }
+
+        // Node is added
+        if ((topLevelAdded && !parentNotRendered) || becomeVisible) {
+          updateNodeProperties(oldStateNode, addedParams);
+          added.push($el);
+        // Node is removed
+        } else if (topLevelRemoved && !parentNotRendered) {
+          updateNodeProperties(node, removedParams);
+        }
+
+        // Compute function based propety values before cheking for changes
+        for (let name in node.properties) {
+          node.properties[name] = newState.getValue(node.$el, name);
+          // NOTE: I'm using node.$el to get the value of old state, make sure this is valid instead of oldStateNode.$el
+          oldStateNode.properties[name] = oldState.getValue(node.$el, name);
+        }
+
+        const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
+        let propertyChanged = false;
+
+
+        if (node.isTarget && (!node.measuredIsRemoved && wasVisibleBefore || node.measuredIsRemoved && isVisibleNow)) {
+          if (!node.isInlined && (node.properties.transform !== 'none' || oldStateNode.properties.transform !== 'none')) {
+            node.hasTransform = true;
+            propertyChanged = true;
+            transformed.push($el);
+          }
+          for (let name in node.properties) {
+            if (name !== 'transform' && (node.properties[name] !== oldStateNode.properties[name] || hiddenStateChanged)) {
+              propertyChanged = true;
+              animated.push($el);
+              break;
+            }
+          }
+        }
+
+        const nodeHasChanged = (propertyChanged || topLevelAdded || topLevelRemoved || becomeVisible);
+        const nodeIsAnimated = node.isTarget && nodeHasChanged;
+
+        node.isAnimated = nodeIsAnimated;
+        node.branchAdded = parentAdded || topLevelAdded;
+        node.branchRemoved = parentRemoved || topLevelRemoved;
+        node.branchNotRendered = parentNotRendered || node.measuredIsRemoved;
+
+        const sizeTolerance = 1;
+        const widthChanged = Math.abs(node.properties.width - oldStateNode.properties.width) > sizeTolerance;
+        const heightChanged = Math.abs(node.properties.height - oldStateNode.properties.height) > sizeTolerance;
+
+        node.sizeChanged = (widthChanged || heightChanged);
+
+        targets.push($el);
+
+        if (!node.isTarget) {
+          frozen.push($el);
+          if ((nodeHasChanged || node.sizeChanged) && parent && parent.isTarget && parent.isAnimated && parent.sizeChanged) {
+            animatedFrozen.push($el);
+          }
+        }
+      });
+
+      const defaults = {
+        ease: setValue(params.ease, this.ease),
+        duration: (/** @type {HTMLElement} */$el) => newState.nodes.get($el.dataset.layoutId).duration,
+        delay: (/** @type {HTMLElement} */$el) => newState.nodes.get($el.dataset.layoutId).delay,
+      };
+
+      this.timeline = createTimeline({
+        onComplete: () => {
+          // Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
+          if (this.transformAnimation) this.transformAnimation.cancel();
+          newState.forEachRootNode(node => {
+            restoreNodeVisualState(node);
+            restoreNodeInlineStyles(node);
           });
-          clones.push($clone);
+          for (let i = 0, l = transformed.length; i < l; i++) {
+            const $el = transformed[i];
+            $el.style.transform = newState.getValue($el, 'transform');
+          }
+          this.root.classList.remove('is-animated');
+          if (onComplete) onComplete(this);
+          // Avoid CSS transitions at the end of the animation by restoring them on the next frame
+          requestAnimationFrame(() => {
+            if (this.root.classList.contains('is-animated')) return;
+            restoreLayoutTransition(this.transitionMuteStore);
+          });
+        },
+        onPause: () => {
+          if (this.transformAnimation) this.transformAnimation.cancel();
+          newState.forEachRootNode(restoreNodeVisualState);
+          this.root.classList.remove('is-animated');
+          if (onComplete) onComplete(this);
+        },
+        composition: false,
+        defaults,
+      });
+
+      if (targets.length) {
+
+        this.root.classList.add('is-animated');
+
+        for (let i = 0, l = targets.length; i < l; i++) {
+          const $el = targets[i];
+          const id = $el.dataset.layoutId;
+          const oldNode = oldState.nodes.get(id);
+          const newNode = newState.nodes.get(id);
+          const oldNodeState = oldNode.properties;
+
+          // Make sure to mute all CSS transition before applying the oldState styles back
+          muteNodeTransition(newNode);
+
+          // Don't animate dimensions and positions of inlined elements
+          if (!newNode.isInlined) {
+            // Display grid can mess with the absolute positioning, so set it to block during transition
+            // if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.display = 'block';
+            $el.style.display = 'block';
+            // All children must be in position absolue
+            if ($el !== root || this.absoluteCoords) {
+              $el.style.position = this.absoluteCoords ? 'fixed' : 'absolute';
+              $el.style.left = '0px';
+              $el.style.top = '0px';
+              $el.style.marginLeft = '0px';
+              $el.style.marginTop = '0px';
+              $el.style.translate = `${oldNodeState.x}px ${oldNodeState.y}px`;
+            }
+            if ($el === root && newNode.measuredPosition === 'static') {
+              $el.style.position = 'relative';
+              // Cancel left / trop in case the static element had muted values now activated by potision relative
+              $el.style.left = '0px';
+              $el.style.top = '0px';
+            }
+            $el.style.width = `${oldNodeState.width}px`;
+            $el.style.height = `${oldNodeState.height}px`;
+            // Overrides user defined min and max to prevents width and height clamping
+            $el.style.minWidth = `auto`;
+            $el.style.minHeight = `auto`;
+            $el.style.maxWidth = `none`;
+            $el.style.maxHeight = `none`;
+          }
         }
-        parents.forEach(filterEmptyElements);
-        for (let cloneIndex = 0, clonesLength = clones.length; cloneIndex < clonesLength; cloneIndex++) {
-          processHTMLTemplate(lineTemplate, this.lines, clones[cloneIndex], linesFragment, lineType, this.debug, cloneIndex);
+
+        // Restore the scroll position if the oldState differs from the current state
+        if (oldState.scrollX !== window.scrollX || oldState.scrollY !== window.scrollY) {
+          // Restoring in the next frame avoids race conditions if for example a waapi animation commit styles that affect the root height
+          requestAnimationFrame(() => {
+            window.scrollTo(oldState.scrollX, oldState.scrollY);
+          });
         }
-        $el.innerHTML = '';
-        $el.appendChild(linesFragment);
-        if (wordTemplate) this.words = getAllTopLevelElements($el, wordType);
-        if (charTemplate) this.chars = getAllTopLevelElements($el, charType);
-      }
-      // Remove the word wrappers and clear the words array if lines split only
-      if (this.linesOnly) {
-        const words = this.words;
-        let w = words.length;
-        while (w--) {
-          const $word = words[w];
-          $word.replaceWith($word.textContent);
+
+        for (let i = 0, l = animated.length; i < l; i++) {
+          const $el = animated[i];
+          const id = $el.dataset.layoutId;
+          const oldNode = oldState.nodes.get(id);
+          const newNode = newState.nodes.get(id);
+          const oldNodeState = oldNode.properties;
+          const newNodeState = newNode.properties;
+          let hasChanged = false;
+          const animatedProps = {
+            composition: 'none',
+            // delay: (/** @type {HTMLElement} */$el) => newState.nodes.get($el.dataset.layoutId).delay,
+          };
+          if (!newNode.isInlined) {
+            if (oldNodeState.width !== newNodeState.width) {
+              animatedProps.width = [oldNodeState.width, newNodeState.width];
+              hasChanged = true;
+            }
+            if (oldNodeState.height !== newNodeState.height) {
+              animatedProps.height = [oldNodeState.height, newNodeState.height];
+              hasChanged = true;
+            }
+            // If the node has transforms we handle the translate animation in wappi otherwise translate and other transforms can be out of sync
+            // Always animate translate
+            if (!newNode.hasTransform) {
+              animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
+              hasChanged = true;
+            }
+          }
+          this.properties.forEach(prop => {
+            const oldVal = oldNodeState[prop];
+            const newVal = newNodeState[prop];
+            if (prop !== 'transform' && oldVal !== newVal) {
+              animatedProps[prop] = [oldVal, newVal];
+              hasChanged = true;
+            }
+          });
+          if (hasChanged) {
+            this.timeline.add($el, animatedProps, 0);
+          }
         }
-        words.length = 0;
+
       }
-      if (this.accessible && (canSplitLines || !isCached)) {
-        const $accessible = doc.createElement('span');
-        // Make the accessible element visually-hidden (https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html)
-        $accessible.style.cssText = `position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap;`;
-        // $accessible.setAttribute('tabindex', '-1');
-        $accessible.innerHTML = this.html;
-        $el.insertBefore($accessible, $el.firstChild);
-        this.lines.forEach(setAriaHidden);
-        this.words.forEach(setAriaHidden);
-        this.chars.forEach(setAriaHidden);
+
+      if (frozen.length) {
+
+        for (let i = 0, l = frozen.length; i < l; i++) {
+          const $el = frozen[i];
+          const oldNode = oldState.nodes.get($el.dataset.layoutId);
+          if (!oldNode.isInlined) {
+            const oldNodeState = oldState.get($el);
+            $el.style.width = `${oldNodeState.width}px`;
+            $el.style.height = `${oldNodeState.height}px`;
+            // Overrides user defined min and max to prevents width and height clamping
+            $el.style.minWidth = `auto`;
+            $el.style.minHeight = `auto`;
+            $el.style.maxWidth = `none`;
+            $el.style.maxHeight = `none`;
+            $el.style.translate = `${oldNodeState.x}px ${oldNodeState.y}px`;
+          }
+          this.properties.forEach(prop => {
+            if (prop !== 'transform') {
+              $el.style[prop] = `${oldState.getValue($el, prop)}`;
+            }
+          });
+        }
+
+        for (let i = 0, l = frozen.length; i < l; i++) {
+          const $el = frozen[i];
+          const newNode = newState.nodes.get($el.dataset.layoutId);
+          const newNodeState = newState.get($el);
+          this.timeline.call(() => {
+            if (!newNode.isInlined) {
+              $el.style.width = `${newNodeState.width}px`;
+              $el.style.height = `${newNodeState.height}px`;
+              // Overrides user defined min and max to prevents width and height clamping
+              $el.style.minWidth = `auto`;
+              $el.style.minHeight = `auto`;
+              $el.style.maxWidth = `none`;
+              $el.style.maxHeight = `none`;
+              $el.style.translate = `${newNodeState.x}px ${newNodeState.y}px`;
+            }
+            this.properties.forEach(prop => {
+              if (prop !== 'transform') {
+                $el.style[prop] = `${newState.getValue($el, prop)}`;
+              }
+            });
+          }, newNode.delay + newNode.duration / 2);
+        }
+
+        if (animatedFrozen.length) {
+          const animatedFrozenParams = /** @type {AnimationParams} */({});
+          if (frozenParams) {
+            for (let prop in frozenParams) {
+              animatedFrozenParams[prop] = [
+                { from: (/** @type {HTMLElement} */$el) => oldState.getValue($el, prop), ease: 'in(1.75)', to: frozenParams[prop] },
+                { from: frozenParams[prop], to: (/** @type {HTMLElement} */$el) => newState.getValue($el, prop), ease: 'out(1.75)' }
+              ];
+            }
+          }
+          this.timeline.add(animatedFrozen, animatedFrozenParams, 0);
+        }
+
       }
-      this.width = /** @type {HTMLElement} */($el).offsetWidth;
-      if (canSplitLines || clearCache) {
-        this.effects.forEach((effect, i) => this.effectsCleanups[i] = effect(this));
+
+      const transformedLength = transformed.length;
+
+      if (transformedLength) {
+        // We only need to set the transform property here since translate is alread defined the targets loop
+        for (let i = 0; i < transformedLength; i++) {
+          const $el = transformed[i];
+          $el.style.translate = `${oldState.get($el).x}px ${oldState.get($el).y}px`,
+          $el.style.transform = oldState.getValue($el, 'transform');
+        }
+        this.transformAnimation = waapi.animate(transformed, {
+          translate: (/** @type {HTMLElement} */$el) => `${newState.get($el).x}px ${newState.get($el).y}px`,
+          transform: (/** @type {HTMLElement} */$el) => newState.getValue($el, 'transform'),
+          autoplay: false,
+          persist: true,
+          ...defaults,
+        });
+        this.timeline.sync(this.transformAnimation, 0);
       }
-      return this;
+
+      return this.timeline.init();
     }
 
-    refresh() {
-      this.split(true);
+    /**
+     * @param {(layout: this) => void} callback
+     * @param {LayoutAnimationParams} [params]
+     * @return {this}
+     */
+    update(callback, params = {}) {
+      this.record();
+      callback(this);
+      this.animate(params);
+      return this;
     }
   }
 
   /**
-   * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
-   * @param  {TextSplitterParams} [parameters]
-   * @return {TextSplitter}
+   * @param {DOMTargetSelector} root
+   * @param {AutoLayoutParams} [params]
+   * @return {AutoLayout}
    */
-  const splitText = (target, parameters) => new TextSplitter(target, parameters);
+  const createLayout = (root, params) => new AutoLayout(root, params);
+
+  // Chain-able utilities
+
+  const numberUtils = numberImports; // Needed to keep the import when bundling
+
+  const chainables = {};
 
   /**
-   * @deprecated text.split() is deprecated, import splitText() directly, or text.splitText()
+   * @callback UtilityFunction
+   * @param {...*} args
+   * @return {Number|String}
    *
-   * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
-   * @param  {TextSplitterParams} [parameters]
-   * @return {TextSplitter}
+   * @param {UtilityFunction} fn
+   * @param {Number} [last=0]
+   * @return {function(...(Number|String)): function(Number|String): (Number|String)}
    */
-  const split = (target, parameters) => {
-    console.warn('text.split() is deprecated, import splitText() directly, or text.splitText()');
-    return new TextSplitter(target, parameters);
+  const curry = (fn, last = 0) => (...args) => last ? v => fn(...args, v) : v => fn(v, ...args);
+
+  /**
+   * @param {Function} fn
+   * @return {function(...(Number|String))}
+   */
+  const chain = fn => {
+     return (...args) => {
+      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));
+        })
+      });
+    }
   };
 
-  var index = /*#__PURE__*/Object.freeze({
+  /**
+   * @param {UtilityFunction} fn
+   * @param {String} name
+   * @param {Number} [right]
+   * @return {function(...(Number|String)): UtilityFunction}
+   */
+  const makeChainable = (name, fn, right = 0) => {
+    const chained = (...args) => (args.length < fn.length ? chain(curry(fn, right)) : fn)(...args);
+    if (!chainables[name]) chainables[name] = chained;
+    return chained;
+  };
+
+  /**
+   * @typedef {Object} ChainablesMap
+   * @property {ChainedClamp} clamp
+   * @property {ChainedRound} round
+   * @property {ChainedSnap} snap
+   * @property {ChainedWrap} wrap
+   * @property {ChainedLerp} lerp
+   * @property {ChainedDamp} damp
+   * @property {ChainedMapRange} mapRange
+   * @property {ChainedRoundPad} roundPad
+   * @property {ChainedPadStart} padStart
+   * @property {ChainedPadEnd} padEnd
+   * @property {ChainedDegToRad} degToRad
+   * @property {ChainedRadToDeg} radToDeg
+   */
+
+  /**
+   * @callback ChainedUtilsResult
+   * @param {Number} value - The value to process through the chained operations
+   * @return {Number} The processed result
+   */
+
+  /**
+   * @typedef {ChainablesMap & ChainedUtilsResult} ChainableUtil
+   */
+
+  // Chainable
+
+  /**
+   * @callback ChainedRoundPad
+   * @param {Number} decimalLength - Number of decimal places
+   * @return {ChainableUtil}
+   */
+  const roundPad = /** @type {typeof numberUtils.roundPad & ChainedRoundPad} */(makeChainable('roundPad', numberUtils.roundPad));
+
+  /**
+   * @callback ChainedPadStart
+   * @param {Number} totalLength - Target length
+   * @param {String} padString - String to pad with
+   * @return {ChainableUtil}
+   */
+  const padStart = /** @type {typeof numberUtils.padStart & ChainedPadStart} */(makeChainable('padStart', numberUtils.padStart));
+
+  /**
+   * @callback ChainedPadEnd
+   * @param {Number} totalLength - Target length
+   * @param {String} padString - String to pad with
+   * @return {ChainableUtil}
+   */
+  const padEnd = /** @type {typeof numberUtils.padEnd & ChainedPadEnd} */(makeChainable('padEnd', numberUtils.padEnd));
+
+  /**
+   * @callback ChainedWrap
+   * @param {Number} min - Minimum boundary
+   * @param {Number} max - Maximum boundary
+   * @return {ChainableUtil}
+   */
+  const wrap = /** @type {typeof numberUtils.wrap & ChainedWrap} */(makeChainable('wrap', numberUtils.wrap));
+
+  /**
+   * @callback ChainedMapRange
+   * @param {Number} inLow - Input range minimum
+   * @param {Number} inHigh - Input range maximum
+   * @param {Number} outLow - Output range minimum
+   * @param {Number} outHigh - Output range maximum
+   * @return {ChainableUtil}
+   */
+  const mapRange = /** @type {typeof numberUtils.mapRange & ChainedMapRange} */(makeChainable('mapRange', numberUtils.mapRange));
+
+  /**
+   * @callback ChainedDegToRad
+   * @return {ChainableUtil}
+   */
+  const degToRad = /** @type {typeof numberUtils.degToRad & ChainedDegToRad} */(makeChainable('degToRad', numberUtils.degToRad));
+
+  /**
+   * @callback ChainedRadToDeg
+   * @return {ChainableUtil}
+   */
+  const radToDeg = /** @type {typeof numberUtils.radToDeg & ChainedRadToDeg} */(makeChainable('radToDeg', numberUtils.radToDeg));
+
+  /**
+   * @callback ChainedSnap
+   * @param {Number|Array<Number>} increment - Step size or array of snap points
+   * @return {ChainableUtil}
+   */
+  const snap = /** @type {typeof numberUtils.snap & ChainedSnap} */(makeChainable('snap', numberUtils.snap));
+
+  /**
+   * @callback ChainedClamp
+   * @param {Number} min - Minimum boundary
+   * @param {Number} max - Maximum boundary
+   * @return {ChainableUtil}
+   */
+  const clamp = /** @type {typeof numberUtils.clamp & ChainedClamp} */(makeChainable('clamp', numberUtils.clamp));
+
+  /**
+   * @callback ChainedRound
+   * @param {Number} decimalLength - Number of decimal places
+   * @return {ChainableUtil}
+   */
+  const round = /** @type {typeof numberUtils.round & ChainedRound} */(makeChainable('round', numberUtils.round));
+
+  /**
+   * @callback ChainedLerp
+   * @param {Number} start - Starting value
+   * @param {Number} end - Ending value
+   * @return {ChainableUtil}
+   */
+  const lerp = /** @type {typeof numberUtils.lerp & ChainedLerp} */(makeChainable('lerp', numberUtils.lerp, 1));
+
+  /**
+   * @callback ChainedDamp
+   * @param {Number} start - Starting value
+   * @param {Number} end - Target value
+   * @param {Number} deltaTime - Delta time in ms
+   * @return {ChainableUtil}
+   */
+  const damp = /** @type {typeof numberUtils.damp & ChainedDamp} */(makeChainable('damp', numberUtils.damp, 1));
+
+  /**
+   * Generate a random number between optional min and max (inclusive) and decimal precision
+   *
+   * @callback RandomNumberGenerator
+   * @param    {Number} [min=0] - The minimum value (inclusive)
+   * @param    {Number} [max=1] - The maximum value (inclusive)
+   * @param    {Number} [decimalLength=0] - Number of decimal places to round to
+   * @return   {Number} A random number between min and max
+   */
+
+  /**
+   * Generates a random number between min and max (inclusive) with optional decimal precision
+   *
+   * @type {RandomNumberGenerator}
+   */
+  const random = (min = 0, max = 1, decimalLength = 0) => {
+    const m = 10 ** decimalLength;
+    return Math.floor((Math.random() * (max - min + (1 / m)) + min) * m) / m;
+  };
+
+  let _seed = 0;
+
+  /**
+   * Creates a seeded pseudorandom number generator function
+   *
+   * @param  {Number} [seed] - The seed value for the random number generator
+   * @param  {Number} [seededMin=0] - The minimum default value (inclusive) of the returned function
+   * @param  {Number} [seededMax=1] - The maximum default value (inclusive) of the returned function
+   * @param  {Number} [seededDecimalLength=0] - Default number of decimal places to round to of the returned function
+   * @return {RandomNumberGenerator} A function to generate a random number between optional min and max (inclusive) and decimal precision
+   */
+  const createSeededRandom = (seed, seededMin = 0, seededMax = 1, seededDecimalLength = 0) => {
+    let t = seed === undefined ? _seed++ : seed;
+    return (min = seededMin, max = seededMax, decimalLength = seededDecimalLength) => {
+      t += 0x6D2B79F5;
+      t = Math.imul(t ^ t >>> 15, t | 1);
+      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+      const m = 10 ** decimalLength;
+      return Math.floor(((((t ^ t >>> 14) >>> 0) / 4294967296) * (max - min + (1 / m)) + min) * m) / m;
+    }
+  };
+
+  /**
+   * Picks a random element from an array or a string
+   *
+   * @template T
+   * @param    {String|Array<T>} items - The array or string to pick from
+   * @return   {String|T} A random element from the array or character from the string
+   */
+  const randomPick = items => items[random(0, items.length - 1)];
+
+  /**
+   * Shuffles an array in-place using the Fisher-Yates algorithm
+   * Adapted from https://bost.ocks.org/mike/shuffle/
+   *
+   * @param  {Array} items - The array to shuffle (will be modified in-place)
+   * @return {Array} The same array reference, now shuffled
+   */
+  const shuffle = items => {
+    let m = items.length, t, i;
+    while (m) { i = random(0, --m); t = items[m]; items[m] = items[i]; items[i] = t; }
+    return items;
+  };
+
+  
+
+  
+
+  /**
+   * @overload
+   * @param {Number} val
+   * @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
+   * @return {StaggerFunction<Number|String>}
+   */
+  const stagger = (val, params = {}) => {
+    let values = [];
+    let maxValue = 0;
+    const from = params.from;
+    const reversed = params.reversed;
+    const ease = params.ease;
+    const hasEasing = !isUnd(ease);
+    const hasSpring = hasEasing && !isUnd(/** @type {Spring} */(ease).ease);
+    const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? parseEase(ease) : null;
+    const grid = params.grid;
+    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 isRange = isArr(val);
+    const useProp = params.use;
+    const val1 = isRange ? parseNumber(val[0]) : parseNumber(val);
+    const val2 = isRange ? parseNumber(val[1]) : 0;
+    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) => {
+      const [ registeredTarget ] = registerTargets(target);
+      const total = isUnd(customTotal) ? t : 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));
+          } 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);
+          }
+          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);
+      /** @type {String|Number} */
+      let output = offset + ((spacing * round$1(values[staggerIndex], 2)) || 0);
+      if (params.modifier) output = params.modifier(output);
+      if (unitMatch) output = `${output}${unitMatch[2]}`;
+      return output;
+    }
+  };
+
+  var index$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    TextSplitter: TextSplitter,
-    split: split,
-    splitText: splitText
+    $: registerTargets,
+    clamp: clamp,
+    cleanInlineStyles: cleanInlineStyles,
+    createSeededRandom: createSeededRandom,
+    damp: damp,
+    degToRad: degToRad,
+    get: get,
+    keepTime: keepTime,
+    lerp: lerp,
+    mapRange: mapRange,
+    padEnd: padEnd,
+    padStart: padStart,
+    radToDeg: radToDeg,
+    random: random,
+    randomPick: randomPick,
+    remove: remove,
+    round: round,
+    roundPad: roundPad,
+    set: set,
+    shuffle: shuffle,
+    snap: snap,
+    stagger: stagger,
+    sync: sync,
+    wrap: wrap
   });
 
   
 
-  
-
-  
-
-  /**
-   * Converts an easing function into a valid CSS linear() timing function string
-   * @param {EasingFunction} fn
-   * @param {number} [samples=100]
-   * @returns {string} CSS linear() timing function
-   */
-  const easingToLinear = (fn, samples = 100) => {
-    const points = [];
-    for (let i = 0; i <= samples; i++) points.push(round$1(fn(i / samples), 4));
-    return `linear(${points.join(', ')})`;
-  };
-
-  const WAAPIEasesLookups = {};
-
   /**
-   * @param  {EasingParam} ease
-   * @return {String}
+   * @param  {TargetsParam} path
+   * @return {SVGGeometryElement|void}
    */
-  const parseWAAPIEasing = (ease) => {
-    let parsedEase = WAAPIEasesLookups[ease];
-    if (parsedEase) return parsedEase;
-    parsedEase = 'linear';
-    if (isStr(ease)) {
-      if (
-        stringStartsWith(ease, 'linear') ||
-        stringStartsWith(ease, 'cubic-') ||
-        stringStartsWith(ease, 'steps') ||
-        stringStartsWith(ease, 'ease')
-      ) {
-        parsedEase = ease;
-      } else if (stringStartsWith(ease, 'cubicB')) {
-        parsedEase = toLowerCase(ease);
-      } else {
-        const parsed = parseEaseString(ease);
-        if (isFnc(parsed)) parsedEase = parsed === none ? 'linear' : easingToLinear(parsed);
-      }
-      // Only cache string based easing name, otherwise function arguments get lost
-      WAAPIEasesLookups[ease] = parsedEase;
-    } else if (isFnc(ease)) {
-      const easing = easingToLinear(ease);
-      if (easing) parsedEase = easing;
-    } else if (/** @type {Spring} */(ease).ease) {
-      parsedEase = easingToLinear(/** @type {Spring} */(ease).ease);
-    }
-    return parsedEase;
+  const getPath = path => {
+    const parsedTargets = parseTargets(path);
+    const $parsedSvg = /** @type {SVGGeometryElement} */(parsedTargets[0]);
+    if (!$parsedSvg || !isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
+    return $parsedSvg;
   };
 
-  const transformsShorthands = ['x', 'y', 'z'];
-  const commonDefaultPXProperties = [
-    'perspective',
-    'width',
-    'height',
-    'margin',
-    'padding',
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'borderWidth',
-    'fontSize',
-    'borderRadius',
-    ...transformsShorthands
-  ];
-
-  const validIndividualTransforms = /*#__PURE__*/ (() => [...transformsShorthands, ...validTransforms.filter(t => ['X', 'Y', 'Z'].some(axis => t.endsWith(axis)))])();
+  
 
-  let transformsPropertiesRegistered = null;
+  // Motion path animation
 
   /**
-   * @param  {String} propName
-   * @param  {WAAPIKeyframeValue} value
-   * @param  {DOMTarget} $el
-   * @param  {Number} i
-   * @param  {Number} targetsLength
-   * @return {String}
+   * @param {SVGGeometryElement} $path
+   * @param {Number} totalLength
+   * @param {Number} progress
+   * @param {Number} lookup
+   * @param {Boolean} shouldClamp
+   * @return {DOMPoint}
    */
-  const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
-    // 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);
-    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`;
-    return `${v}`;
+  const getPathPoint = ($path, totalLength, progress, lookup, shouldClamp) => {
+    const point = progress + lookup;
+    const pointOnPath = shouldClamp
+      ? Math.max(0, Math.min(point, totalLength)) // Clamp between 0 and totalLength
+      : (point % totalLength + totalLength) % totalLength; // Wrap around
+    return $path.getPointAtLength(pointOnPath);
   };
 
   /**
-   * @param  {DOMTarget} $el
-   * @param  {String} propName
-   * @param  {WAAPIKeyframeValue} from
-   * @param  {WAAPIKeyframeValue} to
-   * @param  {Number} i
-   * @param  {Number} targetsLength
-   * @return {WAAPITweenValue}
+   * @param {SVGGeometryElement} $path
+   * @param {String} pathProperty
+   * @param {Number} [offset=0]
+   * @return {FunctionValue}
    */
-  const parseIndividualTweenValue = ($el, propName, from, to, i, targetsLength) => {
-    /** @type {WAAPITweenValue} */
-    let tweenValue = '0';
-    const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, targetsLength) : getComputedStyle($el)[propName];
-    if (!isUnd(from)) {
-      const computedFrom = normalizeTweenValue(propName, from, $el, i, targetsLength);
-      tweenValue = [computedFrom, computedTo];
-    } else {
-      tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, targetsLength)) : computedTo;
+  const getPathProgess = ($path, pathProperty, offset = 0) => {
+    return $el => {
+      const totalLength = +($path.getTotalLength());
+      const inSvg = $el[isSvgSymbol];
+      const ctm = $path.getCTM();
+      const shouldClamp = offset === 0;
+      /** @type {TweenObjectValue} */
+      return {
+        from: 0,
+        to: totalLength,
+        /** @type {TweenModifier} */
+        modifier: progress => {
+          const offsetLength = offset * totalLength;
+          const newProgress = progress + offsetLength;
+          if (pathProperty === 'a') {
+            const p0 = getPathPoint($path, totalLength, newProgress, -1, shouldClamp);
+            const p1 = getPathPoint($path, totalLength, newProgress, 1, shouldClamp);
+            return atan2(p1.y - p0.y, p1.x - p0.x) * 180 / PI;
+          } else {
+            const p = getPathPoint($path, totalLength, newProgress, 0, shouldClamp);
+            return pathProperty === 'x' ?
+              inSvg || !ctm ? p.x : p.x * ctm.a + p.y * ctm.c + ctm.e :
+              inSvg || !ctm ? p.y : p.x * ctm.b + p.y * ctm.d + ctm.f
+          }
+        }
+      }
     }
-    return tweenValue;
   };
 
-  class WAAPIAnimation {
   /**
-   * @param {DOMTargetsParam} targets
-   * @param {WAAPIAnimationParams} params
+   * @param {TargetsParam} path
+   * @param {Number} [offset=0]
    */
-    constructor(targets, params) {
-
-      if (scope.current) scope.current.register(this);
-
-      // Skip the registration and fallback to no animation in case CSS.registerProperty is not supported
-      if (isNil(transformsPropertiesRegistered)) {
-        if (isBrowser && (isUnd(CSS) || !Object.hasOwnProperty.call(CSS, 'registerProperty'))) {
-          transformsPropertiesRegistered = false;
-        } else {
-          validTransforms.forEach(t => {
-            const isSkew = stringStartsWith(t, 'skew');
-            const isScale = stringStartsWith(t, 'scale');
-            const isRotate = stringStartsWith(t, 'rotate');
-            const isTranslate = stringStartsWith(t, 'translate');
-            const isAngle = isRotate || isSkew;
-            const syntax = isAngle ? '<angle>' : isScale ? "<number>" : isTranslate ? "<length-percentage>" : "*";
-            try {
-              CSS.registerProperty({
-                name: '--' + t,
-                syntax,
-                inherits: false,
-                initialValue: isTranslate ? '0px' : isAngle ? '0deg' : isScale ? '1' : '0',
-              });
-            } catch {}        });
-          transformsPropertiesRegistered = true;
-        }
-      }
-
-      const parsedTargets = registerTargets(targets);
-      const targetsLength = parsedTargets.length;
-
-      if (!targetsLength) {
-        console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
-      }
-
-      const ease = setValue(params.ease, parseWAAPIEasing(globals.defaults.ease));
-      const spring = /** @type {Spring} */(ease).ease && ease;
-      const autoplay = setValue(params.autoplay, globals.defaults.autoplay);
-      const scroll = autoplay && /** @type {ScrollObserver} */(autoplay).link ? autoplay : false;
-      const alternate = params.alternate && /** @type {Boolean} */(params.alternate) === true;
-      const reversed = params.reversed && /** @type {Boolean} */(params.reversed) === true;
-      const loop = setValue(params.loop, globals.defaults.loop);
-      const iterations = /** @type {Number} */((loop === true || loop === Infinity) ? Infinity : isNum(loop) ? loop + 1 : 1);
-      /** @type {PlaybackDirection} */
-      const direction = alternate ? reversed ? 'alternate-reverse' : 'alternate' : reversed ? 'reverse' : 'normal';
-      /** @type {FillMode} */
-      const fill = 'both'; // We use 'both' here because the animation can be reversed during playback
-      /** @type {String} */
-      const easing = parseWAAPIEasing(ease);
-      const timeScale = (globals.timeScale === 1 ? 1 : K);
-
-      /** @type {DOMTargetsArray}] */
-      this.targets = parsedTargets;
-      /** @type {Array<globalThis.Animation>}] */
-      this.animations = [];
-      /** @type {globalThis.Animation}] */
-      this.controlAnimation = null;
-      /** @type {Callback<this>} */
-      this.onComplete = params.onComplete || /** @type {Callback<WAAPIAnimation>} */(/** @type {unknown} */(globals.defaults.onComplete));
-      /** @type {Number} */
-      this.duration = 0;
-      /** @type {Boolean} */
-      this.muteCallbacks = false;
-      /** @type {Boolean} */
-      this.completed = false;
-      /** @type {Boolean} */
-      this.paused = !autoplay || scroll !== false;
-      /** @type {Boolean} */
-      this.reversed = reversed;
-      /** @type {Boolean} */
-      this.persist = setValue(params.persist, globals.defaults.persist);
-      /** @type {Boolean|ScrollObserver} */
-      this.autoplay = autoplay;
-      /** @type {Number} */
-      this._speed = setValue(params.playbackRate, globals.defaults.playbackRate);
-      /** @type {Function} */
-      this._resolve = noop; // Used by .then()
-      /** @type {Number} */
-      this._completed = 0;
-      /** @type {Array.<Object>} */
-      this._inlineStyles = [];
-
-      parsedTargets.forEach(($el, i) => {
-
-        const cachedTransforms = $el[transformsSymbol];
-        const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
-        const elStyle = $el.style;
-        const inlineStyles = this._inlineStyles[i] = {};
+  const createMotionPath = (path, offset = 0) => {
+    const $path = getPath(path);
+    if (!$path) return;
+    return {
+      translateX: getPathProgess($path, 'x', offset),
+      translateY: getPathProgess($path, 'y', offset),
+      rotate: getPathProgess($path, 'a', offset),
+    }
+  };
 
-        /** @type {Number} */
-        const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
-        /** @type {Number} */
-        const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, targetsLength) * timeScale;
-        /** @type {CompositeOperation} */
-        const composite = /** @type {CompositeOperation} */(setValue(params.composition, 'replace'));
+  
 
-        for (let name in params) {
-          if (!isKey(name)) continue;
-          /** @type {PropertyIndexedKeyframes} */
-          const keyframes = {};
-          /** @type {KeyframeAnimationOptions} */
-          const tweenParams = { iterations, direction, fill, easing, duration, delay, composite };
-          const propertyValue = params[name];
-          const individualTransformProperty = hasIndividualTransforms ? validTransforms.includes(name) ? name : shortTransforms.get(name) : false;
+  /**
+   * @param {SVGGeometryElement} [$el]
+   * @return {Number}
+   */
+  const getScaleFactor = $el => {
+    let scaleFactor = 1;
+    if ($el && $el.getCTM) {
+      const ctm = $el.getCTM();
+      if (ctm) {
+        const scaleX = sqrt(ctm.a * ctm.a + ctm.b * ctm.b);
+        const scaleY = sqrt(ctm.c * ctm.c + ctm.d * ctm.d);
+        scaleFactor = (scaleX + scaleY) / 2;
+      }
+    }
+    return scaleFactor;
+  };
 
-          const styleName = individualTransformProperty ? 'transform' : name;
-          if (!inlineStyles[styleName]) {
-            inlineStyles[styleName] = elStyle[styleName];
-          }
+  /**
+   * Creates a proxy that wraps an SVGGeometryElement and adds drawing functionality.
+   * @param {SVGGeometryElement} $el - The SVG element to transform into a drawable
+   * @param {number} start - Starting position (0-1)
+   * @param {number} end - Ending position (0-1)
+   * @return {DrawableSVGGeometry} - Returns a proxy that preserves the original element's type with additional 'draw' attribute functionality
+   */
+  const createDrawableProxy = ($el, start, end) => {
+    const pathLength = K;
+    const computedStyles = getComputedStyle($el);
+    const strokeLineCap = computedStyles.strokeLinecap;
+    // @ts-ignore
+    const $scalled = computedStyles.vectorEffect === 'non-scaling-stroke' ? $el : null;
+    let currentCap = strokeLineCap;
 
-          let parsedPropertyValue;
-          if (isObj(propertyValue)) {
-            const tweenOptions = /** @type {WAAPITweenOptions} */(propertyValue);
-            const tweenOptionsEase = setValue(tweenOptions.ease, ease);
-            const tweenOptionsSpring = /** @type {Spring} */(tweenOptionsEase).ease && tweenOptionsEase;
-            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;
-            /** @type {Number} */
-            tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, targetsLength) * 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);
-            if (individualTransformProperty) {
-              keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
-              cachedTransforms[individualTransformProperty] = parsedPropertyValue;
-            } else {
-              keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
-            }
-            addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
-            if (!isUnd(from)) {
-              if (!individualTransformProperty) {
-                elStyle[name] = keyframes[name][0];
-              } else {
-                const key = `--${individualTransformProperty}`;
-                elStyle.setProperty(key, keyframes[key][0]);
+    const proxy = new Proxy($el, {
+      get(target, property) {
+        const value = target[property];
+        if (property === proxyTargetSymbol) return target;
+        if (property === 'setAttribute') {
+          return (...args) => {
+            if (args[0] === 'draw') {
+              const value = args[1];
+              const values = value.split(' ');
+              const v1 = +values[0];
+              const v2 = +values[1];
+              // TOTO: Benchmark if performing two slices is more performant than one split
+              // const spaceIndex = value.indexOf(' ');
+              // const v1 = round(+value.slice(0, spaceIndex), precision);
+              // const v2 = round(+value.slice(spaceIndex + 1), precision);
+              const scaleFactor = getScaleFactor($scalled);
+              const os = v1 * -pathLength * scaleFactor;
+              const d1 = (v2 * pathLength * scaleFactor) + os;
+              const d2 = (pathLength * scaleFactor +
+                        ((v1 === 0 && v2 === 1) || (v1 === 1 && v2 === 0) ? 0 : 10 * scaleFactor) - d1);
+              if (strokeLineCap !== 'butt') {
+                const newCap = v1 === v2 ? 'butt' : strokeLineCap;
+                if (currentCap !== newCap) {
+                  target.style.strokeLinecap = `${newCap}`;
+                  currentCap = newCap;
+                }
               }
+              target.setAttribute('stroke-dashoffset', `${os}`);
+              target.setAttribute('stroke-dasharray', `${d1} ${d2}`);
             }
-          } else {
-            parsedPropertyValue = isArr(propertyValue) ?
-                                  propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, targetsLength)) :
-                                  normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, targetsLength);
-            if (individualTransformProperty) {
-              keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
-              cachedTransforms[individualTransformProperty] = parsedPropertyValue;
-            } else {
-              keyframes[name] = parsedPropertyValue;
-            }
-            addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
-          }
-        }
-        if (hasIndividualTransforms) {
-          let transforms = emptyString;
-          for (let t in cachedTransforms) {
-            transforms += `${transformsFragmentStrings[t]}var(--${t})) `;
-          }
-          elStyle.transform = transforms;
+            return Reflect.apply(value, target, args);
+          };
         }
-      });
 
-      if (scroll) {
-        /** @type {ScrollObserver} */(this.autoplay).link(this);
+        if (isFnc(value)) {
+          return (...args) => Reflect.apply(value, target, args);
+        } else {
+          return value;
+        }
       }
+    });
+
+    if ($el.getAttribute('pathLength') !== `${pathLength}`) {
+      $el.setAttribute('pathLength', `${pathLength}`);
+      proxy.setAttribute('draw', `${start} ${end}`);
     }
 
-    /**
-     * @callback forEachCallback
-     * @param {globalThis.Animation} animation
-     */
+    return /** @type {DrawableSVGGeometry} */(proxy);
+  };
 
-    /**
-     * @param  {forEachCallback|String} callback
-     * @return {this}
-     */
-    forEach(callback) {
-      const cb = isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
-      this.animations.forEach(cb);
-      return this;
-    }
+  /**
+   * Creates drawable proxies for multiple SVG elements.
+   * @param {TargetsParam} selector - CSS selector, SVG element, or array of elements and selectors
+   * @param {number} [start=0] - Starting position (0-1)
+   * @param {number} [end=0] - Ending position (0-1)
+   * @return {Array<DrawableSVGGeometry>} - Array of proxied elements with drawing functionality
+   */
+  const createDrawable = (selector, start = 0, end = 0) => {
+    const els = parseTargets(selector);
+    return els.map($el => createDrawableProxy(
+      /** @type {SVGGeometryElement} */($el),
+      start,
+      end
+    ));
+  };
 
-    get speed() {
-      return this._speed;
-    }
+  
 
-    set speed(speed) {
-      this._speed = +speed;
-      this.forEach(anim => anim.playbackRate = speed);
+  /**
+   * @param  {TargetsParam} path2
+   * @param  {Number} [precision]
+   * @return {FunctionValue}
+   */
+  const morphTo = (path2, precision = .33) => ($path1) => {
+    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>.`);
     }
-
-    get currentTime() {
-      const controlAnimation = this.controlAnimation;
-      const timeScale = globals.timeScale;
-      return this.completed ? this.duration : controlAnimation ? +controlAnimation.currentTime * (timeScale === 1 ? 1 : timeScale) : 0;
+    const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
+    if (!$path2) {
+      throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
+    }
+    const tagName2 = ($path2.tagName || '').toLowerCase();
+    if (!tagName2.match(/^(path|polygon|polyline)$/)) {
+      throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
     }
+    const isPath = $path1.tagName === 'path';
+    const separator = isPath ? ' ' : ',';
+    const previousPoints = $path1[morphPointsSymbol];
+    if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
 
-    set currentTime(time) {
-      const t = time * (globals.timeScale === 1 ? 1 : K);
-      this.forEach(anim => {
-        // Make sure the animation playState is not 'paused' in order to properly trigger an onfinish callback.
-        // The "paused" play state supersedes the "finished" play state; if the animation is both paused and finished, the "paused" state is the one that will be reported.
-        // https://developer.mozilla.org/en-US/docs/Web/API/Animation/finish_event
-        // This is not needed for persisting animations since they never finish.
-        if (!this.persist && t >= this.duration) anim.play();
-        anim.currentTime = t;
-      });
+    let v1 = '', v2 = '';
+
+    if (!precision) {
+      v1 = $path1.getAttribute(isPath ? 'd' : 'points');
+      v2 = $path2.getAttribute(isPath ? 'd' : 'points');
+    } else {
+      const length1 = /** @type {SVGGeometryElement} */($path1).getTotalLength();
+      const length2 = $path2.getTotalLength();
+      const maxPoints = Math.max(Math.ceil(length1 * precision), Math.ceil(length2 * precision));
+      for (let i = 0; i < maxPoints; i++) {
+        const t = i / (maxPoints - 1);
+        const pointOnPath1 = /** @type {SVGGeometryElement} */($path1).getPointAtLength(length1 * t);
+        const pointOnPath2 = $path2.getPointAtLength(length2 * t);
+        const prefix = isPath ? (i === 0 ? 'M' : 'L') : '';
+        v1 += prefix + round$1(pointOnPath1.x, 3) + separator + pointOnPath1.y + ' ';
+        v2 += prefix + round$1(pointOnPath2.x, 3) + separator + pointOnPath2.y + ' ';
+      }
     }
 
-    get progress() {
-      return this.currentTime / this.duration;
-    }
+    $path1[morphPointsSymbol] = v2;
+
+    return [v1, v2];
+  };
+
+  var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createDrawable: createDrawable,
+    createMotionPath: createMotionPath,
+    morphTo: morphTo
+  });
+
+  
+
+  const segmenter = (typeof Intl !== 'undefined') && Intl.Segmenter;
+  const valueRgx = /\{value\}/g;
+  const indexRgx = /\{i\}/g;
+  const whiteSpaceGroupRgx = /(\s+)/;
+  const whiteSpaceRgx = /^\s+$/;
+  const lineType = 'line';
+  const wordType = 'word';
+  const charType = 'char';
+  const dataLine = `data-line`;
+
+  /**
+   * @typedef {Object} Segment
+   * @property {String} segment
+   * @property {Boolean} [isWordLike]
+   */
 
-    set progress(progress) {
-      this.forEach(anim => anim.currentTime = progress * this.duration || 0);
-    }
+  /**
+   * @typedef {Object} Segmenter
+   * @property {function(String): Iterable<Segment>} segment
+   */
 
-    resume() {
-      if (!this.paused) return this;
-      this.paused = false;
-      // TODO: Store the current time, and seek back to the last position
-      return this.forEach('play');
-    }
+  /** @type {Segmenter} */
+  let wordSegmenter = null;
+  /** @type {Segmenter} */
+  let graphemeSegmenter = null;
+  let $splitTemplate = null;
 
-    pause() {
-      if (this.paused) return this;
-      this.paused = true;
-      return this.forEach('pause');
-    }
+  /**
+   * @param  {Segment} seg
+   * @return {Boolean}
+   */
+  const isSegmentWordLike = seg => {
+    return seg.isWordLike ||
+           seg.segment === ' ' || // Consider spaces as words first, then handle them diffrently later
+           isNum(+seg.segment);   // Safari doesn't considers numbers as words
+  };
 
-    alternate() {
-      this.reversed = !this.reversed;
-      this.forEach('reverse');
-      if (this.paused) this.forEach('pause');
-      return this;
-    }
+  /**
+   * @param {HTMLElement} $el
+   */
+  const setAriaHidden = $el => $el.setAttribute('aria-hidden', 'true');
 
-    play() {
-      if (this.reversed) this.alternate();
-      return this.resume();
-    }
+  /**
+   * @param {DOMTarget} $el
+   * @param {String} type
+   * @return {Array<HTMLElement>}
+   */
+  const getAllTopLevelElements = ($el, type) => [.../** @type {*} */($el.querySelectorAll(`[data-${type}]:not([data-${type}] [data-${type}])`))];
 
-    reverse() {
-      if (!this.reversed) this.alternate();
-      return this.resume();
+  const debugColors = { line: '#00D672', word: '#FF4B4B', char: '#5A87FF' };
+
+  /**
+   * @param {HTMLElement} $el
+   */
+  const filterEmptyElements = $el => {
+    if (!$el.childElementCount && !$el.textContent.trim()) {
+      const $parent = $el.parentElement;
+      $el.remove();
+      if ($parent) filterEmptyElements($parent);
     }
+  };
 
-   /**
-    * @param {Number} time
-    * @param {Boolean} muteCallbacks
-    */
-    seek(time, muteCallbacks = false) {
-      if (muteCallbacks) this.muteCallbacks = true;
-      if (time < this.duration) this.completed = false;
-      this.currentTime = time;
-      this.muteCallbacks = false;
-      if (this.paused) this.pause();
-      return this;
+  /**
+   * @param {HTMLElement} $el
+   * @param {Number} lineIndex
+   * @param {Set<HTMLElement|Node>} bin
+   * @returns {Set<HTMLElement|Node>}
+   */
+  const filterLineElements = ($el, lineIndex, bin) => {
+    const dataLineAttr = $el.getAttribute(dataLine);
+    if (dataLineAttr !== null && +dataLineAttr !== lineIndex || $el.tagName === 'BR') {
+      bin.add($el);
+      // Also remove adjacent whitespace-only text nodes
+      const prev = $el.previousSibling;
+      const next = $el.nextSibling;
+      if (prev && prev.nodeType === 3 && whiteSpaceRgx.test(prev.textContent)) {
+        bin.add(prev);
+      }
+      if (next && next.nodeType === 3 && whiteSpaceRgx.test(next.textContent)) {
+        bin.add(next);
+      }
     }
+    let i = $el.childElementCount;
+    while (i--) filterLineElements(/** @type {HTMLElement} */($el.children[i]), lineIndex, bin);
+    return bin;
+  };
 
-    restart() {
-      this.completed = false;
-      return this.seek(0, true).resume();
+  /**
+   * @param  {'line'|'word'|'char'} type
+   * @param  {SplitTemplateParams} params
+   * @return {String}
+   */
+  const generateTemplate = (type, params = {}) => {
+    let template = ``;
+    const classString = isStr(params.class) ? ` class="${params.class}"` : '';
+    const cloneType = setValue(params.clone, false);
+    const wrapType = setValue(params.wrap, false);
+    const overflow = wrapType ? wrapType === true ? 'clip' : wrapType : cloneType ? 'clip' : false;
+    if (wrapType) template += `<span${overflow ? ` style="overflow:${overflow};"` : ''}>`;
+    template += `<span${classString}${cloneType ? ` style="position:relative;"` : ''} data-${type}="{i}">`;
+    if (cloneType) {
+      const left = cloneType === 'left' ? '-100%' : cloneType === 'right' ? '100%' : '0';
+      const top = cloneType === 'top' ? '-100%' : cloneType === 'bottom' ? '100%' : '0';
+      template += `<span>{value}</span>`;
+      template += `<span inert style="position:absolute;top:${top};left:${left};white-space:nowrap;">{value}</span>`;
+    } else {
+      template += `{value}`;
     }
+    template += `</span>`;
+    if (wrapType) template += `</span>`;
+    return template;
+  };
 
-    commitStyles() {
-      return this.forEach('commitStyles');
+  /**
+   * @param  {String|SplitFunctionValue} htmlTemplate
+   * @param  {Array<HTMLElement>} store
+   * @param  {Node|HTMLElement} node
+   * @param  {DocumentFragment} $parentFragment
+   * @param  {'line'|'word'|'char'} type
+   * @param  {Boolean} debug
+   * @param  {Number} lineIndex
+   * @param  {Number} [wordIndex]
+   * @param  {Number} [charIndex]
+   * @return {HTMLElement}
+   */
+  const processHTMLTemplate = (htmlTemplate, store, node, $parentFragment, type, debug, lineIndex, wordIndex, charIndex) => {
+    const isLine = type === lineType;
+    const isChar = type === charType;
+    const className = `_${type}_`;
+    const template = isFnc(htmlTemplate) ? htmlTemplate(node) : htmlTemplate;
+    const displayStyle = isLine ? 'block' : 'inline-block';
+    $splitTemplate.innerHTML = template
+      .replace(valueRgx, `<i class="${className}"></i>`)
+      .replace(indexRgx, `${isChar ? charIndex : isLine ? lineIndex : wordIndex}`);
+    const $content = $splitTemplate.content;
+    const $highestParent = /** @type {HTMLElement} */($content.firstElementChild);
+    const $split = /** @type {HTMLElement} */($content.querySelector(`[data-${type}]`)) || $highestParent;
+    const $replacables = /** @type {NodeListOf<HTMLElement>} */($content.querySelectorAll(`i.${className}`));
+    const replacablesLength = $replacables.length;
+    if (replacablesLength) {
+      $highestParent.style.display = displayStyle;
+      $split.style.display = displayStyle;
+      $split.setAttribute(dataLine, `${lineIndex}`);
+      if (!isLine) {
+        $split.setAttribute('data-word', `${wordIndex}`);
+        if (isChar) $split.setAttribute('data-char', `${charIndex}`);
+      }
+      let i = replacablesLength;
+      while (i--) {
+        const $replace = $replacables[i];
+        const $closestParent = $replace.parentElement;
+        $closestParent.style.display = displayStyle;
+        if (isLine) {
+          $closestParent.innerHTML = /** @type {HTMLElement} */(node).innerHTML;
+        } else {
+          $closestParent.replaceChild(node.cloneNode(true), $replace);
+        }
+      }
+      store.push($split);
+      $parentFragment.appendChild($content);
+    } else {
+      console.warn(`The expression "{value}" is missing from the provided template.`);
     }
+    if (debug) $highestParent.style.outline = `1px dotted ${debugColors[type]}`;
+    return $highestParent;
+  };
 
-    complete() {
-      return this.seek(this.duration);
+  /**
+   * A class that splits text into words and wraps them in span elements while preserving the original HTML structure.
+   * @class
+   */
+  class TextSplitter {
+    /**
+     * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+     * @param  {TextSplitterParams} [parameters]
+     */
+    constructor(target, parameters = {}) {
+      // Only init segmenters when needed
+      if (!wordSegmenter) wordSegmenter = segmenter ? new segmenter([], { granularity: wordType }) : {
+        segment: (text) => {
+          const segments = [];
+          const words = text.split(whiteSpaceGroupRgx);
+          for (let i = 0, l = words.length; i < l; i++) {
+            const segment = words[i];
+            segments.push({
+              segment,
+              isWordLike: !whiteSpaceRgx.test(segment), // Consider non-whitespace as word-like
+            });
+          }
+          return segments;
+        }
+      };
+      if (!graphemeSegmenter) graphemeSegmenter = segmenter ? new segmenter([], { granularity: 'grapheme' }) : {
+        segment: text => [...text].map(char => ({ segment: char }))
+      };
+      if (!$splitTemplate && isBrowser) $splitTemplate = doc.createElement('template');
+      if (scope.current) scope.current.register(this);
+      const { words, chars, lines, accessible, includeSpaces, debug } = parameters;
+      const $target = /** @type {HTMLElement} */((target = isArr(target) ? target[0] : target) && /** @type {Node} */(target).nodeType ? target : (getNodeList(target) || [])[0]);
+      const lineParams = lines === true ? {} : lines;
+      const wordParams = words === true || isUnd(words) ? {} : words;
+      const charParams = chars === true ? {} : chars;
+      this.debug = setValue(debug, false);
+      this.includeSpaces = setValue(includeSpaces, false);
+      this.accessible = setValue(accessible, true);
+      this.linesOnly = lineParams && (!wordParams && !charParams);
+      /** @type {String|false|SplitFunctionValue} */
+      this.lineTemplate = isObj(lineParams) ? generateTemplate(lineType, /** @type {SplitTemplateParams} */(lineParams)) : lineParams;
+      /** @type {String|false|SplitFunctionValue} */
+      this.wordTemplate = isObj(wordParams) || this.linesOnly ? generateTemplate(wordType, /** @type {SplitTemplateParams} */(wordParams)) : wordParams;
+      /** @type {String|false|SplitFunctionValue} */
+      this.charTemplate = isObj(charParams) ? generateTemplate(charType, /** @type {SplitTemplateParams} */(charParams)) : charParams;
+      this.$target = $target;
+      this.html = $target && $target.innerHTML;
+      this.lines = [];
+      this.words = [];
+      this.chars = [];
+      this.effects = [];
+      this.effectsCleanups = [];
+      this.cache = null;
+      this.ready = false;
+      this.width = 0;
+      this.resizeTimeout = null;
+      const handleSplit = () => this.html && (lineParams || wordParams || charParams) && this.split();
+      // Make sure this is declared before calling handleSplit() in case revert() is called inside an effect callback
+      this.resizeObserver = new ResizeObserver(() => {
+        // Use a setTimeout instead of a Timer for better tree shaking
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+          const currentWidth = /** @type {HTMLElement} */($target).offsetWidth;
+          if (currentWidth === this.width) return;
+          this.width = currentWidth;
+          handleSplit();
+        }, 150);
+      });
+      // Only declare the font ready promise when splitting by lines and not alreay split
+      if (this.lineTemplate && !this.ready) {
+        doc.fonts.ready.then(handleSplit);
+      } else {
+        handleSplit();
+      }
+      $target ? this.resizeObserver.observe($target) : console.warn('No Text Splitter target found.');
     }
 
-    cancel() {
-      this.muteCallbacks = true; // This prevents triggering the onComplete callback and resolving the Promise
-      return this.commitStyles().forEach('cancel');
+    /**
+     * @param  {(...args: any[]) => Tickable | (() => void)} effect
+     * @return this
+     */
+    addEffect(effect) {
+      if (!isFnc(effect)) return console.warn('Effect must return a function.');
+      const refreshableEffect = keepTime(effect);
+      this.effects.push(refreshableEffect);
+      if (this.ready) this.effectsCleanups[this.effects.length - 1] = refreshableEffect(this);
+      return this;
     }
 
     revert() {
-      // NOTE: We need a better way to revert the transforms, since right now the entire transform property value is reverted,
-      // This means if you have multiple animations animating different transforms on the same target,
-      // reverting one of them will also override the transform property of the other animations.
-      // A better approach would be to store the original custom property values is they exist instead of the entire transform value,
-      // and update the CSS variables with the orignal value
-      this.cancel().targets.forEach(($el, i) => {
-        const targetStyle = $el.style;
-        const targetInlineStyles = this._inlineStyles[i];
-        for (let name in targetInlineStyles) {
-          const originalInlinedValue = targetInlineStyles[name];
-          if (isUnd(originalInlinedValue) || originalInlinedValue === emptyString) {
-            targetStyle.removeProperty(toLowerCase(name));
-          } else {
-            targetStyle[name] = originalInlinedValue;
-          }
-        }
-        // Remove style attribute if empty
-        if ($el.getAttribute('style') === emptyString) $el.removeAttribute('style');
-      });
+      clearTimeout(this.resizeTimeout);
+      this.lines.length = this.words.length = this.chars.length = 0;
+      this.resizeObserver.disconnect();
+      // Make sure to revert the effects after disconnecting the resizeObserver to avoid triggering it in the process
+      this.effectsCleanups.forEach(cleanup => isFnc(cleanup) ? cleanup(this) : cleanup.revert && cleanup.revert());
+      this.$target.innerHTML = this.html;
       return this;
     }
 
     /**
-     * @typedef {this & {then: null}} ResolvedWAAPIAnimation
+     * Recursively processes a node and its children
+     * @param {Node} node
      */
+    splitNode(node) {
+      const wordTemplate = this.wordTemplate;
+      const charTemplate = this.charTemplate;
+      const includeSpaces = this.includeSpaces;
+      const debug = this.debug;
+      const nodeType = node.nodeType;
+      if (nodeType === 3) {
+        const nodeText = node.nodeValue;
+        // If the nodeText is only whitespace, leave it as is
+        if (nodeText.trim()) {
+          const tempWords = [];
+          const words = this.words;
+          const chars = this.chars;
+          const wordSegments = wordSegmenter.segment(nodeText);
+          const $wordsFragment = doc.createDocumentFragment();
+          let prevSeg = null;
+          for (const wordSegment of wordSegments) {
+            const segment = wordSegment.segment;
+            const isWordLike = isSegmentWordLike(wordSegment);
+            // Determine if this segment should be a new word, first segment always becomes a new word
+            if (!prevSeg || (isWordLike && (prevSeg && (isSegmentWordLike(prevSeg))))) {
+              tempWords.push(segment);
+            } else {
+              // Only concatenate if both current and previous are non-word-like and don't contain spaces
+              const lastWordIndex = tempWords.length - 1;
+              const lastWord = tempWords[lastWordIndex];
+              if (!whiteSpaceGroupRgx.test(lastWord) && !whiteSpaceGroupRgx.test(segment)) {
+                tempWords[lastWordIndex] += segment;
+              } else {
+                tempWords.push(segment);
+              }
+            }
+            prevSeg = wordSegment;
+          }
+
+          for (let i = 0, l = tempWords.length; i < l; i++) {
+            const word = tempWords[i];
+            if (!word.trim()) {
+              // Preserve whitespace only if includeSpaces is false and if the current space is not the first node
+              if (i && includeSpaces) continue;
+              $wordsFragment.appendChild(doc.createTextNode(word));
+            } else {
+              const nextWord = tempWords[i + 1];
+              const hasWordFollowingSpace = includeSpaces && nextWord && !nextWord.trim();
+              const wordToProcess = word;
+              const charSegments = charTemplate ? graphemeSegmenter.segment(wordToProcess) : null;
+              const $charsFragment = charTemplate ? doc.createDocumentFragment() : doc.createTextNode(hasWordFollowingSpace ? word + '\xa0' : word);
+              if (charTemplate) {
+                const charSegmentsArray = [...charSegments];
+                for (let j = 0, jl = charSegmentsArray.length; j < jl; j++) {
+                  const charSegment = charSegmentsArray[j];
+                  const isLastChar = j === jl - 1;
+                  // If this is the last character and includeSpaces is true with a following space, append the space
+                  const charText = isLastChar && hasWordFollowingSpace ? charSegment.segment + '\xa0' : charSegment.segment;
+                  const $charNode = doc.createTextNode(charText);
+                  processHTMLTemplate(charTemplate, chars, $charNode, /** @type {DocumentFragment} */($charsFragment), charType, debug, -1, words.length, chars.length);
+                }
+              }
+              if (wordTemplate) {
+                processHTMLTemplate(wordTemplate, words, $charsFragment, $wordsFragment, wordType, debug, -1, words.length, chars.length);
+                // Chars elements must be re-parsed in the split() method if both words and chars are parsed
+              } else if (charTemplate) {
+                $wordsFragment.appendChild($charsFragment);
+              } else {
+                $wordsFragment.appendChild(doc.createTextNode(word));
+              }
+              // Skip the next iteration if we included a space
+              if (hasWordFollowingSpace) i++;
+            }
+          }
+          node.parentNode.replaceChild($wordsFragment, node);
+        }
+      } else if (nodeType === 1) {
+        // Converting to an array is necessary to work around childNodes pottential mutation
+        const childNodes = /** @type {Array<Node>} */([.../** @type {*} */(node.childNodes)]);
+        for (let i = 0, l = childNodes.length; i < l; i++) this.splitNode(childNodes[i]);
+      }
+    }
 
     /**
-     * @param  {Callback<ResolvedWAAPIAnimation>} [callback]
-     * @return Promise<this>
+     * @param {Boolean} clearCache
+     * @return {this}
      */
-    then(callback = noop) {
-      const then = this.then;
-      const onResolve = () => {
-        this.then = null;
-        callback(/** @type {ResolvedWAAPIAnimation} */(this));
-        this.then = then;
-        this._resolve = noop;
-      };
-      return new Promise(r => {
-        this._resolve = () => r(onResolve());
-        if (this.completed) this._resolve();
-        return this;
-      });
+    split(clearCache = false) {
+      const $el = this.$target;
+      const isCached = !!this.cache && !clearCache;
+      const lineTemplate = this.lineTemplate;
+      const wordTemplate = this.wordTemplate;
+      const charTemplate = this.charTemplate;
+      const fontsReady = doc.fonts.status !== 'loading';
+      const canSplitLines = lineTemplate && fontsReady;
+      this.ready = !lineTemplate || fontsReady;
+      if (canSplitLines || clearCache) {
+        // No need to revert effects animations here since it's already taken care by the refreshable
+        this.effectsCleanups.forEach(cleanup => isFnc(cleanup) && cleanup(this));
+      }
+      if (!isCached) {
+        if (clearCache) {
+          $el.innerHTML = this.html;
+          this.words.length = this.chars.length = 0;
+        }
+        this.splitNode($el);
+        this.cache = $el.innerHTML;
+      }
+      if (canSplitLines) {
+        if (isCached) $el.innerHTML = this.cache;
+        this.lines.length = 0;
+        if (wordTemplate) this.words = getAllTopLevelElements($el, wordType);
+      }
+      // Always reparse characters after a line reset or if both words and chars are activated
+      if (charTemplate && (canSplitLines || wordTemplate)) {
+        this.chars = getAllTopLevelElements($el, charType);
+      }
+      // Words are used when lines only and prioritized over chars
+      const elementsArray = this.words.length ? this.words : this.chars;
+      let y, linesCount = 0;
+      for (let i = 0, l = elementsArray.length; i < l; i++) {
+        const $el = elementsArray[i];
+        const { top, height } = $el.getBoundingClientRect();
+        if (!isUnd(y) && top - y > height * .5) linesCount++;
+        $el.setAttribute(dataLine, `${linesCount}`);
+        const nested = $el.querySelectorAll(`[${dataLine}]`);
+        let c = nested.length;
+        while (c--) nested[c].setAttribute(dataLine, `${linesCount}`);
+        y = top;
+      }
+      if (canSplitLines) {
+        const linesFragment = doc.createDocumentFragment();
+        const parents = new Set();
+        const clones = [];
+        for (let lineIndex = 0; lineIndex < linesCount + 1; lineIndex++) {
+          const $clone = /** @type {HTMLElement} */($el.cloneNode(true));
+          filterLineElements($clone, lineIndex, new Set()).forEach($el => {
+            const $parent = $el.parentNode;
+            if ($parent) {
+              if ($el.nodeType === 1) parents.add(/** @type {HTMLElement} */($parent));
+              $parent.removeChild($el);
+            }
+          });
+          clones.push($clone);
+        }
+        parents.forEach(filterEmptyElements);
+        for (let cloneIndex = 0, clonesLength = clones.length; cloneIndex < clonesLength; cloneIndex++) {
+          processHTMLTemplate(lineTemplate, this.lines, clones[cloneIndex], linesFragment, lineType, this.debug, cloneIndex);
+        }
+        $el.innerHTML = '';
+        $el.appendChild(linesFragment);
+        if (wordTemplate) this.words = getAllTopLevelElements($el, wordType);
+        if (charTemplate) this.chars = getAllTopLevelElements($el, charType);
+      }
+
+      // Remove the word wrappers and clear the words array if lines split only
+      if (this.linesOnly) {
+        const words = this.words;
+        let w = words.length;
+        while (w--) {
+          const $word = words[w];
+          $word.replaceWith($word.textContent);
+        }
+        words.length = 0;
+      }
+      if (this.accessible && (canSplitLines || !isCached)) {
+        const $accessible = doc.createElement('span');
+        // Make the accessible element visually-hidden (https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html)
+        $accessible.style.cssText = `position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap;`;
+        // $accessible.setAttribute('tabindex', '-1');
+        $accessible.innerHTML = this.html;
+        $el.insertBefore($accessible, $el.firstChild);
+        this.lines.forEach(setAriaHidden);
+        this.words.forEach(setAriaHidden);
+        this.chars.forEach(setAriaHidden);
+      }
+      this.width = /** @type {HTMLElement} */($el).offsetWidth;
+      if (canSplitLines || clearCache) {
+        this.effects.forEach((effect, i) => this.effectsCleanups[i] = effect(this));
+      }
+      return this;
+    }
+
+    refresh() {
+      this.split(true);
     }
   }
 
-  const waapi = {
   /**
-   * @param {DOMTargetsParam} targets
-   * @param {WAAPIAnimationParams} params
-   * @return {WAAPIAnimation}
+   * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+   * @param  {TextSplitterParams} [parameters]
+   * @return {TextSplitter}
    */
-    animate: (targets, params) => new WAAPIAnimation(targets, params),
-    convertEase: easingToLinear
+  const splitText = (target, parameters) => new TextSplitter(target, parameters);
+
+  /**
+   * @deprecated text.split() is deprecated, import splitText() directly, or text.splitText()
+   *
+   * @param  {HTMLElement|NodeList|String|Array<HTMLElement>} target
+   * @param  {TextSplitterParams} [parameters]
+   * @return {TextSplitter}
+   */
+  const split = (target, parameters) => {
+    console.warn('text.split() is deprecated, import splitText() directly, or text.splitText()');
+    return new TextSplitter(target, parameters);
   };
 
+  var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TextSplitter: TextSplitter,
+    split: split,
+    splitText: splitText
+  });
+
   exports.$ = registerTargets;
   exports.Animatable = Animatable;
+  exports.AutoLayout = AutoLayout;
   exports.Draggable = Draggable;
   exports.JSAnimation = JSAnimation;
   exports.Scope = Scope;
@@ -8817,6 +10220,7 @@
   exports.createAnimatable = createAnimatable;
   exports.createDraggable = createDraggable;
   exports.createDrawable = createDrawable;
+  exports.createLayout = createLayout;
   exports.createMotionPath = createMotionPath;
   exports.createScope = createScope;
   exports.createSeededRandom = createSeededRandom;