animejs 4.2.1 → 4.3.0-beta.0

package/dist/bundles/anime.esm.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - ESM bundle
- * @version v4.2.1
+ * @version v4.3.0-beta.0
  * @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]
  */
 
 /**
@@ -638,8 +639,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;
@@ -691,7 +694,7 @@ const proxyTargetSymbol = Symbol();
 const minValue = 1e-11;
 const maxValue = 1e12;
 const K = 1e3;
-const maxFps = 120;
+const maxFps = 240;
 
 // Strings
 
@@ -796,7 +799,9 @@ const globals = {
   tickThreshold: 200,
 };
 
-const globalVersions = { version: '4.2.1', engine: null };
+const devTools = isBrowser && win.AnimeJSDevTools;
+
+const globalVersions = { version: '4.3.0-beta.0', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -1826,7 +1831,7 @@ class Clock {
     /** @type {Number} */
     this._currentTime = initTime;
     /** @type {Number} */
-    this._elapsedTime = initTime;
+    this._lastTickTime = initTime;
     /** @type {Number} */
     this._startTime = initTime;
     /** @type {Number} */
@@ -1834,7 +1839,7 @@ class Clock {
     /** @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} */
@@ -1855,7 +1860,8 @@ class Clock {
     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;
@@ -1876,14 +1882,13 @@ class Clock {
    */
   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;
@@ -2020,7 +2025,7 @@ class Engine extends Clock {
 
   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);
     }
@@ -2508,6 +2513,8 @@ class Timer extends Clock {
 
     super(0);
 
+    ++timerId;
+
     const {
       id,
       delay,
@@ -2529,31 +2536,42 @@ class Timer extends Clock {
 
     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
@@ -2613,7 +2631,7 @@ class Timer extends Clock {
 
     // Clock's parameters
     /** @type {Number} */
-    this._elapsedTime = timerInitTime;
+    this._lastTickTime = timerInitTime;
     /** @type {Number} */
     this._startTime = timerInitTime;
     /** @type {Number} */
@@ -2644,7 +2662,7 @@ class Timer extends Clock {
   }
 
   get iterationCurrentTime() {
-    return round$1(this._iterationTime, globals.precision);
+    return clamp$1(round$1(this._iterationTime, globals.precision), 0, this.iterationDuration);
   }
 
   set iterationCurrentTime(time) {
@@ -2742,9 +2760,9 @@ class Timer extends Clock {
   /** @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;
   }
@@ -3258,6 +3276,7 @@ const fastSetValuesArray = [null, null];
 const keyObjectTarget = { to: null };
 
 let tweenId = 0;
+let JSAnimationId = 0;
 let keyframes;
 /** @type {TweenParamsOptions & TweenValues} */
 let key;
@@ -3372,6 +3391,8 @@ class JSAnimation extends Timer {
 
     super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
 
+    ++JSAnimationId;
+
     const parsedTargets = registerTargets(targets);
     const targetsLength = parsedTargets.length;
 
@@ -3381,6 +3402,7 @@ class JSAnimation extends Timer {
     const params = /** @type {AnimationParams} */(kfParams ? mergeObjects(generateKeyframes(/** @type {DurationKeyframes} */(kfParams), parameters), parameters) : parameters);
 
     const {
+      id,
       delay,
       duration,
       ease,
@@ -3391,11 +3413,12 @@ class JSAnimation extends Timer {
     } = 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
@@ -3403,7 +3426,7 @@ class JSAnimation extends Timer {
     // 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;
@@ -3547,6 +3570,8 @@ class JSAnimation extends Timer {
             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) {
@@ -3555,7 +3580,7 @@ class JSAnimation extends Timer {
                   }
                 } else {
                   decomposeRawValue(
-                    getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore),
+                    originalValue,
                     decomposedOriginalValue
                   );
                   if (decomposedOriginalValue.t === valueTypes.UNIT) {
@@ -3774,12 +3799,14 @@ class JSAnimation extends Timer {
     }
     /** @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.
@@ -4117,11 +4144,11 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
   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) => {
@@ -4133,6 +4160,8 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
   return tl;
 }
 
+let TLId = 0;
+
 class Timeline extends Timer {
 
   /**
@@ -4140,6 +4169,9 @@ class Timeline extends Timer {
    */
   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>} */
@@ -4148,6 +4180,8 @@ class Timeline extends Timer {
     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);
@@ -4225,7 +4259,8 @@ class Timeline extends Timer {
           parseTimelinePosition(this,a2),
         );
       }
-      return this.init(true);
+      if (this.composition) this.init(true);
+      return this;
     }
   }
 
@@ -4252,7 +4287,7 @@ class Timeline extends Timer {
     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);
   }
 
   /**
@@ -4275,7 +4310,7 @@ class Timeline extends Timer {
    */
   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);
   }
 
   /**
@@ -7281,1513 +7316,2884 @@ var index$3 = /*#__PURE__*/Object.freeze({
   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)}
- */
-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));
-      })
-    });
-  }
-};
 
-/**
- * @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
+ * 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(', ')})`;
+};
 
-/**
- * @callback ChainedUtilsResult
- * @param {Number} value - The value to process through the chained operations
- * @return {Number} The processed result
- */
+const WAAPIEasesLookups = {};
 
 /**
- * @typedef {ChainablesMap & ChainedUtilsResult} ChainableUtil
+ * @param  {EasingParam} ease
+ * @return {String}
  */
+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;
+};
 
-// Chainable
+const transformsShorthands = ['x', 'y', 'z'];
+const commonDefaultPXProperties = [
+  'perspective',
+  'width',
+  'height',
+  'margin',
+  'padding',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'borderWidth',
+  'fontSize',
+  'borderRadius',
+  ...transformsShorthands
+];
 
-/**
- * @callback ChainedRoundPad
- * @param {Number} decimalLength - Number of decimal places
- * @return {ChainableUtil}
- */
-const roundPad = /** @type {typeof numberUtils.roundPad & ChainedRoundPad} */(makeChainable('roundPad', numberUtils.roundPad));
+const validIndividualTransforms = /*#__PURE__*/ (() => [...transformsShorthands, ...validTransforms.filter(t => ['X', 'Y', 'Z'].some(axis => t.endsWith(axis)))])();
 
-/**
- * @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));
+let transformsPropertiesRegistered = null;
 
 /**
- * @callback ChainedPadEnd
- * @param {Number} totalLength - Target length
- * @param {String} padString - String to pad with
- * @return {ChainableUtil}
+ * @param  {String} propName
+ * @param  {WAAPIKeyframeValue} value
+ * @param  {DOMTarget} $el
+ * @param  {Number} i
+ * @param  {Number} targetsLength
+ * @return {String}
  */
-const padEnd = /** @type {typeof numberUtils.padEnd & ChainedPadEnd} */(makeChainable('padEnd', numberUtils.padEnd));
+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 ChainedWrap
- * @param {Number} min - Minimum boundary
- * @param {Number} max - Maximum boundary
- * @return {ChainableUtil}
+ * @param  {DOMTarget} $el
+ * @param  {String} propName
+ * @param  {WAAPIKeyframeValue} from
+ * @param  {WAAPIKeyframeValue} to
+ * @param  {Number} i
+ * @param  {Number} targetsLength
+ * @return {WAAPITweenValue}
  */
-const wrap = /** @type {typeof numberUtils.wrap & ChainedWrap} */(makeChainable('wrap', numberUtils.wrap));
+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 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}
+ * @param {DOMTargetsParam} targets
+ * @param {WAAPIAnimationParams} params
  */
-const mapRange = /** @type {typeof numberUtils.mapRange & ChainedMapRange} */(makeChainable('mapRange', numberUtils.mapRange));
+  constructor(targets, params) {
 
-/**
- * @callback ChainedDegToRad
- * @return {ChainableUtil}
- */
-const degToRad = /** @type {typeof numberUtils.degToRad & ChainedDegToRad} */(makeChainable('degToRad', numberUtils.degToRad));
+    if (scope.current) scope.current.register(this);
 
-/**
- * @callback ChainedRadToDeg
- * @return {ChainableUtil}
- */
-const radToDeg = /** @type {typeof numberUtils.radToDeg & ChainedRadToDeg} */(makeChainable('radToDeg', numberUtils.radToDeg));
+    // 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 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));
+    const parsedTargets = registerTargets(targets);
+    const targetsLength = parsedTargets.length;
 
-/**
- * @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));
+    if (!targetsLength) {
+      console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
+    }
 
-/**
- * @callback ChainedRound
- * @param {Number} decimalLength - Number of decimal places
- * @return {ChainableUtil}
- */
-const round = /** @type {typeof numberUtils.round & ChainedRound} */(makeChainable('round', numberUtils.round));
+    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 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 {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 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));
+    parsedTargets.forEach(($el, i) => {
 
-/**
- * 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 cachedTransforms = $el[transformsSymbol];
+      const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
+      const elStyle = $el.style;
+      const inlineStyles = this._inlineStyles[i] = {};
 
-/**
- * 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;
-};
+      /** @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'));
 
-let _seed = 0;
+      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;
 
-/**
- * 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;
+        const styleName = individualTransformProperty ? 'transform' : name;
+        if (!inlineStyles[styleName]) {
+          inlineStyles[styleName] = elStyle[styleName];
+        }
+
+        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;
+      }
+    });
+
+    if (scroll) {
+      /** @type {ScrollObserver} */(this.autoplay).link(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)];
+  /**
+   * @callback forEachCallback
+   * @param {globalThis.Animation} animation
+   */
 
-/**
- * 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;
-};
+  /**
+   * @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;
+  }
 
+  get speed() {
+    return this._speed;
+  }
 
+  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
- * @return {DOMPoint}
+ * @typedef {DOMTargetSelector|Array<DOMTargetSelector>} LayoutChildrenParam
  */
-const getPathPoint = ($path, totalLength, progress, lookup = 0) => {
-  const point = progress + lookup;
-  const pointOnPath = (point % totalLength + totalLength) % totalLength;
-  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();
-    /** @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);
-          const p1 = getPathPoint($path, totalLength, newProgress, 1);
-          return atan2(p1.y - p0.y, p1.x - p0.x) * 180 / PI;
-        } else {
-          const p = getPathPoint($path, totalLength, newProgress, 0);
-          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} [duration]
+ * @property {Number|FunctionValue} [delay]
+ * @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;
+/**
+ * @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));
+};
 
-  return [v1, v2];
+/**
+ * @param {Map<DOMTarget, String|null>} store
+ */
+const restoreLayoutTransition = store => {
+  store.forEach((value, $el) => restoreElementTransition($el, value));
+  store.clear();
 };
 
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  createDrawable: createDrawable,
-  createMotionPath: createMotionPath,
-  morphTo: morphTo
+const hiddenComputedStyle = /** @type {CSSStyleDeclaration} */({
+  display: 'none',
+  visibility: 'hidden',
+  opacity: '0',
+  transform: 'none',
+  position: 'static',
 });
 
-
-
-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|null} node
  */
+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;
+};
 
 /**
- * @typedef {Object} Segmenter
- * @property {function(String): Iterable<Segment>} segment
- */
+ * @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;
+};
 
-/** @type {Segmenter} */
-let wordSegmenter = null;
-/** @type {Segmenter} */
-let graphemeSegmenter = null;
-let $splitTemplate = null;
+/**
+ * @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';
+    }
+  }
+
+  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  {Segment} seg
- * @return {Boolean}
+ * @param {LayoutNode} node
+ * @param {LayoutStateParams} [props]
  */
-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 updateNodeProperties = (node, props) => {
+  if (!props) return;
+  for (let name in props) {
+    node.properties[name] = props[name];
+  }
 };
 
 /**
- * @param {HTMLElement} $el
+ * @param {LayoutNode} node
  */
-const setAriaHidden = $el => $el.setAttribute('aria-hidden', 'true');
+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 {DOMTarget} $el
- * @param {String} type
- * @return {Array<HTMLElement>}
+ * @param {LayoutNode} node
  */
-const getAllTopLevelElements = ($el, type) => [.../** @type {*} */($el.querySelectorAll(`[data-${type}]:not([data-${type}] [data-${type}])`))];
-
-const debugColors = { line: '#00D672', word: '#FF4B4B', char: '#5A87FF' };
+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);
+    }
+  }
+};
 
 /**
- * @param {HTMLElement} $el
+ * @param {LayoutNode} node
  */
-const filterEmptyElements = $el => {
-  if (!$el.childElementCount && !$el.textContent.trim()) {
-    const $parent = $el.parentElement;
-    $el.remove();
-    if ($parent) filterEmptyElements($parent);
+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');
+    }
+  }
+  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;
   }
 };
 
 /**
- * @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 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');
+    }
+  }
+  if (node.measuredIsRemoved) {
+    node.layout.pendingRemoved.delete(node.$el);
+  }
 };
 
 /**
- * @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;
+ * @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;
 };
 
-/**
- * @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}`);
+class LayoutSnapshot {
+  /**
+   * @param {AutoLayout} layout
+   */
+  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() {
+    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;
+  }
+
+  /**
+   * @param {DOMTarget} $el
+   * @return {LayoutNodeProperties|undefined}
+   */
+  get($el) {
+    const node = this.nodes.get($el.dataset.layoutId);
+    if (!node) {
+      console.warn(`No node found on state`);
+      return;
     }
-    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;
+    return node.properties;
+  }
+
+  /**
+   * @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 {
-        $closestParent.replaceChild(node.cloneNode(true), $replace);
+        while (node && !node._next) {
+          node = node.parentNode;
+        }
+        if (node) node = node._next;
       }
     }
-    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;
-};
 
-/**
- * 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]
+   * @param {LayoutNodeIterator} cb
    */
-  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
-          });
+  forEachRootNode(cb) {
+    this.forEach(this.rootNode, cb);
+  }
+
+  /**
+   * @param {LayoutNodeIterator} cb
+   */
+  forEachNode(cb) {
+    for (const rootNode of this.rootNodes) {
+      this.forEach(rootNode, cb);
+    }
+  }
+
+  /**
+   * @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;
         }
-        return segments;
+      } else {
+        node = createNode($current, $parent, this, node);
       }
-    };
-    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();
+
+      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;
     }
-    $target ? this.resizeObserver.observe($target) : console.warn('No Text Splitter target found.');
+
+    return firstNode;
   }
 
   /**
-   * @param  {(...args: any[]) => Tickable | (() => void)} effect
-   * @return this
+   * @param {DOMTarget} $el
+   * @param {Set<DOMTarget>} candidates
+   * @return {LayoutNode|null}
    */
-  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);
+  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;
+    }
+    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;
+    }
+
+    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);
+      }
+    }
+
+    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} */
+    this.duration = setValue(params.duration, 500);
+    /** @type {Number|FunctionValue} */
+    this.delay = setValue(params.delay, 0);
+    /** @type {EasingParam} */
+    this.ease = setValue(params.ease, 'inOutExpo');
+    /** @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() {
-    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;
+    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;
   }
 
   /**
-   * Recursively processes a node and its children
-   * @param {Node} node
+   * @return {this}
    */
-  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);
-            }
+  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;
           }
-          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++;
+      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);
+        });
+        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`;
         }
-        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 {Boolean} clearCache
-   * @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;
+      // 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);
+        });
       }
-      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 (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;
+
+      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);
+        }
+      }
+
     }
-    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();
+
+    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)}`;
+          }
         });
-        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);
+
+      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);
       }
-      $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);
+
+      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);
       }
-      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));
+
+    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));
+      })
+    });
+  }
+};
+
+/**
+ * @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 = /*#__PURE__*/Object.freeze({
+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 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),
+  }
+};
 
-      const cachedTransforms = $el[transformsSymbol];
-      const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
-      const elStyle = $el.style;
-      const inlineStyles = this._inlineStyles[i] = {};
 
-      /** @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);
-  }
 
-  get currentTime() {
-    const controlAnimation = this.controlAnimation;
-    const timeScale = globals.timeScale;
-    return this.completed ? this.duration : controlAnimation ? +controlAnimation.currentTime * (timeScale === 1 ? 1 : timeScale) : 0;
+/**
+ * @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>.`);
+  }
+  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);
 };
 
-export { registerTargets as $, Animatable, Draggable, JSAnimation, Scope, ScrollObserver, Spring, TextSplitter, Timeline, Timer, WAAPIAnimation, animate, clamp, cleanInlineStyles, createAnimatable, createDraggable, createDrawable, createMotionPath, createScope, createSeededRandom, createSpring, createTimeline, createTimer, cubicBezier, damp, degToRad, eases, index$3 as easings, engine, get, irregular, keepTime, lerp, linear, mapRange, morphTo, onScroll, padEnd, padStart, radToDeg, random, randomPick, remove, round, roundPad, scrollContainers, set, shuffle, snap, split, splitText, spring, stagger, steps, index$1 as svg, sync, index as text, index$2 as utils, waapi, wrap };
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  TextSplitter: TextSplitter,
+  split: split,
+  splitText: splitText
+});
+
+export { registerTargets as $, Animatable, AutoLayout, Draggable, JSAnimation, Scope, ScrollObserver, Spring, TextSplitter, Timeline, Timer, WAAPIAnimation, animate, clamp, cleanInlineStyles, createAnimatable, createDraggable, createDrawable, createLayout, createMotionPath, createScope, createSeededRandom, createSpring, createTimeline, createTimer, cubicBezier, damp, degToRad, eases, index$3 as easings, engine, get, irregular, keepTime, lerp, linear, mapRange, morphTo, onScroll, padEnd, padStart, radToDeg, random, randomPick, remove, round, roundPad, scrollContainers, set, shuffle, snap, split, splitText, spring, stagger, steps, index$1 as svg, sync, index as text, index$2 as utils, waapi, wrap };