animejs 4.1.0 → 4.1.2

package/types/index.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
@@ -10,9 +10,9 @@
 // Environments
 // 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 {Document} */
+/** @type {Window & {AnimeJS: Array}|null} */
+const win = isBrowser ? /** @type {Window & {AnimeJS: Array}} */ ( /** @type {unknown} */(window)) : null;
+/** @type {Document|null} */
 const doc = isBrowser ? document : null;
 // Enums
 /** @enum {Number} */
@@ -142,7 +142,7 @@ const globals = {
     /** @type {Number} */
     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 = [];
@@ -779,7 +779,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) {
@@ -3152,7 +3152,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;
@@ -4923,7 +4924,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) {
@@ -5669,7 +5671,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);
@@ -5691,6 +5692,7 @@ class Draggable {
         this.overshootYTicker.revert();
         this.resizeTicker.revert();
         this.animate.revert();
+        this.resizeObserver.disconnect();
         return this;
     }
     /**
@@ -5966,7 +5968,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;
@@ -6157,7 +6159,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);
     }
@@ -6381,8 +6383,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} */
@@ -6618,35 +6620,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;
@@ -6699,8 +6712,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;
@@ -7209,6 +7222,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;
@@ -7217,10 +7234,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;
@@ -7281,9 +7295,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)
@@ -7296,6 +7307,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;
     }
     refresh() {