# anime v4.4.0

- Product: anime (https://whatsnew.fyi/product/anime)
- Vendor: juliangarnier
- Date: 2026-04-29
- Version: v4.4.0
- Original notes: https://github.com/juliangarnier/anime/releases/tag/v4.4.0
- Permalink: https://whatsnew.fyi/product/anime/releases/v4.4.0

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

---

- **changed** — Transforms now follow a fixed render order (perspective > translate > rotate > scale > skew) regardless of the order they are defined in animation parameters
- **removed** — matrix and matrix3d can no longer be animated directly
- **changed** — The third argument of function-based value callbacks changed from total (Number) to targets (Array)
- **added** — A fourth argument prevTween is now passed to function-based value callbacks, providing access to the previous sibling tween's computed end value
- **changed** — The stagger callback signature changed so the third argument is now the targets array instead of the total count
- **added** — New scrambleText() function-based value to animate text with a character-by-character scramble/reveal effect
- **added** — New grid: true auto-grid mode that computes a 2D layout from element positions or JS object coordinates
- **added** — The from parameter now accepts [x, y] normalized coordinate arrays (0 to 1) for precise grid origin control
- **added** — New priority parameter to control execution order within the engine tick loop
- **added** — Adjacent axis properties are now grouped into CSS shorthand for shorter transform strings
- **added** — Inline transform parsing rewritten to properly handle multi-argument CSS functions and nested calc() expressions
- **added** — createLayout() now accepts an id parameter
- **added** — globals is now exported from the main module entry point
- **added** — forEachChildren, addChild, removeChild helpers are now exported from utils
- **fixed** — revert() now restores object properties and DOM attributes to their original pre-animation values, in addition to CSS styles and transforms
- **fixed** — Fix getOriginalAnimatableValue not storing the original inline value for object properties and DOM attributes
- **fixed** — Fix chaining in keyframe arrays and timelines producing incorrect intermediate shapes in morphTo
- **fixed** — Fix accessing non-existent chainable methods throwing an error instead of returning undefined
- **fixed** — Fix splitText addEffect() returning undefined instead of this when the effect argument is not a function
- **fixed** — Fix scroll-controlled layout animations not properly calling onComplete and onPause callbacks
- **fixed** — Fix _startTime not being preserved when reconstructing tracked animations, causing timing jumps on effect refresh
- **removed** — DevTools integration (AnimeJSDevTools) removed
- **changed** — Render loop performance improved by extracting inline closures in tick() and render() to module-scope functions
- **changed** — Tween composition is now resolved before computing to/from/duration/delay values
- **changed** — Type annotation for splitText() and TextSplitter target parameter widened from HTMLElement to Element
- **changed** — Each tween now pre-computes and stores its end value at construction time

##### Breaking Changes

- **Transforms**
  - Transforms now follow a fixed render order (`perspective` > `translate` > `rotate` > `scale` > `skew`), regardless of the order they are defined in animation parameters:
    ```js
    // Before: scale rendered first because it was defined first
    animate(el, { scale: 2, translateX: 100 }) // → scale(2) translateX(100px)
    // After: order is always fixed
    animate(el, { scale: 2, translateX: 100 }) // → translate(100px, 0px) scale(2)
    ```
  - `matrix` and `matrix3d` can no longer be animated directly (they are still preserved when read from inline styles and can be set using transform: 'matrix(...)')
- **Function-based values**
  - The third argument of function-based value callbacks changed from `total` (Number) to `targets` (Array). To migrate, replace `total` with `targets.length`:
    ```js
    // Before
    translateX: (target, index, total) => total * 10
    // After
    translateX: (target, index, targets) => targets.length * 10
    ```
  - A fourth argument `prevTween` is now passed to function-based value callbacks, providing access to the previous sibling tween's computed end value for the same target and property.
- **Stagger**
  - The stagger callback signature changed to match function-based values: the third argument is now the `targets` array instead of the total count:
    ```js
    // Before
    delay: stagger(100, { use: (target, i, total) => total - i })
    // After
    delay: stagger(100, { use: (target, i, targets) => targets.length - i })
    ```

##### New Features

- **scrambleText**
  - New `scrambleText()` function-based value to animate text with a character-by-character scramble/reveal effect (learn more: https://animejs.com/documentation/text/scrambletext)
- **Stagger**
  - New `grid: true` auto-grid mode that computes a 2D layout from element positions or JS object coordinates (`{x, y}`) instead of requiring explicit `[columns, rows]` dimensions
  - The `from` parameter now accepts `[x, y]` normalized coordinate arrays (0 to 1) for precise grid origin control
- **Timer / Animation / Timeline**
  - New `priority` parameter to control execution order within the engine tick loop
- **Transforms**
  - Adjacent axis properties are now grouped into CSS shorthand for shorter transform strings:
    - `translateX` + `translateY` → `translate(x, y)`
    - `translateX` + `translateY` + `translateZ` → `translate3d(x, y, z)`
    - `scaleX` + `scaleY` → `scale(x, y)`
    - `scaleX` + `scaleY` + `scaleZ` → `scale3d(x, y, z)`
  - Inline transform parsing rewritten to properly handle multi-argument CSS functions (`translate(x, y)`, `scale3d(x, y, z)`) and nested `calc()` expressions
- **Layout**
  - `createLayout()` now accepts an `id` parameter
- **Exports**
  - `globals` is now exported from the main module entry point
  - `forEachChildren`, `addChild`, `removeChild` helpers are now exported from `utils`

##### Bug Fixes and improvements

- **JS Animation**
  - `revert()` now restores object properties and DOM attributes to their original pre-animation values, in addition to CSS styles and transforms (previously only CSS styles and transforms were reverted, leaving animated object props and attributes at their last animated value). The public `cleanInlineStyles()` utility keeps its original behavior and only clears inline styles and transforms.
  - Fix `getOriginalAnimatableValue` not storing the original inline value for object properties and DOM attributes, preventing proper revert
- **morphTo**
  - Fix chaining in keyframe arrays and timelines producing incorrect intermediate shapes
- **Chainable utils**
  - Fix accessing non-existent chainable methods throwing an error instead of returning `undefined`
- **splitText**
  - Fix `addEffect()` returning `undefined` instead of `this` when the effect argument is not a function
- **Layout**
  - Fix scroll-controlled layout animations not properly calli

_[Truncated at 4000 characters — full notes: https://github.com/juliangarnier/anime/releases/tag/v4.4.0]_