animejs 4.3.3 → 4.3.5

package/dist/bundles/anime.umd.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - UMD bundle
- * @version v4.3.3
+ * @version v4.3.5
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -746,6 +746,7 @@
 
   // 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;
@@ -809,7 +810,7 @@
 
   const devTools = isBrowser && win.AnimeJSDevTools;
 
-  const globalVersions = { version: '4.3.3', engine: null };
+  const globalVersions = { version: '4.3.5', engine: null };
 
   if (isBrowser) {
     if (!win.AnimeJS) win.AnimeJS = [];
@@ -857,11 +858,11 @@
   /**@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);
 
@@ -3983,7 +3984,7 @@
     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) {
@@ -4313,6 +4314,10 @@
       if (isUnd(synced) || synced && isUnd(synced.pause)) return this;
       synced.pause();
       const duration = +(/** @type {globalThis.Animation} */(synced).effect ? /** @type {globalThis.Animation} */(synced).effect.getTiming().duration : /** @type {Tickable} */(synced).duration);
+      // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
+      if (!isUnd(synced) && !isUnd(/** @type {WAAPIAnimation} */(synced).persist)) {
+        /** @type {WAAPIAnimation} */(synced).persist = true;
+      }
       return this.add(synced, { currentTime: [0, duration], duration, delay: 0, ease: 'linear', playbackEase: 'linear' }, position);
     }
 
@@ -4379,8 +4384,8 @@
      * @return {this}
      */
     refresh() {
-      forEachChildren(this, (/** @type {JSAnimation} */child) => {
-        if (child.refresh) child.refresh();
+      forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => {
+        if (/** @type {JSAnimation} */(child).refresh) /** @type {JSAnimation} */(child).refresh();
       });
       return this;
     }
@@ -4390,7 +4395,7 @@
      */
     revert() {
       super.revert();
-      forEachChildren(this, (/** @type {JSAnimation} */child) => child.revert, true);
+      forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => child.revert, true);
       return cleanInlineStyles(this);
     }
 
@@ -6764,7 +6769,9 @@
         linked.pause();
         this.linked = linked;
         // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
-        if (!isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
+        if (!isUnd(linked) && !isUnd(/** @type {WAAPIAnimation} */(linked).persist)) {
+          /** @type {WAAPIAnimation} */(linked).persist = true;
+        }
         // Try to use a target of the linked object if no target parameters specified
         if (!this._params.target) {
           /** @type {HTMLElement} */
@@ -6966,12 +6973,11 @@
       // let offsetX = 0;
       // let offsetY = 0;
       // let $offsetParent = $el;
-      /** @type {Element} */
       if (linked) {
         linkedTime = linked.currentTime;
         linked.seek(0, true);
       }
-      /* Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
+      // Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
       // const isContainerStatic = get(container.element, 'position') === 'static' ? set(container.element, { position: 'relative '}) : false;
       // while ($el && $el !== container.element && $el !== doc.body) {
       //   const isSticky = get($el, 'position') === 'sticky' ?
@@ -9079,7 +9085,7 @@
         // 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);
           }
@@ -9095,7 +9101,7 @@
         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);
             }
@@ -9135,7 +9141,7 @@
 
           // 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');
@@ -9154,14 +9160,15 @@
               $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
@@ -9182,21 +9189,19 @@
           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];
@@ -9218,15 +9223,16 @@
         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 => {
@@ -9241,14 +9247,15 @@
           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 => {
@@ -9281,19 +9288,27 @@
       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;
@@ -9302,7 +9317,7 @@
             return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
           },
           autoplay: false,
-          persist: true,
+          // persist: true,
           ...timingParams,
         });
         this.timeline.sync(this.transformAnimation, 0);