animejs 4.2.0-beta.0 → 4.2.1

package/dist/modules/core/styles.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -10,9 +10,6 @@
 var consts = require('./consts.cjs');
 var helpers = require('./helpers.cjs');
 
-const propertyNamesCache = {};
-
-
 /**
  * @import {
  *   JSAnimation,
@@ -28,6 +25,8 @@ const propertyNamesCache = {};
 * } from '../types/index.js'
 */
 
+const propertyNamesCache = {};
+
 /**
  * @param  {String} propertyName
  * @param  {Target} target
@@ -74,10 +73,11 @@ const cleanInlineStyles = renderable => {
       const tweenTarget = tween.target;
       if (tweenTarget[consts.isDomSymbol]) {
         const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
-        const originalInlinedValue = animation._inlineStyles[tweenProperty];
+        const originalInlinedValue = tween._inlineValue;
+        const tweenHadNoInlineValue = helpers.isNil(originalInlinedValue) || originalInlinedValue === consts.emptyString;
         if (tween._tweenType === consts.tweenTypes.TRANSFORM) {
           const cachedTransforms = tweenTarget[consts.transformsSymbol];
-          if (helpers.isUnd(originalInlinedValue) || originalInlinedValue === consts.emptyString) {
+          if (tweenHadNoInlineValue) {
             delete cachedTransforms[tweenProperty];
           } else {
             cachedTransforms[tweenProperty] = originalInlinedValue;
@@ -94,8 +94,8 @@ const cleanInlineStyles = renderable => {
             }
           }
         } else {
-          if (helpers.isUnd(originalInlinedValue) || originalInlinedValue === consts.emptyString) {
-            targetStyle.removeProperty(tweenProperty);
+          if (tweenHadNoInlineValue) {
+            targetStyle.removeProperty(helpers.toLowerCase(tweenProperty));
           } else {
             targetStyle[tweenProperty] = originalInlinedValue;
           }

package/dist/modules/core/styles.js

@@ -1,15 +1,12 @@
 /**
  * Anime.js - core - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
-import { tweenTypes, shortTransforms, isDomSymbol, transformsSymbol, emptyString, transformsFragmentStrings } from './consts.js';
-import { forEachChildren, isSvg, toLowerCase, isUnd } from './helpers.js';
-
-const propertyNamesCache = {};
-
+import { tweenTypes, shortTransforms, isDomSymbol, transformsSymbol, transformsFragmentStrings, emptyString } from './consts.js';
+import { forEachChildren, isSvg, toLowerCase, isNil } from './helpers.js';
 
 /**
  * @import {
@@ -26,6 +23,8 @@ const propertyNamesCache = {};
 * } from '../types/index.js'
 */
 
+const propertyNamesCache = {};
+
 /**
  * @param  {String} propertyName
  * @param  {Target} target
@@ -72,10 +71,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;
@@ -92,8 +92,8 @@ const cleanInlineStyles = renderable => {
             }
           }
         } else {
-          if (isUnd(originalInlinedValue) || originalInlinedValue === emptyString) {
-            targetStyle.removeProperty(tweenProperty);
+          if (tweenHadNoInlineValue) {
+            targetStyle.removeProperty(toLowerCase(tweenProperty));
           } else {
             targetStyle[tweenProperty] = originalInlinedValue;
           }

package/dist/modules/core/targets.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/core/targets.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/core/transforms.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/core/transforms.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/core/units.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/core/units.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/core/values.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -41,19 +41,30 @@ const setValue = (targetValue, defaultValue) => {
  * @return {any}
  */
 const getFunctionValue = (value, target, index, total, store) => {
+  let func;
   if (helpers.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 (helpers.isStr(value) && helpers.stringStartsWith(value, consts.cssVarPrefix)) {
+    func = () => {
+      const match = value.match(consts.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() === consts.emptyString) && fallbackValue) {
+        computed = fallbackValue.trim();
+      }
+      return computed || 0;
+    };
   } else {
     return value;
   }
+  if (store) store.func = func;
+  return func();
 };
 
 /**

package/dist/modules/core/values.js

@@ -1,12 +1,12 @@
 /**
  * Anime.js - core - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
-import { tweenTypes, isDomSymbol, isSvgSymbol, validTransforms, shortTransforms, valueTypes, unitsExecRgx, digitWithExponentRgx, proxyTargetSymbol } from './consts.js';
-import { isValidSVGAttribute, stringStartsWith, isUnd, isCol, isFnc, cloneArray } from './helpers.js';
+import { tweenTypes, isDomSymbol, isSvgSymbol, validTransforms, shortTransforms, valueTypes, unitsExecRgx, digitWithExponentRgx, proxyTargetSymbol, cssVarPrefix, cssVariableMatchRgx, emptyString } from './consts.js';
+import { isUnd, isValidSVGAttribute, stringStartsWith, isCol, isFnc, isStr, cloneArray } from './helpers.js';
 import { parseInlineTransforms } from './transforms.js';
 import { convertColorStringValuesToRgbaArray } from './colors.js';
 
@@ -39,19 +39,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();
 };
 
 /**

package/dist/modules/draggable/draggable.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -17,8 +17,8 @@ var timer = require('../timer/timer.cjs');
 var animation = require('../animation/animation.cjs');
 var composition = require('../animation/composition.cjs');
 var animatable = require('../animatable/animatable.cjs');
-var eases = require('../easings/eases.cjs');
-var spring = require('../spring/spring.cjs');
+var parser = require('../easings/eases/parser.cjs');
+var index = require('../easings/spring/index.cjs');
 var target = require('../utils/target.cjs');
 
 /**
@@ -26,6 +26,7 @@ var target = require('../utils/target.cjs');
  *   DOMTarget,
  *   DOMTargetSelector,
  *   DraggableCursorParams,
+ *   DraggableDragThresholdParams,
  *   TargetsParam,
  *   DraggableParams,
  *   EasingFunction,
@@ -40,7 +41,7 @@ var target = require('../utils/target.cjs');
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**
@@ -156,7 +157,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}
@@ -178,7 +179,7 @@ class Draggable {
     const trigger = parameters.trigger;
     const modifier = parameters.modifier;
     const ease = parameters.releaseEase;
-    const customEase = ease && eases.parseEase(ease);
+    const customEase = ease && parser.parseEase(ease);
     const hasSpring = !helpers.isUnd(ease) && !helpers.isUnd(/** @type {Spring} */(ease).ease);
     const xProp = /** @type {String} */(helpers.isObj(paramX) && !helpers.isUnd(/** @type {Object} */(paramX).mapTo) ? /** @type {Object} */(paramX).mapTo : 'translateX');
     const yProp = /** @type {String} */(helpers.isObj(paramY) && !helpers.isUnd(/** @type {Object} */(paramY).mapTo) ? /** @type {Object} */(paramY).mapTo : 'translateY');
@@ -210,6 +211,8 @@ class Draggable {
     /** @type {Number} */
     this.dragSpeed = 0;
     /** @type {Number} */
+    this.dragThreshold = 3;
+    /** @type {Number} */
     this.maxVelocity = 0;
     /** @type {Number} */
     this.minVelocity = 0;
@@ -218,19 +221,19 @@ class Draggable {
     /** @type {Boolean|DraggableCursorParams} */
     this.cursor = false;
     /** @type {Spring} */
-    this.releaseXSpring = hasSpring ? /** @type {Spring} */(ease) : spring.createSpring({
+    this.releaseXSpring = hasSpring ? /** @type {Spring} */(ease) : index.spring({
       mass: values.setValue(parameters.releaseMass, 1),
       stiffness: values.setValue(parameters.releaseStiffness, 80),
       damping: values.setValue(parameters.releaseDamping, 20),
     });
     /** @type {Spring} */
-    this.releaseYSpring = hasSpring ? /** @type {Spring} */(ease) : spring.createSpring({
+    this.releaseYSpring = hasSpring ? /** @type {Spring} */(ease) : index.spring({
       mass: values.setValue(parameters.releaseMass, 1),
       stiffness: values.setValue(parameters.releaseStiffness, 80),
       damping: values.setValue(parameters.releaseDamping, 20),
     });
     /** @type {EasingFunction} */
-    this.releaseEase = customEase || eases.eases.outQuint;
+    this.releaseEase = customEase || parser.eases.outQuint;
     /** @type {Boolean} */
     this.hasReleaseSpring = hasSpring;
     /** @type {Callback<this>} */
@@ -627,6 +630,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 (helpers.isNum(parsedDragThreshold)) {
+      dragThreshold.mouse = parsedDragThreshold;
+      dragThreshold.touch = parsedDragThreshold;
+    } else if (parsedDragThreshold) {
+      const { mouse, touch } = parsedDragThreshold;
+      if (!helpers.isUnd(mouse)) dragThreshold.mouse = mouse;
+      if (!helpers.isUnd(touch)) dragThreshold.touch = touch;
+    }
     this.containerArray = helpers.isArr(container) ? container : null;
     this.$container = /** @type {HTMLElement} */(container && !this.containerArray ? targets.parseTargets(/** @type {DOMTarget} */(container))[0] : consts.doc.body);
     this.useWin = this.$container === consts.doc.body;
@@ -641,6 +654,7 @@ class Draggable {
     this.scrollSpeed = values.setValue(parseDraggableFunctionParameter(params.scrollSpeed, this), 1.5);
     this.scrollThreshold = values.setValue(parseDraggableFunctionParameter(params.scrollThreshold, this), 20);
     this.dragSpeed = values.setValue(parseDraggableFunctionParameter(params.dragSpeed, this), 1);
+    this.dragThreshold = this.isFinePointer ? dragThreshold.mouse : dragThreshold.touch;
     this.minVelocity = values.setValue(parseDraggableFunctionParameter(params.minVelocity, this), 0);
     this.maxVelocity = values.setValue(parseDraggableFunctionParameter(params.maxVelocity, this), 50);
     this.velocityMultiplier = values.setValue(parseDraggableFunctionParameter(params.velocityMultiplier, this), 1);
@@ -753,7 +767,7 @@ class Draggable {
    * @param {EasingParam} [ease]
    * @return {this}
    */
-  scrollInView(duration, gap = 0, ease = eases.eases.inOutQuad) {
+  scrollInView(duration, gap = 0, ease = parser.eases.inOutQuad) {
     this.updateScrollCoords();
     const x = this.destX;
     const y = this.destY;
@@ -796,7 +810,7 @@ class Draggable {
    * @param  {EasingParam} [ease]
    * @return {this}
    */
-  animateInView(duration, gap = 0, ease = eases.eases.inOutQuad) {
+  animateInView(duration, gap = 0, ease = parser.eases.inOutQuad) {
     this.stop();
     this.updateBoundingValues();
     const x = this.x;
@@ -877,7 +891,7 @@ class Draggable {
         cursor: /** @type {DraggableCursorParams} */(this.cursor).onGrab
       });
     }
-    this.scrollInView(100, 0, eases.eases.out(3));
+    this.scrollInView(100, 0, parser.eases.out(3));
     this.onGrab(this);
 
     consts.doc.addEventListener('touchmove', this);
@@ -941,9 +955,8 @@ class Draggable {
       this.$trigger.addEventListener('touchmove', preventDefault, { passive: false });
       this.$trigger.addEventListener('touchend', preventDefault);
 
-
-      if ((!this.disabled[0] && helpers.abs(movedX) > 3) || (!this.disabled[1] && helpers.abs(movedY) > 3)) {
-
+      // Don't check for a miminim distance move if already dragging
+      if (this.dragged || (!this.disabled[0] && helpers.abs(movedX) > this.dragThreshold) || (!this.disabled[1] && helpers.abs(movedY) > this.dragThreshold)) {
         this.updateTicker.resume();
         this.pointer[2] = this.pointer[0];
         this.pointer[3] = this.pointer[1];
@@ -1008,8 +1021,8 @@ class Draggable {
       const directionX = dx === cr ? cx > cr ? -1 : 1 : cx < cl ? -1 : 1;
       const distanceX = helpers.round(cx - dx, 0);
       springX.velocity = disabledY && hasReleaseSpring ? distanceX ? (ds * directionX) / helpers.abs(distanceX) : 0 : pv;
-      const { ease, duration, restDuration } = springX;
-      durationX = cx === dx ? 0 : hasReleaseSpring ? duration : duration - (restDuration * globals.globals.timeScale);
+      const { ease, settlingDuration, restDuration } = springX;
+      durationX = cx === dx ? 0 : hasReleaseSpring ? settlingDuration : settlingDuration - (restDuration * globals.globals.timeScale);
       if (hasReleaseSpring) easeX = ease;
       if (durationX > longestReleaseDuration) longestReleaseDuration = durationX;
     }
@@ -1018,8 +1031,8 @@ class Draggable {
       const directionY = dy === cb ? cy > cb ? -1 : 1 : cy < ct ? -1 : 1;
       const distanceY = helpers.round(cy - dy, 0);
       springY.velocity = disabledX && hasReleaseSpring ? distanceY ? (ds * directionY) / helpers.abs(distanceY) : 0 : pv;
-      const { ease, duration, restDuration } = springY;
-      durationY = cy === dy ? 0 : hasReleaseSpring ? duration : duration - (restDuration * globals.globals.timeScale);
+      const { ease, settlingDuration, restDuration } = springY;
+      durationY = cy === dy ? 0 : hasReleaseSpring ? settlingDuration : settlingDuration - (restDuration * globals.globals.timeScale);
       if (hasReleaseSpring) easeY = ease;
       if (durationY > longestReleaseDuration) longestReleaseDuration = durationY;
     }

package/dist/modules/draggable/draggable.d.ts

@@ -30,6 +30,8 @@ export class Draggable {
     /** @type {Number} */
     dragSpeed: number;
     /** @type {Number} */
+    dragThreshold: number;
+    /** @type {Number} */
     maxVelocity: number;
     /** @type {Number} */
     minVelocity: number;
@@ -206,7 +208,7 @@ export class Draggable {
 }
 export function createDraggable(target: TargetsParam, parameters?: DraggableParams): Draggable;
 import type { DraggableCursorParams } from '../types/index.js';
-import type { Spring } from '../spring/spring.js';
+import type { Spring } from '../easings/spring/index.js';
 import type { EasingFunction } from '../types/index.js';
 import type { Callback } from '../types/index.js';
 import type { AnimatableObject } from '../types/index.js';

package/dist/modules/draggable/draggable.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
@@ -8,15 +8,15 @@
 import { globals, scope } from '../core/globals.js';
 import { doc, win, noop, maxValue, compositionTypes } from '../core/consts.js';
 import { parseTargets } from '../core/targets.js';
-import { isUnd, isObj, isArr, now, atan2, round, max, snap, clamp, abs, sqrt, cos, sin, isFnc } from '../core/helpers.js';
+import { isUnd, isObj, isArr, now, atan2, round, max, snap, clamp, isNum, abs, sqrt, cos, sin, isFnc } from '../core/helpers.js';
 import { setValue } from '../core/values.js';
 import { mapRange } from '../utils/number.js';
 import { Timer } from '../timer/timer.js';
 import { JSAnimation } from '../animation/animation.js';
 import { removeTargetsFromRenderable } from '../animation/composition.js';
 import { Animatable } from '../animatable/animatable.js';
-import { parseEase, eases } from '../easings/eases.js';
-import { createSpring } from '../spring/spring.js';
+import { parseEase, eases } from '../easings/eases/parser.js';
+import { spring } from '../easings/spring/index.js';
 import { get, set } from '../utils/target.js';
 
 /**
@@ -24,6 +24,7 @@ import { get, set } from '../utils/target.js';
  *   DOMTarget,
  *   DOMTargetSelector,
  *   DraggableCursorParams,
+ *   DraggableDragThresholdParams,
  *   TargetsParam,
  *   DraggableParams,
  *   EasingFunction,
@@ -38,7 +39,7 @@ import { get, set } from '../utils/target.js';
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**
@@ -154,7 +155,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}
@@ -208,6 +209,8 @@ class Draggable {
     /** @type {Number} */
     this.dragSpeed = 0;
     /** @type {Number} */
+    this.dragThreshold = 3;
+    /** @type {Number} */
     this.maxVelocity = 0;
     /** @type {Number} */
     this.minVelocity = 0;
@@ -216,13 +219,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),
@@ -625,6 +628,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;
@@ -639,6 +652,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);
@@ -939,9 +953,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];
@@ -1006,8 +1019,8 @@ class Draggable {
       const directionX = dx === cr ? cx > cr ? -1 : 1 : cx < cl ? -1 : 1;
       const distanceX = round(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;
     }
@@ -1016,8 +1029,8 @@ class Draggable {
       const directionY = dy === cb ? cy > cb ? -1 : 1 : cy < ct ? -1 : 1;
       const distanceY = round(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;
     }

package/dist/modules/draggable/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/draggable/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - draggable - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */

package/dist/modules/easings/{cubic-bezier.cjs → cubic-bezier/index.cjs}

@@ -1,19 +1,19 @@
 /**
  * Anime.js - easings - CJS
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
 'use strict';
 
-var helpers = require('../core/helpers.cjs');
-var none = require('./none.cjs');
+var helpers = require('../../core/helpers.cjs');
+var none = require('../none.cjs');
 
 /**
  * @import {
  *   EasingFunction,
- * } from '../types/index.js'
+ * } from '../../types/index.js'
 */
 
 /**

package/dist/modules/easings/{cubic-bezier.d.ts → cubic-bezier/index.d.ts}

@@ -1,2 +1,2 @@
 export function cubicBezier(mX1?: number, mY1?: number, mX2?: number, mY2?: number): EasingFunction;
-import type { EasingFunction } from '../types/index.js';
+import type { EasingFunction } from '../../types/index.js';

package/dist/modules/easings/{cubic-bezier.js → cubic-bezier/index.js}

@@ -1,17 +1,17 @@
 /**
  * Anime.js - easings - ESM
- * @version v4.2.0
+ * @version v4.2.1
  * @license MIT
  * @copyright 2025 - Julian Garnier
  */
 
-import { abs } from '../core/helpers.js';
-import { none } from './none.js';
+import { abs } from '../../core/helpers.js';
+import { none } from '../none.js';
 
 /**
  * @import {
  *   EasingFunction,
- * } from '../types/index.js'
+ * } from '../../types/index.js'
 */
 
 /**

package/dist/modules/easings/eases/index.cjs

@@ -0,0 +1,14 @@
+/**
+ * Anime.js - easings - CJS
+ * @version v4.2.1
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var parser = require('./parser.cjs');
+
+
+
+exports.eases = parser.eases;

package/dist/modules/easings/eases/index.d.ts

@@ -0,0 +1 @@
+export { eases } from "./parser.js";