animejs 4.1.0 → 4.1.2

package/lib/anime.esm.js

@@ -1,6 +1,6 @@
 /**
  * anime.js - ESM
- * @version v4.1.0
+ * @version v4.1.2
  * @author Julian Garnier
  * @license MIT
  * @copyright (c) 2025 Julian Garnier
@@ -470,10 +470,10 @@
 // TODO: Do we need to check if we're running inside a worker ?
 const isBrowser = typeof window !== 'undefined';
 
-/** @type {Object|Null} */
-const win = isBrowser ? window : null;
+/** @type {Window & {AnimeJS: Array}|null} */
+const win = isBrowser ? /** @type {Window & {AnimeJS: Array}} */(/** @type {unknown} */(window)) : null;
 
-/** @type {Document} */
+/** @type {Document|null} */
 const doc = isBrowser ? document : null;
 
 // Enums
@@ -625,7 +625,7 @@ const globals = {
   tickThreshold: 200,
 };
 
-const globalVersions = { version: '4.1.0', engine: null };
+const globalVersions = { version: '4.1.2', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -1316,7 +1316,7 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
     if (!muteCallbacks && tlChildrenHasRendered) tl.onRender(/** @type {CallbackArgument} */(tl));
 
     // Triggers the timeline onComplete() once all chindren all completed and the current time has reached the end
-    if (tlChildrenHaveCompleted && tl._currentTime >= tl.duration) {
+    if ((tlChildrenHaveCompleted || tlIsRunningBackwards) && tl._currentTime >= tl.duration) {
       // Make sure the paused flag is false in case it has been skipped in the render function
       tl.paused = true;
       if (!tl.completed) {
@@ -3909,7 +3909,8 @@ class JSAnimation extends Timer {
         tween._fromNumber = decomposedOriginalValue.n;
         tween._toNumbers = cloneArray(toTargetObject.d);
         tween._strings = cloneArray(toTargetObject.s);
-        tween._toNumber = toTargetObject.n;
+        // Make sure to apply relative operators https://github.com/juliangarnier/anime/issues/1025
+        tween._toNumber = toTargetObject.o ? getRelativeValue(decomposedOriginalValue.n, toTargetObject.n, toTargetObject.o) : toTargetObject.n;
       }
     });
     return this;
@@ -5741,7 +5742,8 @@ class Draggable {
       this.deltaY = dy;
       this.coords[2] = x;
       this.coords[3] = y;
-      if (hasUpdated) {
+      // Check if dx or dy are not 0 to check if the draggable has actually moved https://github.com/juliangarnier/anime/issues/1032
+      if (hasUpdated && (dx || dy)) {
         this.onUpdate(this);
       }
       if (!hasReleased) {
@@ -6526,7 +6528,6 @@ class Draggable {
       this.targetStyles.revert();
       this.targetStyles = null;
     }
-    this.stop();
     this.$target.classList.add('is-disabled');
     this.$trigger.removeEventListener('touchstart', this);
     this.$trigger.removeEventListener('mousedown', this);
@@ -6549,6 +6550,7 @@ class Draggable {
     this.overshootYTicker.revert();
     this.resizeTicker.revert();
     this.animate.revert();
+    this.resizeObserver.disconnect();
     return this;
   }
 
@@ -6826,7 +6828,7 @@ const createScope = params => new Scope(params);
  * @return {Number}
  */
 const getMaxViewHeight = () => {
-  const $el = document.createElement('div');
+  const $el = doc.createElement('div');
   doc.body.appendChild($el);
   $el.style.height = '100lvh';
   const height = $el.offsetHeight;
@@ -7025,7 +7027,7 @@ class ScrollContainer {
     this.dataTimer.cancel();
     this.resizeTicker.cancel();
     this.wakeTicker.cancel();
-    this.resizeObserver.unobserve(this.element);
+    this.resizeObserver.disconnect();
     (this.useWin ? win : this.element).removeEventListener('scroll', this);
     scrollContainers.delete(this.element);
   }
@@ -7254,8 +7256,8 @@ class ScrollObserver {
     this.forceEnter = false;
     /** @type {Boolean} */
     this.hasEntered = false;
-    /** @type {Array.<Number>} */
-    this.offsets = [];
+    // /** @type {Array.<Number>} */
+    // this.offsets = [];
     /** @type {Number} */
     this.offset = 0;
     /** @type {Number} */
@@ -7499,33 +7501,46 @@ class ScrollObserver {
     const linked = this.linked;
     let linkedTime;
     let $el = $target;
-    let offsetX = 0;
-    let offsetY = 0;
+    // let offsetX = 0;
+    // let offsetY = 0;
+    // let $offsetParent = $el;
     /** @type {Element} */
-    let $offsetParent = $el;
     if (linked) {
       linkedTime = linked.currentTime;
       linked.seek(0, true);
     }
-    const isContainerStatic = getTargetValue(container.element, 'position') === 'static' ? setTargetValues(container.element, { position: 'relative '}) : false;
+    /* Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
+    // const isContainerStatic = getTargetValue(container.element, 'position') === 'static' ? setTargetValues(container.element, { position: 'relative '}) : false;
+    // while ($el && $el !== container.element && $el !== doc.body) {
+    //   const isSticky = getTargetValue($el, 'position') === 'sticky' ?
+    //                    setTargetValues($el, { position: 'static' }) :
+    //                    false;
+    //   if ($el === $offsetParent) {
+    //     offsetX += $el.offsetLeft || 0;
+    //     offsetY += $el.offsetTop || 0;
+    //     $offsetParent = $el.offsetParent;
+    //   }
+    //   $el = /** @type {HTMLElement} */($el.parentElement);
+    //   if (isSticky) {
+    //     if (!stickys) stickys = [];
+    //     stickys.push(isSticky);
+    //   }
+    // }
+    // if (isContainerStatic) isContainerStatic.revert();
+    // const offset = isHori ? offsetX : offsetY;
+    // const targetSize = isHori ? $target.offsetWidth : $target.offsetHeight;
+
     while ($el && $el !== container.element && $el !== doc.body) {
-      const isSticky = getTargetValue($el, 'position') === 'sticky' ?
-                       setTargetValues($el, { position: 'static' }) :
-                       false;
-      if ($el === $offsetParent) {
-        offsetX += $el.offsetLeft || 0;
-        offsetY += $el.offsetTop || 0;
-        $offsetParent = $el.offsetParent;
-      }
-      $el = /** @type {HTMLElement} */($el.parentElement);
+      const isSticky = getTargetValue($el, 'position') === 'sticky' ? setTargetValues($el, { position: 'static' }) : false;
+      $el = $el.parentElement;
       if (isSticky) {
         if (!stickys) stickys = [];
         stickys.push(isSticky);
       }
     }
-    if (isContainerStatic) isContainerStatic.revert();
-    const offset = isHori ? offsetX : offsetY;
-    const targetSize = isHori ? $target.offsetWidth : $target.offsetHeight;
+    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 containerSize = isHori ? container.width : container.height;
     const scrollSize = isHori ? container.scrollWidth : container.scrollHeight;
     const maxScroll = scrollSize - containerSize;
@@ -7574,8 +7589,8 @@ 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.offsets[0] = offsetX;
+    // this.offsets[1] = offsetY;
     this.offset = offset;
     this.offsetStart = offsetStart;
     this.offsetEnd = offsetEnd;
@@ -8082,6 +8097,10 @@ class TextSplitter {
     const fontsReady = doc.fonts.status !== 'loading';
     const canSplitLines = lineTemplate && fontsReady;
     this.ready = !lineTemplate || fontsReady;
+    if (canSplitLines || clearCache) {
+      // No need to revert effects animations here since it's already taken care by the refreshable
+      this.effectsCleanups.forEach(cleanup => isFnc(cleanup) && cleanup(this));
+    }
     if (!isCached) {
       if (clearCache) {
         $el.innerHTML = this.html;
@@ -8090,10 +8109,7 @@ class TextSplitter {
       this.splitNode($el);
       this.cache = $el.innerHTML;
     }
-    // Always reset the html when splitting by lines
     if (canSplitLines) {
-      // No need to revert effects animations here since it's already taken care by the refreshable
-      this.effectsCleanups.forEach(cleanup => isFnc(cleanup) && cleanup(this));
       if (isCached) $el.innerHTML = this.cache;
       this.lines.length = 0;
       if (wordTemplate) this.words = getAllTopLevelElements($el, wordType);
@@ -8147,9 +8163,6 @@ class TextSplitter {
       }
       words.length = 0;
     }
-    if (canSplitLines || clearCache) {
-      this.effects.forEach((effect, i) => this.effectsCleanups[i] = effect(this));
-    }
     if (this.accessible && (canSplitLines || !isCached)) {
       const $accessible = doc.createElement('span');
       // Make the accessible element visually-hidden (https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html)
@@ -8162,6 +8175,9 @@ class TextSplitter {
       this.chars.forEach(setAriaHidden);
     }
     this.width = /** @type {HTMLElement} */($el).offsetWidth;
+    if (canSplitLines || clearCache) {
+      this.effects.forEach((effect, i) => this.effectsCleanups[i] = effect(this));
+    }
     return this;
   }