animejs 4.3.4 → 4.3.6

package/README.md

@@ -64,7 +64,7 @@ Help the project become sustainable by sponsoring us on <a target="_blank" href=
   <tbody>
     <tr>
       <td>
-        <a target="_blank" href="https://www.testmu.ai?utm_source=animeJS&utm_medium=organic&utm_campaign=july_08&utm_term=sk&utm_content=opensource">
+        <a target="_blank" href="https://www.testmuai.com/?utm_medium=sponsor&utm_source=animejs">
           <picture>
             <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/testmu-ai-logomark.png?v=200126">
             <img align="center" src="./assets/sponsors/testmu-ai-logomark-dark.png?v=200126" width="141">

package/dist/bundles/anime.esm.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - ESM bundle
- * @version v4.3.4
+ * @version v4.3.6
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -740,6 +740,7 @@ const noop = () => {};
 
 // Regex
 
+const validRgbHslRgx = /\)\s*[-.\d]/;
 const hexTestRgx = /(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i;
 const rgbExecRgx = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i;
 const rgbaExecRgx = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
@@ -803,7 +804,7 @@ const globals = {
 
 const devTools = isBrowser && win.AnimeJSDevTools;
 
-const globalVersions = { version: '4.3.4', engine: null };
+const globalVersions = { version: '4.3.6', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -851,11 +852,11 @@ const isSvg = a => isBrowser && a instanceof SVGElement;
 /**@param {any} a @return {Boolean} */
 const isHex = a => hexTestRgx.test(a);
 /**@param {any} a @return {Boolean} */
-const isRgb = a => stringStartsWith(a, 'rgb') && a[a.length - 1] === ')';
+const isRgb = a => stringStartsWith(a, 'rgb');
 /**@param {any} a @return {Boolean} */
-const isHsl = a => stringStartsWith(a, 'hsl') && a[a.length - 1] === ')';
-/**@param {any} a @return {Boolean} */
-const isCol = a => isHex(a) || isRgb(a) || isHsl(a);
+const isHsl = a => stringStartsWith(a, 'hsl');
+/**@param {any} a @return {Boolean} */ // Make sure boxShadow syntax like 'rgb(255, 0, 0) 0px 0px 6px 0px' is not a valid color type
+const isCol = a => isHex(a) || ((isRgb(a) || isHsl(a)) && (a[a.length - 1] === ')' || !validRgbHslRgx.test(a)));
 /**@param {any} a @return {Boolean} */
 const isKey = a => !globals.defaults.hasOwnProperty(a);
 
@@ -3977,7 +3978,7 @@ const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   parent.animations.push(animation);
   removeWAAPIAnimation($el, property);
   addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
-  const handleRemove = () => { removeWAAPIAnimation($el, property, parent); };
+  const handleRemove = () => removeWAAPIAnimation($el, property, parent);
   animation.oncancel = handleRemove;
   animation.onremove = handleRemove;
   if (!parent.persist) {
@@ -7821,6 +7822,8 @@ const waapi = {
 
 
 
+
+
 /**
  * @typedef {DOMTargetSelector|Array<DOMTargetSelector>} LayoutChildrenParam
  */
@@ -8844,6 +8847,12 @@ class AutoLayout {
       }
     }
     tlParams.onComplete = () => {
+      const ap = /** @type {ScrollObserver} */(params.autoplay);
+      const isScrollControled = ap && ap.linked;
+      if (isScrollControled) {
+        if (onComplete) onComplete(this.timeline);
+        return;
+      }
       // Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
       if (this.transformAnimation) this.transformAnimation.cancel();
       newState.forEachRootNode(node => {
@@ -8865,6 +8874,13 @@ class AutoLayout {
       });
     };
     tlParams.onPause = () => {
+      const ap = /** @type {ScrollObserver} */(params.autoplay);
+      const isScrollControled = ap && ap.linked;
+      if (isScrollControled) {
+        if (onComplete) onComplete(this.timeline);
+        if (onPause) onPause(this.timeline);
+        return;
+      }
       if (!this.root.classList.contains('is-animated')) return;
       if (this.transformAnimation) this.transformAnimation.cancel();
       newState.forEachRootNode(restoreNodeVisualState);
@@ -9078,7 +9094,7 @@ class AutoLayout {
       // const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
 
       if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
-        if (!node.isInlined && (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none')) {
+        if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
           node.hasTransform = true;
           transformed.push($el);
         }
@@ -9094,7 +9110,7 @@ class AutoLayout {
       if (!node.isTarget) {
         swapping.push($el);
         if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
-          if (!node.isInlined && swapAtProps.transform) {
+          if (swapAtProps.transform) {
             node.hasTransform = true;
             transformed.push($el);
           }
@@ -9134,7 +9150,7 @@ class AutoLayout {
 
         // muteNodeTransition(newNode);
 
-        // Don't animate dimensions and positions of inlined elements
+        // Don't animate positions of inlined elements (to avoid text reflow)
         if (!newNode.isInlined) {
           // Display grid can mess with the absolute positioning, so set it to block during transition
           if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
@@ -9153,14 +9169,15 @@ class AutoLayout {
             $el.style.left = '0px';
             $el.style.top = '0px';
           }
-          $el.style.width = `${oldNodeState.width}px`;
-          $el.style.height = `${oldNodeState.height}px`;
-          // Overrides user defined min and max to prevents width and height clamping
-          $el.style.minWidth = `auto`;
-          $el.style.minHeight = `auto`;
-          $el.style.maxWidth = `none`;
-          $el.style.maxHeight = `none`;
         }
+        // Animate dimensions for all elements (including inlined)
+        $el.style.width = `${oldNodeState.width}px`;
+        $el.style.height = `${oldNodeState.height}px`;
+        // Overrides user defined min and max to prevents width and height clamping
+        $el.style.minWidth = `auto`;
+        $el.style.minHeight = `auto`;
+        $el.style.maxWidth = `none`;
+        $el.style.maxHeight = `none`;
       }
 
       // Restore the scroll position if the oldState differs from the current state
@@ -9181,21 +9198,19 @@ class AutoLayout {
         const animatedProps = {
           composition: 'none',
         };
-        if (!newNode.isInlined) {
-          if (oldNodeState.width !== newNodeState.width) {
-            animatedProps.width = [oldNodeState.width, newNodeState.width];
-            nodeHasChanged = true;
-          }
-          if (oldNodeState.height !== newNodeState.height) {
-            animatedProps.height = [oldNodeState.height, newNodeState.height];
-            nodeHasChanged = true;
-          }
-          // If the node has transforms we handle the translate animation in wappi otherwise translate and other transforms can be out of sync
-          // Always animate translate
-          if (!newNode.hasTransform) {
-            animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
-            nodeHasChanged = true;
-          }
+        if (oldNodeState.width !== newNodeState.width) {
+          animatedProps.width = [oldNodeState.width, newNodeState.width];
+          nodeHasChanged = true;
+        }
+        if (oldNodeState.height !== newNodeState.height) {
+          animatedProps.height = [oldNodeState.height, newNodeState.height];
+          nodeHasChanged = true;
+        }
+        // If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
+        // And we don't animate the position of inlined elements
+        if (!newNode.hasTransform && !newNode.isInlined) {
+          animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
+          nodeHasChanged = true;
         }
         this.properties.forEach(prop => {
           const oldVal = oldNodeState[prop];
@@ -9217,15 +9232,16 @@ class AutoLayout {
       for (let i = 0, l = swapping.length; i < l; i++) {
         const $el = swapping[i];
         const oldNode = oldState.getNode($el);
+        const oldNodeProps = oldNode.properties;
+        $el.style.width = `${oldNodeProps.width}px`;
+        $el.style.height = `${oldNodeProps.height}px`;
+        // Overrides user defined min and max to prevents width and height clamping
+        $el.style.minWidth = `auto`;
+        $el.style.minHeight = `auto`;
+        $el.style.maxWidth = `none`;
+        $el.style.maxHeight = `none`;
+        // We don't animate the position of inlined elements
         if (!oldNode.isInlined) {
-          const oldNodeProps = oldNode.properties;
-          $el.style.width = `${oldNodeProps.width}px`;
-          $el.style.height = `${oldNodeProps.height}px`;
-          // Overrides user defined min and max to prevents width and height clamping
-          $el.style.minWidth = `auto`;
-          $el.style.minHeight = `auto`;
-          $el.style.maxWidth = `none`;
-          $el.style.maxHeight = `none`;
           $el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
         }
         this.properties.forEach(prop => {
@@ -9240,14 +9256,15 @@ class AutoLayout {
         const newNode = newState.getNode($el);
         const newNodeProps = newNode.properties;
         this.timeline.call(() => {
+          $el.style.width = `${newNodeProps.width}px`;
+          $el.style.height = `${newNodeProps.height}px`;
+          // Overrides user defined min and max to prevents width and height clamping
+          $el.style.minWidth = `auto`;
+          $el.style.minHeight = `auto`;
+          $el.style.maxWidth = `none`;
+          $el.style.maxHeight = `none`;
+          // Don't set translate for inlined elements (to avoid text reflow)
           if (!newNode.isInlined) {
-            $el.style.width = `${newNodeProps.width}px`;
-            $el.style.height = `${newNodeProps.height}px`;
-            // Overrides user defined min and max to prevents width and height clamping
-            $el.style.minWidth = `auto`;
-            $el.style.minHeight = `auto`;
-            $el.style.maxWidth = `none`;
-            $el.style.maxHeight = `none`;
             $el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
           }
           this.properties.forEach(prop => {
@@ -9280,19 +9297,27 @@ class AutoLayout {
     const transformedLength = transformed.length;
 
     if (transformedLength) {
-      // We only need to set the transform property here since translate is alread defined in the targets loop
+      // We only need to set the transform property here since translate is already defined in the targets loop
       for (let i = 0; i < transformedLength; i++) {
         const $el = transformed[i];
-        $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`,
+        const node = newState.getNode($el);
+        // Don't set translate for inlined elements (to avoid text reflow)
+        if (!node.isInlined) {
+          $el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
+        }
         $el.style.transform = oldState.getComputedValue($el, 'transform');
         if (animatedSwap.includes($el)) {
-          const node = newState.getNode($el);
           node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
           node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
         }
       }
       this.transformAnimation = waapi.animate(transformed, {
-        translate: (/** @type {HTMLElement} */$el) => `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`,
+        translate: (/** @type {HTMLElement} */$el) => {
+          const node = newState.getNode($el);
+          // Don't animate translate for inlined elements (to avoid text reflow)
+          if (node.isInlined) return '0px 0px';
+          return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
+        },
         transform: (/** @type {HTMLElement} */$el) => {
           const newValue = newState.getComputedValue($el, 'transform');
           if (!animatedSwap.includes($el)) return newValue;
@@ -9301,7 +9326,7 @@ class AutoLayout {
           return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
         },
         autoplay: false,
-        persist: true,
+        // persist: true,
         ...timingParams,
       });
       this.timeline.sync(this.transformAnimation, 0);