v4.1.2

Author: juliangarnier

examples/draggable-playground/index.js

@@ -295,6 +295,7 @@ utils.set('#map-props .carousel-item', {
 });
 
 const carousel = createDraggable('#map-props .carousel', {
+  trigger: '#map-props',
   x: { mapTo: 'rotateY' },
   y: false,
   snap: itemAngle,

examples/easings-visualizer/index.html

@@ -349,13 +349,15 @@
       }
     }
 
-    .ease-button {
+    button.ease-button {
       position: relative;
       display: flex;
+      flex-shrink: 0;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: calc(25% - .25rem);
+      height: auto;
       margin: .125rem;
       padding: .5rem;
       background-color: rgba(255, 255, 255, .05);
@@ -367,48 +369,48 @@
     }
 
     @media (min-width: 1280px) {
-      .ease-button {
+      button.ease-button {
         width: calc(12.5% - .25rem);
       }
     }
 
-    .ease-button:hover {
+    button.ease-button:hover {
       background-color: rgba(255, 255, 255, .1);
       transition: background-color .05s ease-out;
     }
 
-    .ease-button.is-active {
+    button.ease-button.is-active {
       background: var(--red);
       color: var(--black);
     }
 
-    .ease-button .ease-config {
+    button.ease-button .ease-config {
       position: absolute;
       top: .25rem;
       right: .41rem;
       font-size: .75rem;
     }
 
-    .ease-button svg {
+    button.ease-button svg {
       overflow: visible;
       width: calc(100% - 3rem);
       margin-top: 0.25rem;
       margin-bottom: 0.5rem;
     }
 
     @media (min-width: 640px) {
-      .ease-button svg {
+      button.ease-button svg {
         width: calc(100% - 2rem);
         margin-top: 1rem;
         margin-bottom: 1rem;
       }
     }
 
-    .ease-button svg polyline {
+    button.ease-button svg polyline {
       stroke: var(--red);
     }
 
-    .ease-button.is-active svg polyline {
+    button.ease-button.is-active svg polyline {
       stroke: var(--black);
     }
 

examples/onscroll-sticky/index.js

@@ -29,7 +29,7 @@ createTimeline({
     enter: 'top top',
     leave: 'bottom bottom',
     sync: .5,
-    // debug: true,
+    debug: true,
   }),
 })
 .add('.stack', {

lib/anime.cjs

@@ -1,6 +1,6 @@
 /**
  * anime.js - ESM
- * @version v4.1.1
+ * @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.1', 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;