animejs 4.3.6 → 4.4.0

package/dist/modules/core/styles.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -9,6 +9,7 @@
 
 var consts = require('./consts.cjs');
 var helpers = require('./helpers.cjs');
+var transforms = require('./transforms.cjs');
 
 /**
  * @import {
@@ -59,58 +60,78 @@ const sanitizePropertyName = (propertyName, target, tweenType) => {
 /**
  * @template {Renderable} T
  * @param {T} renderable
+ * @param {Boolean} [inlineStylesOnly]
  * @return {T}
  */
-const cleanInlineStyles = renderable => {
-  // Allow cleanInlineStyles() to be called on timelines
+const revertValues = (renderable, inlineStylesOnly = false) => {
+  // Allow revertValues() to be called on timelines
   if (renderable._hasChildren) {
-    helpers.forEachChildren(renderable, cleanInlineStyles, true);
+    helpers.forEachChildren(renderable, (/** @type {Renderable} */child) => revertValues(child, inlineStylesOnly), true);
   } else {
     const animation = /** @type {JSAnimation} */(renderable);
     animation.pause();
     helpers.forEachChildren(animation, (/** @type {Tween} */tween) => {
       const tweenProperty = tween.property;
       const tweenTarget = tween.target;
-      if (tweenTarget[consts.isDomSymbol]) {
-        const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
-        const originalInlinedValue = tween._inlineValue;
-        const tweenHadNoInlineValue = helpers.isNil(originalInlinedValue) || originalInlinedValue === consts.emptyString;
-        if (tween._tweenType === consts.tweenTypes.TRANSFORM) {
-          const cachedTransforms = tweenTarget[consts.transformsSymbol];
-          if (tweenHadNoInlineValue) {
-            delete cachedTransforms[tweenProperty];
-          } else {
-            cachedTransforms[tweenProperty] = originalInlinedValue;
-          }
-          if (tween._renderTransforms) {
-            if (!Object.keys(cachedTransforms).length) {
-              targetStyle.removeProperty('transform');
+      const tweenType = tween._tweenType;
+      const originalInlinedValue = tween._inlineValue;
+      const tweenHadNoInlineValue = helpers.isNil(originalInlinedValue) || originalInlinedValue === consts.emptyString;
+      if (tweenType === consts.tweenTypes.OBJECT) {
+        if (!inlineStylesOnly && !tweenHadNoInlineValue) {
+          tweenTarget[tweenProperty] = originalInlinedValue;
+        }
+      } else if (tweenTarget[consts.isDomSymbol]) {
+        if (tweenType === consts.tweenTypes.ATTRIBUTE) {
+          if (!inlineStylesOnly) {
+            if (tweenHadNoInlineValue) {
+              /** @type {DOMTarget} */(tweenTarget).removeAttribute(tweenProperty);
             } else {
-              let str = consts.emptyString;
-              for (let key in cachedTransforms) {
-                str += consts.transformsFragmentStrings[key] + cachedTransforms[key] + ') ';
-              }
-              targetStyle.transform = str;
+              /** @type {DOMTarget} */(tweenTarget).setAttribute(tweenProperty, /** @type {String} */(originalInlinedValue));
             }
           }
         } else {
-          if (tweenHadNoInlineValue) {
-            targetStyle.removeProperty(helpers.toLowerCase(tweenProperty));
+          const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
+          if (tweenType === consts.tweenTypes.TRANSFORM) {
+            const cachedTransforms = tweenTarget[consts.transformsSymbol];
+            if (tweenHadNoInlineValue) {
+              delete cachedTransforms[tweenProperty];
+            } else {
+              cachedTransforms[tweenProperty] = originalInlinedValue;
+            }
+            if (tween._renderTransforms) {
+              if (!Object.keys(cachedTransforms).length) {
+                targetStyle.removeProperty('transform');
+              } else {
+                targetStyle.transform = transforms.buildTransformString(cachedTransforms);
+              }
+            }
           } else {
-            targetStyle[tweenProperty] = originalInlinedValue;
+            if (tweenHadNoInlineValue) {
+              targetStyle.removeProperty(helpers.toLowerCase(tweenProperty));
+            } else {
+              targetStyle[tweenProperty] = originalInlinedValue;
+            }
           }
         }
-        if (animation._tail === tween) {
-          animation.targets.forEach(t => {
-            if (t.getAttribute && t.getAttribute('style') === consts.emptyString) {
-              t.removeAttribute('style');
-            }          });
-        }
+      }
+      if (tweenTarget[consts.isDomSymbol] && animation._tail === tween) {
+        animation.targets.forEach(t => {
+          if (t.getAttribute && t.getAttribute('style') === consts.emptyString) {
+            t.removeAttribute('style');
+          }        });
       }
     });
   }
   return renderable;
 };
 
+/**
+ * @template {Renderable} T
+ * @param {T} renderable
+ * @return {T}
+ */
+const cleanInlineStyles = renderable => revertValues(renderable, true);
+
 exports.cleanInlineStyles = cleanInlineStyles;
+exports.revertValues = revertValues;
 exports.sanitizePropertyName = sanitizePropertyName;

package/dist/modules/core/styles.d.ts

@@ -1,4 +1,5 @@
 export function sanitizePropertyName(propertyName: string, target: Target, tweenType: tweenTypes): string;
+export function revertValues<T extends Renderable>(renderable: T, inlineStylesOnly?: boolean): T;
 export function cleanInlineStyles<T extends Renderable>(renderable: T): T;
 import type { Target } from '../types/index.js';
 import { tweenTypes } from './consts.js';

package/dist/modules/core/styles.js

@@ -1,12 +1,13 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { tweenTypes, shortTransforms, isDomSymbol, transformsSymbol, transformsFragmentStrings, emptyString } from './consts.js';
-import { forEachChildren, isSvg, toLowerCase, isNil } from './helpers.js';
+import { tweenTypes, isDomSymbol, transformsSymbol, emptyString, shortTransforms } from './consts.js';
+import { forEachChildren, toLowerCase, isNil, isSvg } from './helpers.js';
+import { buildTransformString } from './transforms.js';
 
 /**
  * @import {
@@ -57,57 +58,76 @@ const sanitizePropertyName = (propertyName, target, tweenType) => {
 /**
  * @template {Renderable} T
  * @param {T} renderable
+ * @param {Boolean} [inlineStylesOnly]
  * @return {T}
  */
-const cleanInlineStyles = renderable => {
-  // Allow cleanInlineStyles() to be called on timelines
+const revertValues = (renderable, inlineStylesOnly = false) => {
+  // Allow revertValues() to be called on timelines
   if (renderable._hasChildren) {
-    forEachChildren(renderable, cleanInlineStyles, true);
+    forEachChildren(renderable, (/** @type {Renderable} */child) => revertValues(child, inlineStylesOnly), true);
   } else {
     const animation = /** @type {JSAnimation} */(renderable);
     animation.pause();
     forEachChildren(animation, (/** @type {Tween} */tween) => {
       const tweenProperty = tween.property;
       const tweenTarget = tween.target;
-      if (tweenTarget[isDomSymbol]) {
-        const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
-        const originalInlinedValue = tween._inlineValue;
-        const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
-        if (tween._tweenType === tweenTypes.TRANSFORM) {
-          const cachedTransforms = tweenTarget[transformsSymbol];
-          if (tweenHadNoInlineValue) {
-            delete cachedTransforms[tweenProperty];
-          } else {
-            cachedTransforms[tweenProperty] = originalInlinedValue;
-          }
-          if (tween._renderTransforms) {
-            if (!Object.keys(cachedTransforms).length) {
-              targetStyle.removeProperty('transform');
+      const tweenType = tween._tweenType;
+      const originalInlinedValue = tween._inlineValue;
+      const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
+      if (tweenType === tweenTypes.OBJECT) {
+        if (!inlineStylesOnly && !tweenHadNoInlineValue) {
+          tweenTarget[tweenProperty] = originalInlinedValue;
+        }
+      } else if (tweenTarget[isDomSymbol]) {
+        if (tweenType === tweenTypes.ATTRIBUTE) {
+          if (!inlineStylesOnly) {
+            if (tweenHadNoInlineValue) {
+              /** @type {DOMTarget} */(tweenTarget).removeAttribute(tweenProperty);
             } else {
-              let str = emptyString;
-              for (let key in cachedTransforms) {
-                str += transformsFragmentStrings[key] + cachedTransforms[key] + ') ';
-              }
-              targetStyle.transform = str;
+              /** @type {DOMTarget} */(tweenTarget).setAttribute(tweenProperty, /** @type {String} */(originalInlinedValue));
             }
           }
         } else {
-          if (tweenHadNoInlineValue) {
-            targetStyle.removeProperty(toLowerCase(tweenProperty));
+          const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
+          if (tweenType === tweenTypes.TRANSFORM) {
+            const cachedTransforms = tweenTarget[transformsSymbol];
+            if (tweenHadNoInlineValue) {
+              delete cachedTransforms[tweenProperty];
+            } else {
+              cachedTransforms[tweenProperty] = originalInlinedValue;
+            }
+            if (tween._renderTransforms) {
+              if (!Object.keys(cachedTransforms).length) {
+                targetStyle.removeProperty('transform');
+              } else {
+                targetStyle.transform = buildTransformString(cachedTransforms);
+              }
+            }
           } else {
-            targetStyle[tweenProperty] = originalInlinedValue;
+            if (tweenHadNoInlineValue) {
+              targetStyle.removeProperty(toLowerCase(tweenProperty));
+            } else {
+              targetStyle[tweenProperty] = originalInlinedValue;
+            }
           }
         }
-        if (animation._tail === tween) {
-          animation.targets.forEach(t => {
-            if (t.getAttribute && t.getAttribute('style') === emptyString) {
-              t.removeAttribute('style');
-            }          });
-        }
+      }
+      if (tweenTarget[isDomSymbol] && animation._tail === tween) {
+        animation.targets.forEach(t => {
+          if (t.getAttribute && t.getAttribute('style') === emptyString) {
+            t.removeAttribute('style');
+          }        });
       }
     });
   }
   return renderable;
 };
 
-export { cleanInlineStyles, sanitizePropertyName };
+/**
+ * @template {Renderable} T
+ * @param {T} renderable
+ * @return {T}
+ */
+const cleanInlineStyles = renderable => revertValues(renderable, true);
+
+export { cleanInlineStyles, revertValues, sanitizePropertyName };

package/dist/modules/core/targets.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/core/targets.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/core/transforms.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -24,26 +24,142 @@ var helpers = require('./helpers.cjs');
  */
 const parseInlineTransforms = (target, propName, animationInlineStyles) => {
   const inlineTransforms = target.style.transform;
-  let inlinedStylesPropertyValue;
   if (inlineTransforms) {
     const cachedTransforms = target[consts.transformsSymbol];
-    let t; while (t = consts.transformsExecRgx.exec(inlineTransforms)) {
-      const inlinePropertyName = t[1];
-      // const inlinePropertyValue = t[2];
-      const inlinePropertyValue = t[2].slice(1, -1);
-      cachedTransforms[inlinePropertyName] = inlinePropertyValue;
-      if (inlinePropertyName === propName) {
-        inlinedStylesPropertyValue = inlinePropertyValue;
-        // Store the new parsed inline styles if animationInlineStyles is provided
-        if (animationInlineStyles) {
-          animationInlineStyles[propName] = inlinePropertyValue;
+    let pos = 0;
+    const len = inlineTransforms.length;
+    let fullTranslateValue;
+    while (pos < len) {
+      // Skip whitespace
+      while (pos < len && inlineTransforms.charCodeAt(pos) === 32) pos++;
+      if (pos >= len) break;
+      // Read function name
+      const nameStart = pos;
+      while (pos < len && inlineTransforms.charCodeAt(pos) !== 40) pos++;
+      if (pos >= len) break;
+      const name = inlineTransforms.substring(nameStart, pos);
+      // Scan to closing paren, recording top-level comma positions
+      let depth = 1;
+      const valueStart = pos + 1;
+      let c1 = -1, c2 = -1;
+      pos++;
+      while (pos < len && depth > 0) {
+        const c = inlineTransforms.charCodeAt(pos);
+        if (c === 40) depth++;
+        else if (c === 41) depth--;
+        else if (c === 44 && depth === 1) {
+          if (c1 === -1) c1 = pos;
+          else if (c2 === -1) c2 = pos;
         }
+        pos++;
       }
+      const valueEnd = pos - 1;
+      // Decompose multi-arg functions into individual axis properties
+      if (name === 'translate' || name === 'translate3d') {
+        if (c1 === -1) {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.translateZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+        fullTranslateValue = inlineTransforms.substring(valueStart, valueEnd);
+      } else if (name === 'scale' || name === 'scale3d') {
+        if (c1 === -1) {
+          cachedTransforms.scale = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.scaleX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.scaleZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+      } else {
+        cachedTransforms[name] = inlineTransforms.substring(valueStart, valueEnd);
+      }
+    }
+    // Resolve the requested property from the cache
+    if (propName === 'translate3d' && fullTranslateValue) {
+      if (animationInlineStyles) animationInlineStyles[propName] = fullTranslateValue;
+      return fullTranslateValue;
+    }
+    const cached = cachedTransforms[propName];
+    if (!helpers.isUnd(cached)) {
+      if (animationInlineStyles) animationInlineStyles[propName] = cached;
+      return cached;
     }
   }
-  return inlineTransforms && !helpers.isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+  return propName === 'translate3d' ? '0px, 0px, 0px' :
+    propName === 'rotate3d' ? '0, 0, 0, 0deg' :
     helpers.stringStartsWith(propName, 'scale') ? '1' :
     helpers.stringStartsWith(propName, 'rotate') || helpers.stringStartsWith(propName, 'skew') ? '0deg' : '0px';
 };
 
+/**
+ * Builds a CSS transform string from the target's cached transform properties.
+ * Iterates validTransforms in order (perspective > translate > rotate > scale > skew > matrix).
+ * When adjacent axis properties are all present, emits a shorter shorthand (translateX + translateY -> translate(x, y))
+ * The index is advanced past consumed properties so they are not emitted twice.
+ * Properties without a grouping partner (e.g. translateY alone, scaleZ alone) emit individually.
+ *
+ * @param  {Record<String, String>} props
+ * @return {String}
+ */
+const buildTransformString = (props) => {
+  let str = consts.emptyString;
+  for (let i = 0, l = consts.validTransforms.length; i < l; i++) {
+    const key = consts.validTransforms[i];
+    const val = props[key];
+    if (val !== undefined) {
+      // Group translateX with adjacent translateY / translateZ
+      if (key === 'translateX') {
+        const next = props.translateY;
+        if (next !== undefined) {
+          const next2 = props.translateZ;
+          if (next2 !== undefined) {
+            str += `translate3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `translate(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // Group scaleX with adjacent scaleY / scaleZ (only when standalone scale is absent)
+      if (key === 'scaleX' && props.scale === undefined) {
+        const next = props.scaleY;
+        if (next !== undefined) {
+          const next2 = props.scaleZ;
+          if (next2 !== undefined) {
+            str += `scale3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `scale(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // All other properties: emit individually using pre-built fragment string
+      str += `${consts.transformsFragmentStrings[key]}${val}) `;
+    }
+    // Preserve non-animatable rotate3d in correct position (after rotateZ, before scale)
+    if (key === 'rotateZ') {
+      if (props.rotate3d !== undefined) str += `rotate3d(${props.rotate3d}) `;
+    }
+  }
+  // Preserve non-animatable matrix/matrix3d from inline styles
+  if (props.matrix !== undefined) str += `matrix(${props.matrix}) `;
+  if (props.matrix3d !== undefined) str += `matrix3d(${props.matrix3d}) `;
+  return str;
+};
+
+exports.buildTransformString = buildTransformString;
 exports.parseInlineTransforms = parseInlineTransforms;

package/dist/modules/core/transforms.d.ts

@@ -1,2 +1,3 @@
 export function parseInlineTransforms(target: DOMTarget, propName: string, animationInlineStyles: any): string;
+export function buildTransformString(props: Record<string, string>): string;
 import type { DOMTarget } from '../types/index.js';

package/dist/modules/core/transforms.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { transformsSymbol, transformsExecRgx } from './consts.js';
+import { transformsFragmentStrings, emptyString, validTransforms, transformsSymbol } from './consts.js';
 import { isUnd, stringStartsWith } from './helpers.js';
 
 /**
@@ -22,26 +22,141 @@ import { isUnd, stringStartsWith } from './helpers.js';
  */
 const parseInlineTransforms = (target, propName, animationInlineStyles) => {
   const inlineTransforms = target.style.transform;
-  let inlinedStylesPropertyValue;
   if (inlineTransforms) {
     const cachedTransforms = target[transformsSymbol];
-    let t; while (t = transformsExecRgx.exec(inlineTransforms)) {
-      const inlinePropertyName = t[1];
-      // const inlinePropertyValue = t[2];
-      const inlinePropertyValue = t[2].slice(1, -1);
-      cachedTransforms[inlinePropertyName] = inlinePropertyValue;
-      if (inlinePropertyName === propName) {
-        inlinedStylesPropertyValue = inlinePropertyValue;
-        // Store the new parsed inline styles if animationInlineStyles is provided
-        if (animationInlineStyles) {
-          animationInlineStyles[propName] = inlinePropertyValue;
+    let pos = 0;
+    const len = inlineTransforms.length;
+    let fullTranslateValue;
+    while (pos < len) {
+      // Skip whitespace
+      while (pos < len && inlineTransforms.charCodeAt(pos) === 32) pos++;
+      if (pos >= len) break;
+      // Read function name
+      const nameStart = pos;
+      while (pos < len && inlineTransforms.charCodeAt(pos) !== 40) pos++;
+      if (pos >= len) break;
+      const name = inlineTransforms.substring(nameStart, pos);
+      // Scan to closing paren, recording top-level comma positions
+      let depth = 1;
+      const valueStart = pos + 1;
+      let c1 = -1, c2 = -1;
+      pos++;
+      while (pos < len && depth > 0) {
+        const c = inlineTransforms.charCodeAt(pos);
+        if (c === 40) depth++;
+        else if (c === 41) depth--;
+        else if (c === 44 && depth === 1) {
+          if (c1 === -1) c1 = pos;
+          else if (c2 === -1) c2 = pos;
         }
+        pos++;
       }
+      const valueEnd = pos - 1;
+      // Decompose multi-arg functions into individual axis properties
+      if (name === 'translate' || name === 'translate3d') {
+        if (c1 === -1) {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.translateX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.translateY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.translateZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+        fullTranslateValue = inlineTransforms.substring(valueStart, valueEnd);
+      } else if (name === 'scale' || name === 'scale3d') {
+        if (c1 === -1) {
+          cachedTransforms.scale = inlineTransforms.substring(valueStart, valueEnd).trim();
+        } else {
+          cachedTransforms.scaleX = inlineTransforms.substring(valueStart, c1).trim();
+          if (c2 === -1) {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, valueEnd).trim();
+          } else {
+            cachedTransforms.scaleY = inlineTransforms.substring(c1 + 1, c2).trim();
+            cachedTransforms.scaleZ = inlineTransforms.substring(c2 + 1, valueEnd).trim();
+          }
+        }
+      } else {
+        cachedTransforms[name] = inlineTransforms.substring(valueStart, valueEnd);
+      }
+    }
+    // Resolve the requested property from the cache
+    if (propName === 'translate3d' && fullTranslateValue) {
+      if (animationInlineStyles) animationInlineStyles[propName] = fullTranslateValue;
+      return fullTranslateValue;
+    }
+    const cached = cachedTransforms[propName];
+    if (!isUnd(cached)) {
+      if (animationInlineStyles) animationInlineStyles[propName] = cached;
+      return cached;
     }
   }
-  return inlineTransforms && !isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
+  return propName === 'translate3d' ? '0px, 0px, 0px' :
+    propName === 'rotate3d' ? '0, 0, 0, 0deg' :
     stringStartsWith(propName, 'scale') ? '1' :
     stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew') ? '0deg' : '0px';
 };
 
-export { parseInlineTransforms };
+/**
+ * Builds a CSS transform string from the target's cached transform properties.
+ * Iterates validTransforms in order (perspective > translate > rotate > scale > skew > matrix).
+ * When adjacent axis properties are all present, emits a shorter shorthand (translateX + translateY -> translate(x, y))
+ * The index is advanced past consumed properties so they are not emitted twice.
+ * Properties without a grouping partner (e.g. translateY alone, scaleZ alone) emit individually.
+ *
+ * @param  {Record<String, String>} props
+ * @return {String}
+ */
+const buildTransformString = (props) => {
+  let str = emptyString;
+  for (let i = 0, l = validTransforms.length; i < l; i++) {
+    const key = validTransforms[i];
+    const val = props[key];
+    if (val !== undefined) {
+      // Group translateX with adjacent translateY / translateZ
+      if (key === 'translateX') {
+        const next = props.translateY;
+        if (next !== undefined) {
+          const next2 = props.translateZ;
+          if (next2 !== undefined) {
+            str += `translate3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `translate(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // Group scaleX with adjacent scaleY / scaleZ (only when standalone scale is absent)
+      if (key === 'scaleX' && props.scale === undefined) {
+        const next = props.scaleY;
+        if (next !== undefined) {
+          const next2 = props.scaleZ;
+          if (next2 !== undefined) {
+            str += `scale3d(${val},${next},${next2}) `;
+            i += 2;
+          } else {
+            str += `scale(${val},${next}) `;
+            i += 1;
+          }
+          continue;
+        }
+      }
+      // All other properties: emit individually using pre-built fragment string
+      str += `${transformsFragmentStrings[key]}${val}) `;
+    }
+    // Preserve non-animatable rotate3d in correct position (after rotateZ, before scale)
+    if (key === 'rotateZ') {
+      if (props.rotate3d !== undefined) str += `rotate3d(${props.rotate3d}) `;
+    }
+  }
+  // Preserve non-animatable matrix/matrix3d from inline styles
+  if (props.matrix !== undefined) str += `matrix(${props.matrix}) `;
+  if (props.matrix3d !== undefined) str += `matrix3d(${props.matrix3d}) `;
+  return str;
+};
+
+export { buildTransformString, parseInlineTransforms };

package/dist/modules/core/units.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/core/units.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.0
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */