animejs 4.3.6 → 4.4.1

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

@@ -8,6 +8,17 @@
  *   Scope,
  * } from '../scope/index.js'
 */
+/**
+ * @typedef {Object} EditorGlobals
+ * @property {boolean} showPanel
+ * @property {boolean} synced
+ * @property {Function} addAnimation
+ * @property {Function} addTimeline
+ * @property {Function} addTimelineChild
+ * @property {Function} resolveStagger
+ * @property {Object|null} _head
+ * @property {Object|null} _tail
+ */
 /** @type {DefaultsParams} */
 export const defaults: DefaultsParams;
 export namespace scope {
@@ -19,12 +30,22 @@ export namespace globals {
     export let precision: number;
     export let timeScale: number;
     export let tickThreshold: number;
+    export let editor: EditorGlobals | null;
 }
-export const devTools: any;
 export namespace globalVersions {
     let version: string;
     let engine: any;
 }
+export type EditorGlobals = {
+    showPanel: boolean;
+    synced: boolean;
+    addAnimation: Function;
+    addTimeline: Function;
+    addTimelineChild: Function;
+    resolveStagger: Function;
+    _head: any | null;
+    _tail: any | null;
+};
 import type { DefaultsParams } from '../types/index.js';
 import type { Scope } from '../scope/index.js';
 import { doc } from './consts.js';

package/dist/modules/core/globals.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { isBrowser, win, noop, maxFps, K, compositionTypes, doc } from './consts.js';
+import { isBrowser, win, noop, compositionTypes, K, maxFps, doc } from './consts.js';
 
 /**
  * @import {
@@ -18,6 +18,18 @@ import { isBrowser, win, noop, maxFps, K, compositionTypes, doc } from './consts
  * } from '../scope/index.js'
 */
 
+/**
+ * @typedef {Object} EditorGlobals
+ * @property {boolean} showPanel
+ * @property {boolean} synced
+ * @property {Function} addAnimation
+ * @property {Function} addTimeline
+ * @property {Function} addTimelineChild
+ * @property {Function} resolveStagger
+ * @property {Object|null} _head
+ * @property {Object|null} _tail
+ */
+
 /** @type {DefaultsParams} */
 const defaults = {
   id: null,
@@ -61,15 +73,15 @@ const globals = {
   timeScale: 1,
   /** @type {Number} */
   tickThreshold: 200,
+  /** @type {EditorGlobals|null} */
+  editor: null,
 };
 
-const devTools = isBrowser && win.AnimeJSDevTools;
-
-const globalVersions = { version: '4.3.6', engine: null };
+const globalVersions = { version: '4.4.1', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
   win.AnimeJS.push(globalVersions);
 }
 
-export { defaults, devTools, globalVersions, globals, scope };
+export { defaults, globalVersions, globals, scope };

package/dist/modules/core/helpers.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -124,8 +124,6 @@ const _round = Math.round;
  */
 const clamp = (v, min, max) => v < min ? min : v > max ? max : v;
 
-const powCache = {};
-
 /**
  * Rounds a number to specified decimal places
  *
@@ -133,13 +131,12 @@ const powCache = {};
  * @param  {Number} decimalLength - Number of decimal places
  * @return {Number}
  */
-const round = (v, decimalLength) => {
-  if (decimalLength < 0) return v;
-  if (!decimalLength) return _round(v);
-  let p = powCache[decimalLength];
-  if (!p) p = powCache[decimalLength] = 10 ** decimalLength;
-  return _round(v * p) / p;
-};
+ const round = (v, decimalLength) => {
+   if (decimalLength < 0) return v;
+   if (!decimalLength) return _round(v);
+   const p = 10 ** decimalLength;
+   return _round(v * p) / p;
+ };
 
 /**
  * Snaps a value to nearest increment or array value

package/dist/modules/core/helpers.js

@@ -1,11 +1,11 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { isBrowser, maxValue, minValue, hexTestRgx, lowerCaseRgx, validRgbHslRgx } from './consts.js';
+import { isBrowser, maxValue, minValue, lowerCaseRgx, hexTestRgx, validRgbHslRgx } from './consts.js';
 import { globals } from './globals.js';
 
 /**
@@ -122,8 +122,6 @@ const _round = Math.round;
  */
 const clamp = (v, min, max) => v < min ? min : v > max ? max : v;
 
-const powCache = {};
-
 /**
  * Rounds a number to specified decimal places
  *
@@ -131,13 +129,12 @@ const powCache = {};
  * @param  {Number} decimalLength - Number of decimal places
  * @return {Number}
  */
-const round = (v, decimalLength) => {
-  if (decimalLength < 0) return v;
-  if (!decimalLength) return _round(v);
-  let p = powCache[decimalLength];
-  if (!p) p = powCache[decimalLength] = 10 ** decimalLength;
-  return _round(v * p) / p;
-};
+ const round = (v, decimalLength) => {
+   if (decimalLength < 0) return v;
+   if (!decimalLength) return _round(v);
+   const p = 10 ** decimalLength;
+   return _round(v * p) / p;
+ };
 
 /**
  * Snaps a value to nearest increment or array value

package/dist/modules/core/render.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -10,9 +10,11 @@
 var globals = require('./globals.cjs');
 var consts = require('./consts.cjs');
 var helpers = require('./helpers.cjs');
+var transforms = require('./transforms.cjs');
+var values = require('./values.cjs');
 
 /**
- *   @import {
+ * @import {
  *   Tickable,
  *   Renderable,
  *   CallbackArgument,
@@ -55,7 +57,6 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   const _hasChildren = tickable._hasChildren;
   const tickableDelay = tickable._delay;
   const tickablePrevAbsoluteTime = tickable._currentTime; // TODO: rename ._currentTime to ._absoluteCurrentTime
-
   const tickableEndTime = tickableDelay + iterationDuration;
   const tickableAbsoluteTime = time - tickableDelay;
   const tickablePrevTime = helpers.clamp(tickablePrevAbsoluteTime, -tickableDelay, duration);
@@ -187,30 +188,9 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             number = /** @type {Number} */(tweenModifier(helpers.round(helpers.lerp(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision)));
             value = `${number}${tween._unit}`;
           } else if (tweenValueType === consts.valueTypes.COLOR) {
-            const fn = tween._fromNumbers;
-            const tn = tween._toNumbers;
-            const r = helpers.round(helpers.clamp(/** @type {Number} */(tweenModifier(helpers.lerp(fn[0], tn[0], tweenProgress))), 0, 255), 0);
-            const g = helpers.round(helpers.clamp(/** @type {Number} */(tweenModifier(helpers.lerp(fn[1], tn[1], tweenProgress))), 0, 255), 0);
-            const b = helpers.round(helpers.clamp(/** @type {Number} */(tweenModifier(helpers.lerp(fn[2], tn[2], tweenProgress))), 0, 255), 0);
-            const a = helpers.clamp(/** @type {Number} */(tweenModifier(helpers.round(helpers.lerp(fn[3], tn[3], tweenProgress), tweenPrecision))), 0, 1);
-            value = `rgba(${r},${g},${b},${a})`;
-            if (tweenHasComposition) {
-              const ns = tween._numbers;
-              ns[0] = r;
-              ns[1] = g;
-              ns[2] = b;
-              ns[3] = a;
-            }
+            value = values.composeColorValue(tween, tweenProgress, tweenPrecision);
           } else if (tweenValueType === consts.valueTypes.COMPLEX) {
-            value = tween._strings[0];
-            for (let j = 0, l = tween._toNumbers.length; j < l; j++) {
-              const n = /** @type {Number} */(tweenModifier(helpers.round(helpers.lerp(tween._fromNumbers[j], tween._toNumbers[j], tweenProgress), tweenPrecision)));
-              const s = tween._strings[j + 1];
-              value += `${s ? n + s : n}`;
-              if (tweenHasComposition) {
-                tween._numbers[j] = n;
-              }
-            }
+            value = values.composeComplexValue(tween, tweenProgress, tweenPrecision);
           }
 
           // For additive tweens and Animatables
@@ -253,14 +233,8 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
         }
 
-        // NOTE: Possible improvement: Use translate(x,y) / translate3d(x,y,z) syntax
-        // to reduce memory usage on string composition
         if (tweenTransformsNeedUpdate && tween._renderTransforms) {
-          let str = consts.emptyString;
-          for (let key in tweenTargetTransformsProperties) {
-            str += `${consts.transformsFragmentStrings[key]}${tweenTargetTransformsProperties[key]}) `;
-          }
-          tweenStyle.transform = str;
+          tweenStyle.transform = transforms.buildTransformString(tweenTargetTransformsProperties);
           tweenTransformsNeedUpdate = 0;
         }
 
@@ -371,7 +345,6 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
     // Renders on timeline are triggered by its children so it needs to be set after rendering the children
     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 || tlIsRunningBackwards) && tl._currentTime >= tl.duration) {
       // Make sure the paused flag is false in case it has been skipped in the render function

package/dist/modules/core/render.js

@@ -1,16 +1,18 @@
 /**
  * Anime.js - core - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 import { globals } from './globals.js';
-import { minValue, tickModes, valueTypes, compositionTypes, tweenTypes, transformsSymbol, transformsFragmentStrings, emptyString } from './consts.js';
+import { minValue, tickModes, valueTypes, compositionTypes, tweenTypes, transformsSymbol } from './consts.js';
 import { forEachChildren, round, now, clamp, lerp } from './helpers.js';
+import { buildTransformString } from './transforms.js';
+import { composeColorValue, composeComplexValue } from './values.js';
 
 /**
- *   @import {
+ * @import {
  *   Tickable,
  *   Renderable,
  *   CallbackArgument,
@@ -53,7 +55,6 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
   const _hasChildren = tickable._hasChildren;
   const tickableDelay = tickable._delay;
   const tickablePrevAbsoluteTime = tickable._currentTime; // TODO: rename ._currentTime to ._absoluteCurrentTime
-
   const tickableEndTime = tickableDelay + iterationDuration;
   const tickableAbsoluteTime = time - tickableDelay;
   const tickablePrevTime = clamp(tickablePrevAbsoluteTime, -tickableDelay, duration);
@@ -185,30 +186,9 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
             number = /** @type {Number} */(tweenModifier(round(lerp(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision)));
             value = `${number}${tween._unit}`;
           } else if (tweenValueType === valueTypes.COLOR) {
-            const fn = tween._fromNumbers;
-            const tn = tween._toNumbers;
-            const r = round(clamp(/** @type {Number} */(tweenModifier(lerp(fn[0], tn[0], tweenProgress))), 0, 255), 0);
-            const g = round(clamp(/** @type {Number} */(tweenModifier(lerp(fn[1], tn[1], tweenProgress))), 0, 255), 0);
-            const b = round(clamp(/** @type {Number} */(tweenModifier(lerp(fn[2], tn[2], tweenProgress))), 0, 255), 0);
-            const a = clamp(/** @type {Number} */(tweenModifier(round(lerp(fn[3], tn[3], tweenProgress), tweenPrecision))), 0, 1);
-            value = `rgba(${r},${g},${b},${a})`;
-            if (tweenHasComposition) {
-              const ns = tween._numbers;
-              ns[0] = r;
-              ns[1] = g;
-              ns[2] = b;
-              ns[3] = a;
-            }
+            value = composeColorValue(tween, tweenProgress, tweenPrecision);
           } else if (tweenValueType === valueTypes.COMPLEX) {
-            value = tween._strings[0];
-            for (let j = 0, l = tween._toNumbers.length; j < l; j++) {
-              const n = /** @type {Number} */(tweenModifier(round(lerp(tween._fromNumbers[j], tween._toNumbers[j], tweenProgress), tweenPrecision)));
-              const s = tween._strings[j + 1];
-              value += `${s ? n + s : n}`;
-              if (tweenHasComposition) {
-                tween._numbers[j] = n;
-              }
-            }
+            value = composeComplexValue(tween, tweenProgress, tweenPrecision);
           }
 
           // For additive tweens and Animatables
@@ -251,14 +231,8 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
         }
 
-        // NOTE: Possible improvement: Use translate(x,y) / translate3d(x,y,z) syntax
-        // to reduce memory usage on string composition
         if (tweenTransformsNeedUpdate && tween._renderTransforms) {
-          let str = emptyString;
-          for (let key in tweenTargetTransformsProperties) {
-            str += `${transformsFragmentStrings[key]}${tweenTargetTransformsProperties[key]}) `;
-          }
-          tweenStyle.transform = str;
+          tweenStyle.transform = buildTransformString(tweenTargetTransformsProperties);
           tweenTransformsNeedUpdate = 0;
         }
 
@@ -369,7 +343,6 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 
     // Renders on timeline are triggered by its children so it needs to be set after rendering the children
     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 || tlIsRunningBackwards) && tl._currentTime >= tl.duration) {
       // Make sure the paused flag is false in case it has been skipped in the render function

package/dist/modules/core/styles.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - core - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @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.1
  * @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.1
  * @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.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */