animejs 4.2.0-beta.0 → 4.2.1

package/dist/bundles/anime.esm.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - ESM bundle
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -17,6 +17,7 @@
  * @property {Number|Boolean} [loop]
  * @property {Boolean} [reversed]
  * @property {Boolean} [alternate]
+ * @property {Boolean} [persist]
  * @property {Boolean|ScrollObserver} [autoplay]
  * @property {Number|FunctionValue} [duration]
  * @property {Number|FunctionValue} [delay]
@@ -24,13 +25,13 @@
  * @property {EasingParam} [ease]
  * @property {'none'|'replace'|'blend'|compositionTypes} [composition]
  * @property {(v: any) => any} [modifier]
- * @property {(tickable: Tickable) => void} [onBegin]
- * @property {(tickable: Tickable) => void} [onBeforeUpdate]
- * @property {(tickable: Tickable) => void} [onUpdate]
- * @property {(tickable: Tickable) => void} [onLoop]
- * @property {(tickable: Tickable) => void} [onPause]
- * @property {(tickable: Tickable) => void} [onComplete]
- * @property {(renderable: Renderable) => void} [onRender]
+ * @property {Callback<Tickable>} [onBegin]
+ * @property {Callback<Tickable>} [onBeforeUpdate]
+ * @property {Callback<Tickable>} [onUpdate]
+ * @property {Callback<Tickable>} [onLoop]
+ * @property {Callback<Tickable>} [onPause]
+ * @property {Callback<Tickable>} [onComplete]
+ * @property {Callback<Renderable>} [onRender]
  */
 
 /** @typedef {JSAnimation|Timeline} Renderable */
@@ -86,7 +87,11 @@
  */
 
 /**
- * @typedef {('linear'|'linear(x1, x2 25%, x3)'|'in'|'out'|'inOut'|'inQuad'|'outQuad'|'inOutQuad'|'inCubic'|'outCubic'|'inOutCubic'|'inQuart'|'outQuart'|'inOutQuart'|'inQuint'|'outQuint'|'inOutQuint'|'inSine'|'outSine'|'inOutSine'|'inCirc'|'outCirc'|'inOutCirc'|'inExpo'|'outExpo'|'inOutExpo'|'inBounce'|'outBounce'|'inOutBounce'|'inBack'|'outBack'|'inOutBack'|'inElastic'|'outElastic'|'inOutElastic'|'irregular'|'cubicBezier'|'steps'|'in(p = 1.675)'|'out(p = 1.675)'|'inOut(p = 1.675)'|'inBack(overshoot = 1.70158)'|'outBack(overshoot = 1.70158)'|'inOutBack(overshoot = 1.70158)'|'inElastic(amplitude = 1, period = .3)'|'outElastic(amplitude = 1, period = .3)'|'inOutElastic(amplitude = 1, period = .3)'|'irregular(length = 10, randomness = 1)'|'cubicBezier(x1, y1, x2, y2)'|'steps(steps = 10)')} EaseStringParamNames
+ * @typedef {('linear'|'none'|'in'|'out'|'inOut'|'inQuad'|'outQuad'|'inOutQuad'|'inCubic'|'outCubic'|'inOutCubic'|'inQuart'|'outQuart'|'inOutQuart'|'inQuint'|'outQuint'|'inOutQuint'|'inSine'|'outSine'|'inOutSine'|'inCirc'|'outCirc'|'inOutCirc'|'inExpo'|'outExpo'|'inOutExpo'|'inBounce'|'outBounce'|'inOutBounce'|'inBack'|'outBack'|'inOutBack'|'inElastic'|'outElastic'|'inOutElastic'|'out(p = 1.675)'|'inOut(p = 1.675)'|'inBack(overshoot = 1.7)'|'outBack(overshoot = 1.7)'|'inOutBack(overshoot = 1.7)'|'inElastic(amplitude = 1, period = .3)'|'outElastic(amplitude = 1, period = .3)'|'inOutElastic(amplitude = 1, period = .3)')} EaseStringParamNames
+ */
+
+/**
+ * @typedef {('ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear(0, 0.25, 1)'|'steps'|'steps(6, start)'|'step-start'|'step-end'|'cubic-bezier(0.42, 0, 1, 1)') } WAAPIEaseStringParamNames
  */
 
 /**
@@ -97,7 +102,7 @@
 
 /**
  * @callback BackEasing
- * @param {Number|String} [overshoot=1.70158]
+ * @param {Number|String} [overshoot=1.7]
  * @return {EasingFunction}
  */
 
@@ -113,6 +118,7 @@
 // A hack to get both ease names suggestions AND allow any strings
 // https://github.com/microsoft/TypeScript/issues/29729#issuecomment-460346421
 /** @typedef {(String & {})|EaseStringParamNames|EasingFunction|Spring} EasingParam */
+/** @typedef {(String & {})|EaseStringParamNames|WAAPIEaseStringParamNames|EasingFunction|Spring} WAAPIEasingParam */
 
 // Spring types
 
@@ -122,6 +128,9 @@
  * @property {Number} [stiffness=100] - Stiffness, default 100
  * @property {Number} [damping=10] - Damping, default 10
  * @property {Number} [velocity=0] - Initial velocity, default 0
+ * @property {Number} [bounce=0] - Initial bounce, default 0
+ * @property {Number} [duration=0] - The perceived duration, default 0
+ * @property {Callback<JSAnimation>} [onComplete] - Callback function called when the spring currentTime hits the perceived duration
  */
 
  // Callback types
@@ -219,6 +228,7 @@
  * @property {Number} _isOverlapped
  * @property {Number} _isOverridden
  * @property {Number} _renderTransforms
+ * @property {String} _inlineValue
  * @property {Tween} _prevRep
  * @property {Tween} _nextRep
  * @property {Tween} _prevAdd
@@ -375,17 +385,13 @@
  * @typedef {WAAPITweenValue|WAAPIFunctionValue|Array<String|Number|WAAPIFunctionValue>} WAAPIKeyframeValue
  */
 
-/**
- * @typedef {(animation: WAAPIAnimation) => void} WAAPICallback
- */
-
 /**
  * @typedef {Object} WAAPITweenOptions
  * @property {WAAPIKeyframeValue} [to]
  * @property {WAAPIKeyframeValue} [from]
  * @property {Number|WAAPIFunctionValue} [duration]
  * @property {Number|WAAPIFunctionValue} [delay]
- * @property {EasingParam} [ease]
+ * @property {WAAPIEasingParam} [ease]
  * @property {CompositeOperation} [composition]
  */
 
@@ -398,13 +404,14 @@
  * @property {Number} [playbackRate]
  * @property {Number|WAAPIFunctionValue} [duration]
  * @property {Number|WAAPIFunctionValue} [delay]
- * @property {EasingParam} [ease]
+ * @property {WAAPIEasingParam} [ease]
  * @property {CompositeOperation} [composition]
- * @property {WAAPICallback} [onComplete]
+ * @property {Boolean} [persist]
+ * @property {Callback<WAAPIAnimation>} [onComplete]
  */
 
 /**
- * @typedef {Record<String, WAAPIKeyframeValue | WAAPIAnimationOptions | Boolean | ScrollObserver | WAAPICallback | EasingParam | WAAPITweenOptions> & WAAPIAnimationOptions} WAAPIAnimationParams
+ * @typedef {Record<String, WAAPIKeyframeValue | WAAPIAnimationOptions | Boolean | ScrollObserver | Callback<WAAPIAnimation> | WAAPIEasingParam | WAAPITweenOptions> & WAAPIAnimationOptions} WAAPIAnimationParams
  */
 
 // Animatable types
@@ -547,6 +554,12 @@
  * @property {String} [onGrab]
  */
 
+/**
+ * @typedef {Object} DraggableDragThresholdParams
+ * @property {Number} [mouse]
+ * @property {Number} [touch]
+ */
+
 /**
  * @typedef {Object} DraggableParams
  * @property {DOMTargetSelector} [trigger]
@@ -559,6 +572,7 @@
  * @property {Number|((draggable: Draggable) => Number)} [containerFriction]
  * @property {Number|((draggable: Draggable) => Number)} [releaseContainerFriction]
  * @property {Number|((draggable: Draggable) => Number)} [dragSpeed]
+ * @property {Number|DraggableDragThresholdParams|((draggable: Draggable) => Number|DraggableDragThresholdParams)} [dragThreshold]
  * @property {Number|((draggable: Draggable) => Number)} [scrollSpeed]
  * @property {Number|((draggable: Draggable) => Number)} [scrollThreshold]
  * @property {Number|((draggable: Draggable) => Number)} [minVelocity]
@@ -682,6 +696,8 @@ const maxFps = 120;
 // Strings
 
 const emptyString = '';
+const cssVarPrefix = 'var(';
+
 const shortTransforms = /*#__PURE__*/ (() => {
   const map = new Map();
   map.set('x', 'translateX');
@@ -705,9 +721,9 @@ const validTransforms = [
   'skew',
   'skewX',
   'skewY',
-  'perspective',
   'matrix',
   'matrix3d',
+  'perspective',
 ];
 
 const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
@@ -731,6 +747,7 @@ const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
 const lowerCaseRgx = /([a-z])([A-Z])/g;
 const transformsExecRgx = /(\w+)(\([^)]+\)+)/g; // Match inline transforms with cacl() values, returns the value wrapped in ()
 const relativeValuesExecRgx = /(\*=|\+=|-=)/;
+const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
 
 
 
@@ -745,6 +762,7 @@ const defaults = {
   reversed: false,
   alternate: false,
   autoplay: true,
+  persist: false,
   duration: K,
   delay: 0,
   loopDelay: 0,
@@ -778,7 +796,7 @@ const globals = {
   tickThreshold: 200,
 };
 
-const globalVersions = { version: '4.2.0', engine: null };
+const globalVersions = { version: '4.2.1', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -1168,19 +1186,30 @@ const setValue = (targetValue, defaultValue) => {
  * @return {any}
  */
 const getFunctionValue = (value, target, index, total, store) => {
+  let func;
   if (isFnc(value)) {
-    const func = () => {
+    func = () => {
       const computed = /** @type {Function} */(value)(target, index, total);
       // Fallback to 0 if the function returns undefined / NaN / null / false / 0
       return !isNaN(+computed) ? +computed : computed || 0;
     };
-    if (store) {
-      store.func = func;
-    }
-    return func();
+  } else if (isStr(value) && stringStartsWith(value, cssVarPrefix)) {
+    func = () => {
+      const match = value.match(cssVariableMatchRgx);
+      const cssVarName = match[1];
+      const fallbackValue = match[2];
+      let computed = getComputedStyle(/** @type {HTMLElement} */(target))?.getPropertyValue(cssVarName);
+      // Use fallback if CSS variable is not set or empty
+      if ((!computed || computed.trim() === emptyString) && fallbackValue) {
+        computed = fallbackValue.trim();
+      }
+      return computed || 0;
+    };
   } else {
     return value;
   }
+  if (store) store.func = func;
+  return func();
 };
 
 /**
@@ -1587,7 +1616,9 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   // Handle setters on timeline differently and allow re-trigering the onComplete callback when seeking backwards
   if (parent && isSetter) {
     if (!muteCallbacks && (
-      (parent.began && !isRunningBackwards && tickableAbsoluteTime >= duration && !completed) ||
+      // (tickableAbsoluteTime > 0 instead) of (tickableAbsoluteTime >= duration) to prevent floating point precision issues
+      // see: https://github.com/juliangarnier/anime/issues/1088
+      (parent.began && !isRunningBackwards && tickableAbsoluteTime > 0 && !completed) ||
       (isRunningBackwards && tickableAbsoluteTime <= minValue && completed)
     )) {
       tickable.onComplete(/** @type {CallbackArgument} */(tickable));
@@ -1689,12 +1720,11 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   }
 };
 
-const propertyNamesCache = {};
-
 
 
 
 
+const propertyNamesCache = {};
 
 /**
  * @param  {String} propertyName
@@ -1742,10 +1772,11 @@ const cleanInlineStyles = renderable => {
       const tweenTarget = tween.target;
       if (tweenTarget[isDomSymbol]) {
         const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
-        const originalInlinedValue = animation._inlineStyles[tweenProperty];
+        const originalInlinedValue = tween._inlineValue;
+        const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
         if (tween._tweenType === tweenTypes.TRANSFORM) {
           const cachedTransforms = tweenTarget[transformsSymbol];
-          if (isUnd(originalInlinedValue) || originalInlinedValue === emptyString) {
+          if (tweenHadNoInlineValue) {
             delete cachedTransforms[tweenProperty];
           } else {
             cachedTransforms[tweenProperty] = originalInlinedValue;
@@ -1762,8 +1793,8 @@ const cleanInlineStyles = renderable => {
             }
           }
         } else {
-          if (isUnd(originalInlinedValue) || originalInlinedValue === emptyString) {
-            targetStyle.removeProperty(tweenProperty);
+          if (tweenHadNoInlineValue) {
+            targetStyle.removeProperty(toLowerCase(tweenProperty));
           } else {
             targetStyle[tweenProperty] = originalInlinedValue;
           }
@@ -2452,7 +2483,7 @@ const reviveTimer = timer => {
   if (timer._hasChildren) {
     forEachChildren(timer, reviveTimer);
   } else {
-    forEachChildren(timer, (/** @type {Tween} tween*/tween) => {
+    forEachChildren(timer, (/** @type {Tween} tween */tween) => {
       if (tween._composition !== compositionTypes.none) {
         composeTween(tween, getTweenSiblings(tween.target, tween.property));
       }
@@ -2509,7 +2540,6 @@ class Timer extends Clock {
                                 /** @type {Number} */(timerLoop) < 0 ? Infinity :
                                 /** @type {Number} */(timerLoop) + 1;
 
-
     let offsetPosition = 0;
 
     if (parent) {
@@ -2599,7 +2629,7 @@ class Timer extends Clock {
   }
 
   set cancelled(cancelled) {
-    cancelled ? this.cancel() : this.reset(1).play();
+    cancelled ? this.cancel() : this.reset(true).play();
   }
 
   get currentTime() {
@@ -2664,10 +2694,10 @@ class Timer extends Clock {
   }
 
   /**
-   * @param  {Number} internalRender
+   * @param  {Boolean} [softReset]
    * @return {this}
    */
-  reset(internalRender = 0) {
+  reset(softReset = false) {
     // If cancelled, revive the timer before rendering in order to have propertly composed tweens siblings
     reviveTimer(this);
     if (this._reversed && !this._reverse) this.reversed = false;
@@ -2676,7 +2706,7 @@ class Timer extends Clock {
     // NOTE: This is only required for Timelines and might be better to move to the Timeline class?
     this._iterationTime = this.iterationDuration;
     // Set tickMode to tickModes.FORCE to force rendering
-    tick(this, 0, 1, internalRender, tickModes.FORCE);
+    tick(this, 0, 1, ~~softReset, tickModes.FORCE);
     // Reset timer properties after revive / render to make sure the props are not updated again
     resetTimerProperties(this);
     // Also reset children properties
@@ -2687,16 +2717,16 @@ class Timer extends Clock {
   }
 
   /**
-   * @param  {Number} internalRender
+   * @param  {Boolean} internalRender
    * @return {this}
    */
-  init(internalRender = 0) {
+  init(internalRender = false) {
     this.fps = this._fps;
     this.speed = this._speed;
     // Manually calling .init() on timelines should render all children intial state
     // Forces all children to render once then render to 0 when reseted
     if (!internalRender && this._hasChildren) {
-      tick(this, this.duration, 1, internalRender, tickModes.FORCE);
+      tick(this, this.duration, 1, ~~internalRender, tickModes.FORCE);
     }
     this.reset(internalRender);
     // Make sure to set autoplay to false to child timers so it doesn't attempt to autoplay / link
@@ -2750,7 +2780,7 @@ class Timer extends Clock {
 
   /** @return {this} */
   restart() {
-    return this.reset(0).resume();
+    return this.reset().resume();
   }
 
   /**
@@ -2853,8 +2883,12 @@ class Timer extends Clock {
   }
 
   /**
-   * @param  {Callback<this>} [callback]
-   * @return {Promise}
+   * @typedef {this & {then: null}} ResolvedTimer
+   */
+
+  /**
+   * @param  {Callback<ResolvedTimer>} [callback]
+   * @return Promise<this>
    */
   then(callback = noop) {
     const then = this.then;
@@ -2862,7 +2896,7 @@ class Timer extends Clock {
       // this.then = null prevents infinite recursion if returned by an async function
       // https://github.com/juliangarnierorg/anime-beta/issues/26
       this.then = null;
-      callback(this);
+      callback(/** @type {ResolvedTimer} */(this));
       this.then = then;
       this._resolve = noop;
     };
@@ -3048,6 +3082,7 @@ const none = t => t;
 
 
 
+
 /** @type {PowerEasing} */
 const easeInPower = (p = 1.68) => t => pow(t, +p);
 
@@ -3065,154 +3100,6 @@ const easeTypes = {
   outIn: easeIn => t => t < .5 ? (1 - easeIn(1 - t * 2)) / 2 : (easeIn(t * 2 - 1) + 1) / 2,
 };
 
-/**
- * @param  {String} string
- * @param  {Record<String, EasingFunctionWithParams|EasingFunction>} easesFunctions
- * @param  {Object} easesLookups
- * @return {EasingFunction}
- */
-const parseEaseString = (string, easesFunctions, easesLookups) => {
-  if (easesLookups[string]) return easesLookups[string];
-  if (string.indexOf('(') <= -1) {
-    const hasParams = easeTypes[string] || string.includes('Back') || string.includes('Elastic');
-    const parsedFn = /** @type {EasingFunction} */(hasParams ? /** @type {EasingFunctionWithParams} */(easesFunctions[string])() : easesFunctions[string]);
-    return parsedFn ? easesLookups[string] = parsedFn : none;
-  } else {
-    const split = string.slice(0, -1).split('(');
-    const parsedFn = /** @type {EasingFunctionWithParams} */(easesFunctions[split[0]]);
-    return parsedFn ? easesLookups[string] = parsedFn(...split[1].split(',')) : none;
-  }
-};
-
-
-
-/**
- * Cubic Bezier solver adapted from https://github.com/gre/bezier-easing
- * (c) 2014 Gaëtan Renaudeau
- */
-
-/**
- * @param  {Number} aT
- * @param  {Number} aA1
- * @param  {Number} aA2
- * @return {Number}
- */
-const calcBezier = (aT, aA1, aA2) => (((1 - 3 * aA2 + 3 * aA1) * aT + (3 * aA2 - 6 * aA1)) * aT + (3 * aA1)) * aT;
-
-/**
- * @param  {Number} aX
- * @param  {Number} mX1
- * @param  {Number} mX2
- * @return {Number}
- */
-const binarySubdivide = (aX, mX1, mX2) => {
-  let aA = 0, aB = 1, currentX, currentT, i = 0;
-  do {
-    currentT = aA + (aB - aA) / 2;
-    currentX = calcBezier(currentT, mX1, mX2) - aX;
-    if (currentX > 0) {
-      aB = currentT;
-    } else {
-      aA = currentT;
-    }
-  } while (abs(currentX) > .0000001 && ++i < 100);
-  return currentT;
-};
-
-/**
- * @param  {Number} [mX1] The x coordinate of the first point
- * @param  {Number} [mY1] The y coordinate of the first point
- * @param  {Number} [mX2] The x coordinate of the second point
- * @param  {Number} [mY2] The y coordinate of the second point
- * @return {EasingFunction}
- */
-
-const cubicBezier = (mX1 = 0.5, mY1 = 0.0, mX2 = 0.5, mY2 = 1.0) => (mX1 === mY1 && mX2 === mY2) ? none :
-  t => t === 0 || t === 1 ? t :
-  calcBezier(binarySubdivide(t, mX1, mX2), mY1, mY2);
-
-
-
-/**
- * Steps ease implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
- * Only covers 'end' and 'start' jumpterms
- * @param  {Number} steps
- * @param  {Boolean} [fromStart]
- * @return {EasingFunction}
- */
-const steps = (steps = 10, fromStart) => {
-  const roundMethod = fromStart ? ceil : floor;
-  return t => roundMethod(clamp$1(t, 0, 1) * steps) * (1 / steps);
-};
-
-
-
-/**
- * Without parameters, the linear function creates a non-eased transition.
- * Parameters, if used, creates a piecewise linear easing by interpolating linearly between the specified points.
- *
- * @param  {...(String|Number)} args - Points
- * @return {EasingFunction}
- */
-const linear = (...args) => {
-  const argsLength = args.length;
-  if (!argsLength) return none;
-  const totalPoints = argsLength - 1;
-  const firstArg = args[0];
-  const lastArg = args[totalPoints];
-  const xPoints = [0];
-  const yPoints = [parseNumber(firstArg)];
-  for (let i = 1; i < totalPoints; i++) {
-    const arg = args[i];
-    const splitValue = isStr(arg) ?
-    /** @type {String} */(arg).trim().split(' ') :
-    [arg];
-    const value = splitValue[0];
-    const percent = splitValue[1];
-    xPoints.push(!isUnd(percent) ? parseNumber(percent) / 100 : i / totalPoints);
-    yPoints.push(parseNumber(value));
-  }
-  yPoints.push(parseNumber(lastArg));
-  xPoints.push(1);
-  return function easeLinear(t) {
-    for (let i = 1, l = xPoints.length; i < l; i++) {
-      const currentX = xPoints[i];
-      if (t <= currentX) {
-        const prevX = xPoints[i - 1];
-        const prevY = yPoints[i - 1];
-        return prevY + (yPoints[i] - prevY) * (t - prevX) / (currentX - prevX);
-      }
-    }
-    return yPoints[yPoints.length - 1];
-  }
-};
-
-
-
-/**
- * Generate random steps
- * @param  {Number} [length] - The number of steps
- * @param  {Number} [randomness] - How strong the randomness is
- * @return {EasingFunction}
- */
-const irregular = (length = 10, randomness = 1) => {
-  const values = [0];
-  const total = length - 1;
-  for (let i = 1; i < total; i++) {
-    const previousValue = values[i - 1];
-    const spacing = i / total;
-    const segmentEnd = (i + 1) / total;
-    const randomVariation = spacing + (segmentEnd - spacing) * Math.random();
-    // Mix the even spacing and random variation based on the randomness parameter
-    const randomValue = spacing * (1 - randomness) + randomVariation * randomness;
-    values.push(clamp$1(randomValue, previousValue, 1));
-  }
-  values.push(1);
-  return linear(...values);
-};
-
-
-
 /**
  * Easing functions adapted and simplified from https://robertpenner.com/easing/
  * (c) 2001 Robert Penner
@@ -3241,7 +3128,7 @@ const easeInFunctions = {
     return 1 / pow(4, 3 - b) - 7.5625 * pow((pow2 * 3 - 2) / 22 - t, 2);
   },
   /** @type {BackEasing} */
-  Back: (overshoot = 1.70158) => t => (+overshoot + 1) * t * t * t - +overshoot * t * t,
+  Back: (overshoot = 1.7) => t => (+overshoot + 1) * t * t * t - +overshoot * t * t,
   /** @type {ElasticEasing} */
   Elastic: (amplitude = 1, period = .3) => {
     const a = clamp$1(+amplitude, 1, 10);
@@ -3254,10 +3141,8 @@ const easeInFunctions = {
 
 /**
  * @typedef  {Object} EasesFunctions
- * @property {typeof linear} linear
- * @property {typeof irregular} irregular
- * @property {typeof steps} steps
- * @property {typeof cubicBezier} cubicBezier
+ * @property {typeof none} linear
+ * @property {typeof none} none
  * @property {PowerEasing} in
  * @property {PowerEasing} out
  * @property {PowerEasing} inOut
@@ -3305,7 +3190,7 @@ const easeInFunctions = {
  */
 
 const eases = (/*#__PURE__ */ (() => {
-  const list = { linear, irregular, steps, cubicBezier };
+  const list = { linear: none, none: none };
   for (let type in easeTypes) {
     for (let name in easeInFunctions) {
       const easeIn = easeInFunctions[name];
@@ -3321,15 +3206,43 @@ const eases = (/*#__PURE__ */ (() => {
 })());
 
 /** @type {Record<String, EasingFunction>} */
-const JSEasesLookups = { linear: none };
+const easesLookups = { linear: none, none: none };
+
+/**
+ * @param  {String} string
+ * @return {EasingFunction}
+ */
+const parseEaseString = (string) => {
+  if (easesLookups[string]) return easesLookups[string];
+  if (string.indexOf('(') <= -1) {
+    const hasParams = easeTypes[string] || string.includes('Back') || string.includes('Elastic');
+    const parsedFn = /** @type {EasingFunction} */(hasParams ? /** @type {EasingFunctionWithParams} */(eases[string])() : eases[string]);
+    return parsedFn ? easesLookups[string] = parsedFn : none;
+  } else {
+    const split = string.slice(0, -1).split('(');
+    const parsedFn = /** @type {EasingFunctionWithParams} */(eases[split[0]]);
+    return parsedFn ? easesLookups[string] = parsedFn(...split[1].split(',')) : none;
+  }
+};
+
+const deprecated = ['steps(', 'irregular(', 'linear(', 'cubicBezier('];
 
 /**
  * @param  {EasingParam} ease
  * @return {EasingFunction}
  */
-const parseEase = ease => isFnc(ease) ? ease :
-  isStr(ease) ? parseEaseString(/** @type {String} */(ease), eases, JSEasesLookups) :
-  none;
+const parseEase = ease => {
+  if (isStr(ease)) {
+    for (let i = 0, l = deprecated.length; i < l; i++) {
+      if (stringStartsWith(ease, deprecated[i])) {
+        console.warn(`String syntax for \`ease: "${ease}"\` has been removed from the core and replaced by importing and passing the easing function directly: \`ease: ${ease}\``);
+        return none;
+      }
+    }
+  }
+  const easeFunc = isFnc(ease) ? ease : isStr(ease) ? parseEaseString(/** @type {String} */(ease)) : none;
+  return easeFunc;
+};
 
 
 
@@ -3337,6 +3250,7 @@ const parseEase = ease => isFnc(ease) ? ease :
 // TODO: Maybe move the objects creation to values.js and use the decompose function to create the base object
 const fromTargetObject = createDecomposedValueTargetObject();
 const toTargetObject = createDecomposedValueTargetObject();
+const inlineStylesStore = {};
 const toFunctionStore = { func: null };
 const keyframesTargetArray = [null];
 const fastSetValuesArray = [null, null];
@@ -3481,15 +3395,15 @@ class JSAnimation extends Timer {
     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).duration : setValue(duration, animDefaults.duration);
+    const tDuration = hasSpring ? /** @type {Spring} */(ease).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
     const tComposition = isUnd(composition) && targetsLength >= K ? compositionTypes.none : !isUnd(composition) ? composition : animDefaults.composition;
-    // TODO: Do not create an empty object until we know the animation will generate inline styles
-    const animInlineStyles = {};
     // 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;
 
     let iterationDuration = NaN;
     let iterationDelay = NaN;
@@ -3591,7 +3505,7 @@ class JSAnimation extends Timer {
             // Easing are treated differently and don't accept function based value to prevent having to pass a function wrapper that returns an other function all the time
             const tweenEasing = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing || tEasing;
             // Calculate default individual keyframe duration by dividing the tl of keyframes
-            const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).duration : getFunctionValue(setValue(key.duration, (l > 1 ? getFunctionValue(tDuration, target, ti, tl) / l : tDuration)), target, ti, tl);
+            const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(setValue(key.duration, (l > 1 ? getFunctionValue(tDuration, target, ti, tl) / l : tDuration)), target, ti, tl);
             // Default delay value should only be applied to the first tween
             const tweenDelay = getFunctionValue(setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl);
             const computedComposition = getFunctionValue(setValue(key.composition, tComposition), target, ti, tl);
@@ -3641,7 +3555,7 @@ class JSAnimation extends Timer {
                   }
                 } else {
                   decomposeRawValue(
-                    getOriginalAnimatableValue(target, propName, tweenType, animInlineStyles),
+                    getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore),
                     decomposedOriginalValue
                   );
                   if (decomposedOriginalValue.t === valueTypes.UNIT) {
@@ -3659,7 +3573,7 @@ class JSAnimation extends Timer {
                 } else {
                   // No need to get and parse the original value if the tween is part of a timeline and has a previous sibling part of the same timeline
                   decomposeRawValue(parent && prevSibling && prevSibling.parent.parent === parent ? prevSibling._value :
-                  getOriginalAnimatableValue(target, propName, tweenType, animInlineStyles), toTargetObject);
+                  getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore), toTargetObject);
                 }
               }
               if (hasFromvalue) {
@@ -3670,7 +3584,7 @@ class JSAnimation extends Timer {
                 } else {
                   decomposeRawValue(parent && prevSibling && prevSibling.parent.parent === parent ? prevSibling._value :
                   // No need to get and parse the original value if the tween is part of a timeline and has a previous sibling part of the same timeline
-                  getOriginalAnimatableValue(target, propName, tweenType, animInlineStyles), fromTargetObject);
+                  getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore), fromTargetObject);
                 }
               }
             }
@@ -3679,7 +3593,7 @@ class JSAnimation extends Timer {
             if (fromTargetObject.o) {
               fromTargetObject.n = getRelativeValue(
                 !prevSibling ? decomposeRawValue(
-                  getOriginalAnimatableValue(target, propName, tweenType, animInlineStyles),
+                  getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore),
                   decomposedOriginalValue
                 ).n : prevSibling._toNumber,
                 fromTargetObject.n,
@@ -3735,6 +3649,10 @@ class JSAnimation extends Timer {
             // Rounding is necessary here to minimize floating point errors when working in seconds
             const tweenUpdateDuration = round$1(+tweenDuration || minValue, 12);
 
+            // Copy the value of the iniline style if it exist and imediatly nullify it to prevents false positive on other targets
+            let inlineValue = inlineStylesStore[propName];
+            if (!isNil(inlineValue)) inlineStylesStore[propName] = null;
+
             /** @type {Tween} */
             const tween = {
               parent: this,
@@ -3766,6 +3684,7 @@ class JSAnimation extends Timer {
               _isOverlapped: 0,
               _isOverridden: 0,
               _renderTransforms: 0,
+              _inlineValue: inlineValue,
               _prevRep: null, // For replaced tween
               _nextRep: null, // For replaced tween
               _prevAdd: null, // For additive tween
@@ -3868,8 +3787,6 @@ class JSAnimation extends Timer {
     // this._offset += parent ? iterationDelay : 0;
     /** @type {Number} */
     this.iterationDuration = iterationDuration;
-    /** @type {{}} */
-    this._inlineStyles = animInlineStyles;
 
     if (!this._autoplay && shouldTriggerRender) this.onRender(this);
   }
@@ -3903,6 +3820,7 @@ class JSAnimation extends Timer {
       if (tweenFunc) {
         const ogValue = getOriginalAnimatableValue(tween.target, tween.property, tween._tweenType);
         decomposeRawValue(ogValue, decomposedOriginalValue);
+        // TODO: Check for from / to Array based values here,
         decomposeRawValue(tweenFunc(), toTargetObject);
         tween._fromNumbers = cloneArray(decomposedOriginalValue.d);
         tween._fromNumber = decomposedOriginalValue.n;
@@ -3912,6 +3830,8 @@ class JSAnimation extends Timer {
         tween._toNumber = toTargetObject.o ? getRelativeValue(decomposedOriginalValue.n, toTargetObject.n, toTargetObject.o) : toTargetObject.n;
       }
     });
+    // This forces setter animations to render once
+    if (this.duration === minValue) this.restart();
     return this;
   }
 
@@ -3925,8 +3845,12 @@ class JSAnimation extends Timer {
   }
 
   /**
-   * @param  {Callback<this>} [callback]
-   * @return {Promise}
+   * @typedef {this & {then: null}} ResolvedJSAnimation
+   */
+
+  /**
+   * @param  {Callback<ResolvedJSAnimation>} [callback]
+   * @return Promise<this>
    */
   then(callback) {
     return super.then(callback);
@@ -3954,16 +3878,18 @@ const WAAPIAnimationsLookups = {
  * @param {DOMTarget} $el
  * @param {String} [property]
  * @param {WAAPIAnimation} [parent]
+ * @return {globalThis.Animation}
  */
 const removeWAAPIAnimation = ($el, property, parent) => {
   let nextLookup = WAAPIAnimationsLookups._head;
+  let anim;
   while (nextLookup) {
     const next = nextLookup._next;
     const matchTarget = nextLookup.$el === $el;
     const matchProperty = !property || nextLookup.property === property;
     const matchParent = !parent || nextLookup.parent === parent;
     if (matchTarget && matchProperty && matchParent) {
-      const anim = nextLookup.animation;
+      anim = nextLookup.animation;
       try { anim.commitStyles(); } catch {}      anim.cancel();
       removeChild(WAAPIAnimationsLookups, nextLookup);
       const lookupParent = nextLookup.parent;
@@ -3971,8 +3897,8 @@ const removeWAAPIAnimation = ($el, property, parent) => {
         lookupParent._completed++;
         if (lookupParent.animations.length === lookupParent._completed) {
           lookupParent.completed = true;
+          lookupParent.paused = true;
           if (!lookupParent.muteCallbacks) {
-            lookupParent.paused = true;
             lookupParent.onComplete(lookupParent);
             lookupParent._resolve(lookupParent);
           }
@@ -3981,6 +3907,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
     }
     nextLookup = next;
   }
+  return anim;
 };
 
 /**
@@ -3989,7 +3916,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
  * @param {String} property
  * @param {PropertyIndexedKeyframes} keyframes
  * @param {KeyframeAnimationOptions} params
- * @retun {Animation}
+ * @retun {globalThis.Animation}
  */
 const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   const animation = $el.animate(keyframes, params);
@@ -4004,8 +3931,11 @@ const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   removeWAAPIAnimation($el, property);
   addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
   const handleRemove = () => { removeWAAPIAnimation($el, property, parent); };
+  animation.oncancel = handleRemove;
   animation.onremove = handleRemove;
-  animation.onfinish = handleRemove;
+  if (!parent.persist) {
+    animation.onfinish = handleRemove;
+  }
   return animation;
 };
 
@@ -4191,7 +4121,7 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
   const tlChild = targets ?
     new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
     new Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
-  tlChild.init(1);
+  tlChild.init(true);
   // TODO: Might be better to insert at a position relative to startTime?
   addChild(tl, tlChild);
   forEachChildren(tl, (/** @type {Renderable} */child) => {
@@ -4295,7 +4225,7 @@ class Timeline extends Timer {
           parseTimelinePosition(this,a2),
         );
       }
-      return this.init(1); // 1 = internalRender
+      return this.init(true);
     }
   }
 
@@ -4404,8 +4334,12 @@ class Timeline extends Timer {
   }
 
   /**
-   * @param  {Callback<this>} [callback]
-   * @return {Promise}
+   * @typedef {this & {then: null}} ResolvedTimeline
+   */
+
+  /**
+   * @param  {Callback<ResolvedTimeline>} [callback]
+   * @return Promise<this>
    */
   then(callback) {
     return super.then(callback);
@@ -4515,7 +4449,7 @@ class Animatable {
             tween._currentTime = 0;
           });
           if (!isUnd(duration)) animation.stretch(duration);
-          animation.reset(1).resume();
+          animation.reset(true).resume();
           return this;
         }
       };
@@ -4633,8 +4567,10 @@ var numberImports = /*#__PURE__*/Object.freeze({
 
 
 
+
+
 /*
- * Spring ease solver adapted from https://webkit.org/demos/spring/spring.js
+ * Spring easing solver adapted from https://webkit.org/demos/spring/spring.js
  * (c) 2016 Webkit - Apple Inc
  */
 
@@ -4645,25 +4581,46 @@ class Spring {
    * @param {SpringParams} [parameters]
    */
   constructor(parameters = {}) {
+    const hasBounceOrDuration = !isUnd(parameters.bounce) || !isUnd(parameters.duration);
     this.timeStep = .02; // Interval fed to the solver to calculate duration
     this.restThreshold = .0005; // Values below this threshold are considered resting position
     this.restDuration = 200; // Duration in ms used to check if the spring is resting after reaching restThreshold
     this.maxDuration = 60000; // The maximum allowed spring duration in ms (default 1 min)
     this.maxRestSteps = this.restDuration / this.timeStep / K; // How many steps allowed after reaching restThreshold before stopping the duration calculation
     this.maxIterations = this.maxDuration / this.timeStep / K; // Calculate the maximum iterations allowed based on maxDuration
-    this.m = clamp$1(setValue(parameters.mass, 1), 0, maxSpringParamValue);
-    this.s = clamp$1(setValue(parameters.stiffness, 100), 1, maxSpringParamValue);
-    this.d = clamp$1(setValue(parameters.damping, 10), .1, maxSpringParamValue);
+    this.bn = clamp$1(setValue(parameters.bounce, .5), -1, 1); // The bounce percentage between -1 and 1.
+    this.pd = clamp$1(setValue(parameters.duration, 628), 10 * globals.timeScale, maxSpringParamValue * globals.timeScale); // The perceived duration
+    this.m = clamp$1(setValue(parameters.mass, 1), 1, maxSpringParamValue);
+    this.s = clamp$1(setValue(parameters.stiffness, 100), minValue, maxSpringParamValue);
+    this.d = clamp$1(setValue(parameters.damping, 10), minValue, maxSpringParamValue);
     this.v = clamp$1(setValue(parameters.velocity, 0), -maxSpringParamValue, maxSpringParamValue);
     this.w0 = 0;
     this.zeta = 0;
     this.wd = 0;
     this.b = 0;
+    this.completed = false;
     this.solverDuration = 0;
-    this.duration = 0;
+    this.settlingDuration = 0;
+    /** @type {JSAnimation} */
+    this.parent = null;
+    /** @type {Callback<JSAnimation>} */
+    this.onComplete = parameters.onComplete || noop;
+    if (hasBounceOrDuration) this.calculateSDFromBD();
     this.compute();
     /** @type {EasingFunction} */
-    this.ease = t => t === 0 || t === 1 ? t : this.solve(t * this.solverDuration);
+    this.ease = t => {
+      const currentTime = t * this.settlingDuration;
+      const completed = this.completed;
+      const perceivedTime = this.pd;
+      if (currentTime >= perceivedTime && !completed) {
+        this.completed = true;
+        this.onComplete(this.parent);
+      }
+      if (currentTime < perceivedTime && completed) {
+        this.completed = false;
+      }
+      return t === 0 || t === 1 ? t : this.solve(t * this.solverDuration);
+    };
   }
 
   /** @type {EasingFunction} */
@@ -4671,23 +4628,83 @@ class Spring {
     const { zeta, w0, wd, b } = this;
     let t = time;
     if (zeta < 1) {
+      // Underdamped
       t = exp(-t * zeta * w0) * (1 * cos(wd * t) + b * sin(wd * t));
-    } else {
+    } else if (zeta === 1) {
+      // Critically damped
       t = (1 + b * t) * exp(-t * w0);
+    } else {
+      // Overdamped
+      // Using exponential instead of cosh and sinh functions to prevent Infinity
+      // Original exp(-zeta * w0 * t) * (cosh(wd * t) + b * sinh(wd * t))
+      t = ((1 + b) * exp((-zeta * w0 + wd) * t) + (1 - b) * exp((-zeta * w0 - wd) * t)) / 2;
     }
     return 1 - t;
   }
 
+  calculateSDFromBD() {
+    // Apple's SwiftUI perceived spring duration implementation https://developer.apple.com/videos/play/wwdc2023/10158/?time=1010
+    // Equations taken from Kevin Grajeda's article https://www.kvin.me/posts/effortless-ui-spring-animations
+    const pds = globals.timeScale === 1 ? this.pd / K : this.pd;
+    // Mass and velocity should be set to their default values
+    this.m = 1;
+    this.v = 0;
+    // Stiffness = (2π ÷ perceptualDuration)²
+    this.s = pow((2 * PI) / pds, 2);
+    if (this.bn >= 0) {
+      // For bounce ≥ 0 (critically damped to underdamped)
+      // damping = ((1 - bounce) × 4π) ÷ perceptualDuration
+      this.d = ((1 - this.bn) * 4 * PI) / pds;
+    } else {
+      // For bounce < 0 (overdamped)
+      // damping = 4π ÷ (perceptualDuration × (1 + bounce))
+      // Note: (1 + bounce) is positive since bounce is negative
+      this.d = (4 * PI) / (pds * (1 + this.bn));
+    }
+    this.s = round$1(clamp$1(this.s, minValue, maxSpringParamValue), 3);
+    this.d = round$1(clamp$1(this.d, minValue, 300), 3); // Clamping to 300 is needed to prevent insane values in the solver
+  }
+
+  calculateBDFromSD() {
+    // Calculate perceived duration and bounce from stiffness and damping
+    // Note: We assumes m = 1 and v = 0 for these calculations
+    const pds = (2 * PI) / sqrt(this.s);
+    this.pd = pds * (globals.timeScale === 1 ? K : 1);
+    const zeta = this.d / (2 * sqrt(this.s));
+    if (zeta <= 1) {
+      // Critically damped to underdamped
+      this.bn = 1 - (this.d * pds) / (4 * PI);
+    } else {
+      // Overdamped
+      this.bn = (4 * PI) / (this.d * pds) - 1;
+    }
+    this.bn = round$1(clamp$1(this.bn, -1, 1), 3);
+    this.pd = round$1(clamp$1(this.pd, 10 * globals.timeScale, maxSpringParamValue * globals.timeScale), 3);
+  }
+
   compute() {
     const { maxRestSteps, maxIterations, restThreshold, timeStep, m, d, s, v } = this;
     const w0 = this.w0 = clamp$1(sqrt(s / m), minValue, K);
-    const zeta = this.zeta = d / (2 * sqrt(s * m));
-    const wd = this.wd = zeta < 1 ? w0 * sqrt(1 - zeta * zeta) : 0;
-    this.b = zeta < 1 ? (zeta * w0 + -v) / wd : -v + w0;
+    const bouncedZeta = this.zeta = d / (2 * sqrt(s * m));
+    // Calculate wd based on damping type
+    if (bouncedZeta < 1) {
+      // Underdamped
+      this.wd = w0 * sqrt(1 - bouncedZeta * bouncedZeta);
+      this.b = (bouncedZeta * w0 + -v) / this.wd;
+    } else if (bouncedZeta === 1) {
+      // Critically damped
+      this.wd = 0;
+      this.b = -v + w0;
+    } else {
+      // Overdamped
+      this.wd = w0 * sqrt(bouncedZeta * bouncedZeta - 1);
+      this.b = (bouncedZeta * w0 + -v) / this.wd;
+    }
+
     let solverTime = 0;
     let restSteps = 0;
     let iterations = 0;
-    while (restSteps < maxRestSteps && iterations < maxIterations) {
+    while (restSteps <= maxRestSteps && iterations <= maxIterations) {
       if (abs(1 - this.solve(solverTime)) < restThreshold) {
         restSteps++;
       } else {
@@ -4697,15 +4714,26 @@ class Spring {
       solverTime += timeStep;
       iterations++;
     }
-    this.duration = round$1(this.solverDuration * K, 0) * globals.timeScale;
+    this.settlingDuration = round$1(this.solverDuration * K, 0) * globals.timeScale;
   }
 
-  get mass() {
-    return this.m;
+  get bounce() {
+    return this.bn;
   }
 
-  set mass(v) {
-    this.m = clamp$1(setValue(v, 1), 0, maxSpringParamValue);
+  set bounce(v) {
+    this.bn = clamp$1(setValue(v, 1), -1, 1);
+    this.calculateSDFromBD();
+    this.compute();
+  }
+
+  get duration() {
+    return this.pd;
+  }
+
+  set duration(v) {
+    this.pd = clamp$1(setValue(v, 1), 10 * globals.timeScale, maxSpringParamValue * globals.timeScale);
+    this.calculateSDFromBD();
     this.compute();
   }
 
@@ -4714,7 +4742,8 @@ class Spring {
   }
 
   set stiffness(v) {
-    this.s = clamp$1(setValue(v, 100), 1, maxSpringParamValue);
+    this.s = clamp$1(setValue(v, 100), minValue, maxSpringParamValue);
+    this.calculateBDFromSD();
     this.compute();
   }
 
@@ -4723,7 +4752,17 @@ class Spring {
   }
 
   set damping(v) {
-    this.d = clamp$1(setValue(v, 10), .1, maxSpringParamValue);
+    this.d = clamp$1(setValue(v, 10), minValue, maxSpringParamValue);
+    this.calculateBDFromSD();
+    this.compute();
+  }
+
+  get mass() {
+    return this.m;
+  }
+
+  set mass(v) {
+    this.m = clamp$1(setValue(v, 1), 1, maxSpringParamValue);
     this.compute();
   }
 
@@ -4741,7 +4780,18 @@ class Spring {
  * @param {SpringParams} [parameters]
  * @returns {Spring}
  */
-const createSpring = (parameters) => new Spring(parameters);
+const spring = (parameters) => new Spring(parameters);
+
+/**
+ * @deprecated createSpring() is deprecated use spring() instead
+ *
+ * @param {SpringParams} [parameters]
+ * @returns {Spring}
+ */
+const createSpring = (parameters) => {
+  console.warn('createSpring() is deprecated use spring() instead');
+  return new Spring(parameters);
+};
 
 
 
@@ -4860,7 +4910,7 @@ class Transforms {
 }
 
 /**
- * @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams} T
+ * @template {Array<Number>|DOMTargetSelector|String|Number|Boolean|Function|DraggableCursorParams|DraggableDragThresholdParams} T
  * @param {T | ((draggable: Draggable) => T)} value
  * @param {Draggable} draggable
  * @return {T}
@@ -4914,6 +4964,8 @@ class Draggable {
     /** @type {Number} */
     this.dragSpeed = 0;
     /** @type {Number} */
+    this.dragThreshold = 3;
+    /** @type {Number} */
     this.maxVelocity = 0;
     /** @type {Number} */
     this.minVelocity = 0;
@@ -4922,13 +4974,13 @@ class Draggable {
     /** @type {Boolean|DraggableCursorParams} */
     this.cursor = false;
     /** @type {Spring} */
-    this.releaseXSpring = hasSpring ? /** @type {Spring} */(ease) : createSpring({
+    this.releaseXSpring = hasSpring ? /** @type {Spring} */(ease) : spring({
       mass: setValue(parameters.releaseMass, 1),
       stiffness: setValue(parameters.releaseStiffness, 80),
       damping: setValue(parameters.releaseDamping, 20),
     });
     /** @type {Spring} */
-    this.releaseYSpring = hasSpring ? /** @type {Spring} */(ease) : createSpring({
+    this.releaseYSpring = hasSpring ? /** @type {Spring} */(ease) : spring({
       mass: setValue(parameters.releaseMass, 1),
       stiffness: setValue(parameters.releaseStiffness, 80),
       damping: setValue(parameters.releaseDamping, 20),
@@ -5331,6 +5383,16 @@ class Draggable {
       if (onHover) cursorStyles.onHover = onHover;
       if (onGrab) cursorStyles.onGrab = onGrab;
     }
+    const parsedDragThreshold = parseDraggableFunctionParameter(params.dragThreshold, this);
+    const dragThreshold = { mouse: 3, touch: 7 };
+    if (isNum(parsedDragThreshold)) {
+      dragThreshold.mouse = parsedDragThreshold;
+      dragThreshold.touch = parsedDragThreshold;
+    } else if (parsedDragThreshold) {
+      const { mouse, touch } = parsedDragThreshold;
+      if (!isUnd(mouse)) dragThreshold.mouse = mouse;
+      if (!isUnd(touch)) dragThreshold.touch = touch;
+    }
     this.containerArray = isArr(container) ? container : null;
     this.$container = /** @type {HTMLElement} */(container && !this.containerArray ? parseTargets(/** @type {DOMTarget} */(container))[0] : doc.body);
     this.useWin = this.$container === doc.body;
@@ -5345,6 +5407,7 @@ class Draggable {
     this.scrollSpeed = setValue(parseDraggableFunctionParameter(params.scrollSpeed, this), 1.5);
     this.scrollThreshold = setValue(parseDraggableFunctionParameter(params.scrollThreshold, this), 20);
     this.dragSpeed = setValue(parseDraggableFunctionParameter(params.dragSpeed, this), 1);
+    this.dragThreshold = this.isFinePointer ? dragThreshold.mouse : dragThreshold.touch;
     this.minVelocity = setValue(parseDraggableFunctionParameter(params.minVelocity, this), 0);
     this.maxVelocity = setValue(parseDraggableFunctionParameter(params.maxVelocity, this), 50);
     this.velocityMultiplier = setValue(parseDraggableFunctionParameter(params.velocityMultiplier, this), 1);
@@ -5645,9 +5708,8 @@ class Draggable {
       this.$trigger.addEventListener('touchmove', preventDefault, { passive: false });
       this.$trigger.addEventListener('touchend', preventDefault);
 
-
-      if ((!this.disabled[0] && abs(movedX) > 3) || (!this.disabled[1] && abs(movedY) > 3)) {
-
+      // Don't check for a miminim distance move if already dragging
+      if (this.dragged || (!this.disabled[0] && abs(movedX) > this.dragThreshold) || (!this.disabled[1] && abs(movedY) > this.dragThreshold)) {
         this.updateTicker.resume();
         this.pointer[2] = this.pointer[0];
         this.pointer[3] = this.pointer[1];
@@ -5712,8 +5774,8 @@ class Draggable {
       const directionX = dx === cr ? cx > cr ? -1 : 1 : cx < cl ? -1 : 1;
       const distanceX = round$1(cx - dx, 0);
       springX.velocity = disabledY && hasReleaseSpring ? distanceX ? (ds * directionX) / abs(distanceX) : 0 : pv;
-      const { ease, duration, restDuration } = springX;
-      durationX = cx === dx ? 0 : hasReleaseSpring ? duration : duration - (restDuration * globals.timeScale);
+      const { ease, settlingDuration, restDuration } = springX;
+      durationX = cx === dx ? 0 : hasReleaseSpring ? settlingDuration : settlingDuration - (restDuration * globals.timeScale);
       if (hasReleaseSpring) easeX = ease;
       if (durationX > longestReleaseDuration) longestReleaseDuration = durationX;
     }
@@ -5722,8 +5784,8 @@ class Draggable {
       const directionY = dy === cb ? cy > cb ? -1 : 1 : cy < ct ? -1 : 1;
       const distanceY = round$1(cy - dy, 0);
       springY.velocity = disabledX && hasReleaseSpring ? distanceY ? (ds * directionY) / abs(distanceY) : 0 : pv;
-      const { ease, duration, restDuration } = springY;
-      durationY = cy === dy ? 0 : hasReleaseSpring ? duration : duration - (restDuration * globals.timeScale);
+      const { ease, settlingDuration, restDuration } = springY;
+      durationY = cy === dy ? 0 : hasReleaseSpring ? settlingDuration : settlingDuration - (restDuration * globals.timeScale);
       if (hasReleaseSpring) easeY = ease;
       if (durationY > longestReleaseDuration) longestReleaseDuration = durationY;
     }
@@ -6236,6 +6298,8 @@ class ScrollContainer {
     /** @type {Number} */
     this.top = 0;
     /** @type {Number} */
+    this.scale = 1;
+    /** @type {Number} */
     this.zIndex = 0;
     /** @type {Number} */
     this.scrollX = 0;
@@ -6347,6 +6411,7 @@ class ScrollContainer {
       height = $el.clientHeight;
       this.top = elRect.top;
       this.left = elRect.left;
+      this.scale = elRect.width ? width / elRect.width : (elRect.height ? height / elRect.height : 1);
     }
     this.width = width;
     this.height = height;
@@ -6576,6 +6641,8 @@ class ScrollObserver {
     /** @type {Boolean} */
     this.reverted = false;
     /** @type {Boolean} */
+    this.ready = false;
+    /** @type {Boolean} */
     this.completed = false;
     /** @type {Boolean} */
     this.began = false;
@@ -6585,8 +6652,6 @@ class ScrollObserver {
     this.forceEnter = false;
     /** @type {Boolean} */
     this.hasEntered = false;
-    // /** @type {Array.<Number>} */
-    // this.offsets = [];
     /** @type {Number} */
     this.offset = 0;
     /** @type {Number} */
@@ -6634,6 +6699,8 @@ class ScrollObserver {
       // Make sure to pause the linked object in case it's added later
       linked.pause();
       this.linked = linked;
+      // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
+      if (!isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
       // Try to use a target of the linked object if no target parameters specified
       if (!this._params.target) {
         /** @type {HTMLElement} */
@@ -6673,6 +6740,8 @@ class ScrollObserver {
   }
 
   refresh() {
+    // This flag is used to prevent running handleScroll() outside of this.refresh() with values not yet calculated
+    this.ready = true;
     this.reverted = false;
     const params = this._params;
     this.repeat = setValue(parseScrollObserverFunctionParameter(params.repeat, this), true);
@@ -6868,8 +6937,9 @@ class ScrollObserver {
       }
     }
     const rect = $target.getBoundingClientRect();
-    const offset = isHori ? rect.left + container.scrollX - container.left : rect.top + container.scrollY - container.top;
-    const targetSize = isHori ? rect.width : rect.height;
+    const scale = container.scale;
+    const offset = (isHori ? rect.left + container.scrollX - container.left : rect.top + container.scrollY - container.top) * scale;
+    const targetSize = (isHori ? rect.width : rect.height) * scale;
     const containerSize = isHori ? container.width : container.height;
     const scrollSize = isHori ? container.scrollWidth : container.scrollHeight;
     const maxScroll = scrollSize - containerSize;
@@ -6918,8 +6988,6 @@ class ScrollObserver {
     const offsetStart = parsedEnterTarget + offset - parsedEnterContainer;
     const offsetEnd = parsedLeaveTarget + offset - parsedLeaveContainer;
     const scrollDelta = offsetEnd - offsetStart;
-    // this.offsets[0] = offsetX;
-    // this.offsets[1] = offsetY;
     this.offset = offset;
     this.offsetStart = offsetStart;
     this.offsetEnd = offsetEnd;
@@ -6938,6 +7006,7 @@ class ScrollObserver {
   }
 
   handleScroll() {
+    if (!this.ready) return;
     const linked = this.linked;
     const sync = this.sync;
     const syncEase = this.syncEase;
@@ -7061,6 +7130,7 @@ class ScrollObserver {
       this.removeDebug();
     }
     this.reverted = true;
+    this.ready = false;
     return this;
   }
 
@@ -7072,13 +7142,142 @@ class ScrollObserver {
  */
 const onScroll = (parameters = {}) => new ScrollObserver(parameters);
 
+
+
+/**
+ * Cubic Bezier solver adapted from https://github.com/gre/bezier-easing
+ * (c) 2014 Gaëtan Renaudeau
+ */
+
+/**
+ * @param  {Number} aT
+ * @param  {Number} aA1
+ * @param  {Number} aA2
+ * @return {Number}
+ */
+const calcBezier = (aT, aA1, aA2) => (((1 - 3 * aA2 + 3 * aA1) * aT + (3 * aA2 - 6 * aA1)) * aT + (3 * aA1)) * aT;
+
+/**
+ * @param  {Number} aX
+ * @param  {Number} mX1
+ * @param  {Number} mX2
+ * @return {Number}
+ */
+const binarySubdivide = (aX, mX1, mX2) => {
+  let aA = 0, aB = 1, currentX, currentT, i = 0;
+  do {
+    currentT = aA + (aB - aA) / 2;
+    currentX = calcBezier(currentT, mX1, mX2) - aX;
+    if (currentX > 0) {
+      aB = currentT;
+    } else {
+      aA = currentT;
+    }
+  } while (abs(currentX) > .0000001 && ++i < 100);
+  return currentT;
+};
+
+/**
+ * @param  {Number} [mX1] The x coordinate of the first point
+ * @param  {Number} [mY1] The y coordinate of the first point
+ * @param  {Number} [mX2] The x coordinate of the second point
+ * @param  {Number} [mY2] The y coordinate of the second point
+ * @return {EasingFunction}
+ */
+
+const cubicBezier = (mX1 = 0.5, mY1 = 0.0, mX2 = 0.5, mY2 = 1.0) => (mX1 === mY1 && mX2 === mY2) ? none :
+  t => t === 0 || t === 1 ? t :
+  calcBezier(binarySubdivide(t, mX1, mX2), mY1, mY2);
+
+
+
+/**
+ * Steps ease implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
+ * Only covers 'end' and 'start' jumpterms
+ * @param  {Number} steps
+ * @param  {Boolean} [fromStart]
+ * @return {EasingFunction}
+ */
+const steps = (steps = 10, fromStart) => {
+  const roundMethod = fromStart ? ceil : floor;
+  return t => roundMethod(clamp$1(t, 0, 1) * steps) * (1 / steps);
+};
+
+
+
+/**
+ * Without parameters, the linear function creates a non-eased transition.
+ * Parameters, if used, creates a piecewise linear easing by interpolating linearly between the specified points.
+ *
+ * @param  {...(String|Number)} args - Points
+ * @return {EasingFunction}
+ */
+const linear = (...args) => {
+  const argsLength = args.length;
+  if (!argsLength) return none;
+  const totalPoints = argsLength - 1;
+  const firstArg = args[0];
+  const lastArg = args[totalPoints];
+  const xPoints = [0];
+  const yPoints = [parseNumber(firstArg)];
+  for (let i = 1; i < totalPoints; i++) {
+    const arg = args[i];
+    const splitValue = isStr(arg) ?
+    /** @type {String} */(arg).trim().split(' ') :
+    [arg];
+    const value = splitValue[0];
+    const percent = splitValue[1];
+    xPoints.push(!isUnd(percent) ? parseNumber(percent) / 100 : i / totalPoints);
+    yPoints.push(parseNumber(value));
+  }
+  yPoints.push(parseNumber(lastArg));
+  xPoints.push(1);
+  return function easeLinear(t) {
+    for (let i = 1, l = xPoints.length; i < l; i++) {
+      const currentX = xPoints[i];
+      if (t <= currentX) {
+        const prevX = xPoints[i - 1];
+        const prevY = yPoints[i - 1];
+        return prevY + (yPoints[i] - prevY) * (t - prevX) / (currentX - prevX);
+      }
+    }
+    return yPoints[yPoints.length - 1];
+  }
+};
+
+
+
+/**
+ * Generate random steps
+ * @param  {Number} [length] - The number of steps
+ * @param  {Number} [randomness] - How strong the randomness is
+ * @return {EasingFunction}
+ */
+const irregular = (length = 10, randomness = 1) => {
+  const values = [0];
+  const total = length - 1;
+  for (let i = 1; i < total; i++) {
+    const previousValue = values[i - 1];
+    const spacing = i / total;
+    const segmentEnd = (i + 1) / total;
+    const randomVariation = spacing + (segmentEnd - spacing) * Math.random();
+    // Mix the even spacing and random variation based on the randomness parameter
+    const randomValue = spacing * (1 - randomness) + randomVariation * randomness;
+    values.push(clamp$1(randomValue, previousValue, 1));
+  }
+  values.push(1);
+  return linear(...values);
+};
+
 var index$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  Spring: Spring,
+  createSpring: createSpring,
   cubicBezier: cubicBezier,
   eases: eases,
   irregular: irregular,
   linear: linear,
-  none: none,
+  spring: spring,
   steps: steps
 });
 
@@ -7454,20 +7653,24 @@ const getPath = path => {
 
 /**
  * @param {SVGGeometryElement} $path
+ * @param {Number} totalLength
  * @param {Number} progress
  * @param {Number}lookup
  * @return {DOMPoint}
  */
-const getPathPoint = ($path, progress, lookup = 0) => {
-  return $path.getPointAtLength(progress + lookup >= 1 ? progress + lookup : 0);
+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}
  */
-const getPathProgess = ($path, pathProperty) => {
+const getPathProgess = ($path, pathProperty, offset = 0) => {
   return $el => {
     const totalLength = +($path.getTotalLength());
     const inSvg = $el[isSvgSymbol];
@@ -7478,12 +7681,14 @@ const getPathProgess = ($path, pathProperty) => {
       to: totalLength,
       /** @type {TweenModifier} */
       modifier: progress => {
+        const offsetLength = offset * totalLength;
+        const newProgress = progress + offsetLength;
         if (pathProperty === 'a') {
-          const p0 = getPathPoint($path, progress, -1);
-          const p1 = getPathPoint($path, progress, 1);
+          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, progress, 0);
+          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
@@ -7495,14 +7700,15 @@ const getPathProgess = ($path, pathProperty) => {
 
 /**
  * @param {TargetsParam} path
+ * @param {Number} [offset=0]
  */
-const createMotionPath = path => {
+const createMotionPath = (path, offset = 0) => {
   const $path = getPath(path);
   if (!$path) return;
   return {
-    translateX: getPathProgess($path, 'x'),
-    translateY: getPathProgess($path, 'y'),
-    rotate: getPathProgess($path, 'a'),
+    translateX: getPathProgess($path, 'x', offset),
+    translateY: getPathProgess($path, 'y', offset),
+    rotate: getPathProgess($path, 'a', offset),
   }
 };
 
@@ -7614,8 +7820,18 @@ const createDrawable = (selector, start = 0, end = 0) => {
  * @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) return;
+  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];
@@ -8134,21 +8350,11 @@ var index = /*#__PURE__*/Object.freeze({
  */
 const easingToLinear = (fn, samples = 100) => {
   const points = [];
-  for (let i = 0; i <= samples; i++) points.push(fn(i / samples));
+  for (let i = 0; i <= samples; i++) points.push(round$1(fn(i / samples), 4));
   return `linear(${points.join(', ')})`;
 };
 
-const WAAPIEasesLookups = {
-  in: 'ease-in',
-  out: 'ease-out',
-  inOut: 'ease-in-out',
-};
-
-const WAAPIeases = /*#__PURE__*/(() => {
-  const list = {};
-  for (let type in easeTypes) list[type] = (/** @type {String|Number} */p) => easeTypes[type](easeInPower(p));
-  return /** @type {Record<String, EasingFunction>} */(list);
-})();
+const WAAPIEasesLookups = {};
 
 /**
  * @param  {EasingParam} ease
@@ -8169,9 +8375,10 @@ const parseWAAPIEasing = (ease) => {
     } else if (stringStartsWith(ease, 'cubicB')) {
       parsedEase = toLowerCase(ease);
     } else {
-      const parsed = parseEaseString(ease, WAAPIeases, WAAPIEasesLookups);
+      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);
@@ -8212,7 +8419,8 @@ let transformsPropertiesRegistered = null;
  * @return {String}
  */
 const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
-  let v = getFunctionValue(/** @type {any} */(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`;
@@ -8292,7 +8500,7 @@ class WAAPIAnimation {
     /** @type {PlaybackDirection} */
     const direction = alternate ? reversed ? 'alternate-reverse' : 'alternate' : reversed ? 'reverse' : 'normal';
     /** @type {FillMode} */
-    const fill = 'forwards';
+    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);
@@ -8304,7 +8512,7 @@ class WAAPIAnimation {
     /** @type {globalThis.Animation}] */
     this.controlAnimation = null;
     /** @type {Callback<this>} */
-    this.onComplete = params.onComplete || noop;
+    this.onComplete = params.onComplete || /** @type {Callback<WAAPIAnimation>} */(/** @type {unknown} */(globals.defaults.onComplete));
     /** @type {Number} */
     this.duration = 0;
     /** @type {Boolean} */
@@ -8315,6 +8523,8 @@ class WAAPIAnimation {
     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} */
@@ -8323,17 +8533,18 @@ class WAAPIAnimation {
     this._resolve = noop; // Used by .then()
     /** @type {Number} */
     this._completed = 0;
-    /** @type {Array<Object>}] */
-    this._inlineStyles = parsedTargets.map($el => $el.getAttribute('style'));
+    /** @type {Array.<Object>} */
+    this._inlineStyles = [];
 
     parsedTargets.forEach(($el, i) => {
 
       const cachedTransforms = $el[transformsSymbol];
-
       const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
+      const elStyle = $el.style;
+      const inlineStyles = this._inlineStyles[i] = {};
 
       /** @type {Number} */
-      const duration = (spring ? /** @type {Spring} */(spring).duration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+      const duration = (spring ? /** @type {Spring} */(spring).settlingDuration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
       /** @type {Number} */
       const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, targetsLength) * timeScale;
       /** @type {CompositeOperation} */
@@ -8347,6 +8558,12 @@ class WAAPIAnimation {
         const tweenParams = { iterations, direction, fill, easing, duration, delay, composite };
         const propertyValue = params[name];
         const individualTransformProperty = hasIndividualTransforms ? validTransforms.includes(name) ? name : shortTransforms.get(name) : false;
+
+        const styleName = individualTransformProperty ? 'transform' : name;
+        if (!inlineStyles[styleName]) {
+          inlineStyles[styleName] = elStyle[styleName];
+        }
+
         let parsedPropertyValue;
         if (isObj(propertyValue)) {
           const tweenOptions = /** @type {WAAPITweenOptions} */(propertyValue);
@@ -8355,7 +8572,7 @@ class WAAPIAnimation {
           const to = /** @type {WAAPITweenOptions} */(tweenOptions).to;
           const from = /** @type {WAAPITweenOptions} */(tweenOptions).from;
           /** @type {Number} */
-          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).duration : getFunctionValue(setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
+          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} */
@@ -8372,10 +8589,10 @@ class WAAPIAnimation {
           addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
           if (!isUnd(from)) {
             if (!individualTransformProperty) {
-              $el.style[name] = keyframes[name][0];
+              elStyle[name] = keyframes[name][0];
             } else {
               const key = `--${individualTransformProperty}`;
-              $el.style.setProperty(key, keyframes[key][0]);
+              elStyle.setProperty(key, keyframes[key][0]);
             }
           }
         } else {
@@ -8396,7 +8613,7 @@ class WAAPIAnimation {
         for (let t in cachedTransforms) {
           transforms += `${transformsFragmentStrings[t]}var(--${t})) `;
         }
-        $el.style.transform = transforms;
+        elStyle.transform = transforms;
       }
     });
 
@@ -8441,7 +8658,8 @@ class WAAPIAnimation {
       // 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
-      if (t >= this.duration) anim.play();
+      // This is not needed for persisting animations since they never finish.
+      if (!this.persist && t >= this.duration) anim.play();
       anim.currentTime = t;
     });
   }
@@ -8511,25 +8729,46 @@ class WAAPIAnimation {
   }
 
   cancel() {
-    this.forEach('cancel');
-    return this.pause();
+    this.muteCallbacks = true; // This prevents triggering the onComplete callback and resolving the Promise
+    return this.commitStyles().forEach('cancel');
   }
 
   revert() {
-    this.cancel();
-    this.targets.forEach(($el, i) => $el.setAttribute('style', this._inlineStyles[i]) );
+    // 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');
+    });
     return this;
   }
 
   /**
-   * @param  {WAAPICallback} [callback]
-   * @return {Promise}
+   * @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(this);
+      callback(/** @type {ResolvedWAAPIAnimation} */(this));
       this.then = then;
       this._resolve = noop;
     };
@@ -8551,4 +8790,4 @@ const waapi = {
   convertEase: easingToLinear
 };
 
-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, none, onScroll, padEnd, padStart, radToDeg, random, randomPick, remove, round, roundPad, scrollContainers, set, shuffle, snap, split, splitText, stagger, steps, index$1 as svg, sync, index as text, index$2 as utils, waapi, wrap };
+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 };