How to Revert Animations and Clean Up Inline Styles in Anime.js

Anime.js provides a revert() method that restores original inline styles by pausing animations and invoking cleanInlineStyles() to remove all modifications from the DOM.

Anime.js is a lightweight JavaScript animation library that modifies element CSS through inline styles. When you need to revert animations and clean up inline styles, the library offers built-in mechanisms to return the DOM to its exact pre-animation state without leaving stray attributes or transform fragments.

How Anime.js Caches and Restores Original Styles

Before modifying any element, Anime.js stores every value it writes in an internal inline‑style cache (inlineStylesStore). When you call revert(), the library executes a specific restoration sequence defined in src/core/styles.js:

1. Pauses the animation timer to stop further frame rendering.
2. Iterates through every tween and retrieves the original value present before the animation started using getOriginalAnimatableValue.
3. Restores those values to the element’s style object, removing the property entirely if no prior inline style existed.
4. For transform tweens, rebuilds the full transform string from cached fragments or removes the property when empty.
5. Removes empty style attributes if the animation was the last one touching that target.

The heavy lifting is performed by cleanInlineStyles() in src/core/styles.js, which is invoked by the revert() methods of several core classes.

Revert Implementation Across Core Classes

Different Anime.js classes implement revert() to handle their specific cleanup needs according to the source code:

• JSAnimation (src/animation/animation.js): The base animation class calls super.revert() then returns cleanInlineStyles(this) to restore all modified elements.
• Timer (src/timer/timer.js): Cancels the active timer and calls scroller.revert() if a scroll-linked animation exists.
• Timeline (src/timeline/timeline.js): Cascades the revert operation by calling super.revert() then iterating through all child animations with child.revert().
• Scope (src/scope/scope.js): Collects all registered revertibles and runs them sequentially before clearing the internal lists.
• Layout (src/layout/layout.js): Restores saved layout snapshots and calls oldState.revert() and newState.revert() to clean up layout-related modifications.
• Draggable (src/draggable/draggable.js): Cleans up multiple style groups including targetStyles and triggerStyles to remove all interactive element modifications.

Code Examples for Reverting Animations

Reverting a Single Animation

const anim = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  easing: 'easeOutQuad'
});

// Later - restore original state
anim.revert();

This triggers cleanInlineStyles(anim) in src/core/styles.js, returning the element to its original position and removing the inline style attribute if no other styles remain.

Reverting a Timeline

const tl = anime.timeline({ autoplay: false });

tl
  .add({ targets: '.circle', scale: 2 })
  .add({ targets: '.square', rotate: 180 }, '-=500');

tl.play();
// ...
tl.revert();

The timeline's revert() method in src/timeline/timeline.js walks through each child animation and invokes individual revert operations, handling overlapping animations correctly.

Batch Reverting with Scope

const scope = anime.scope();

scope.add(anime({ targets: '#a', opacity: 0.5 }));
scope.add(anime({ targets: '#b', translateY: 100 }));

// Revert all at once
scope.revert();

Scope maintains internal lists of revertibles and revert constructors that are cleared after execution, as implemented in src/scope/scope.js. This allows you to manage multiple animations without tracking individual references.

Manual Style Cleanup (Advanced)

import { cleanInlineStyles } from 'animejs/src/core/styles.js';

const anim = anime({ targets: '#elem', rotate: 45 });
cleanInlineStyles(anim);

This internal API immediately restores original inline styles without affecting the animation object itself. For production code, prefer the public animation.revert() method, which handles the full lifecycle including pausing and state management.

Summary

• Anime.js caches original inline styles before modifying elements through the inlineStylesStore mechanism.
• Calling revert() on any animation, timeline, or scope pauses the instance and restores original values via cleanInlineStyles() in src/core/styles.js.
• Transform properties are rebuilt from cached fragments or removed entirely when no transforms remain.
• The DOM is left exactly as it was before animation started, with empty style attributes removed automatically.
• Scope objects allow batch reversion of multiple animations with a single method call.

Frequently Asked Questions

What happens to inline styles when I call revert()?

Anime.js restores the original values it cached before the animation began. If an element had no prior inline style for a property, that property is removed entirely from the element's style object. If the animation was the last one modifying the target, the entire empty style attribute is removed from the DOM element according to the logic in src/core/styles.js.

Can I revert a timeline with overlapping animations?

Yes. The timeline's revert() method in src/timeline/timeline.js iterates through all child animations regardless of overlap or timing offsets. Each child animation runs its own cleanInlineStyles() routine, ensuring all targets return to their original states simultaneously without visual artifacts.

Is revert() the same as pause() or reset()?

No. While pause() stops the animation at its current progress and reset() returns the animation to its beginning frame, revert() specifically targets style cleanup. It pauses the animation and then removes all inline styles introduced by the animation, effectively erasing any visual changes from the DOM rather than just stopping or rewinding them.

How do I clean up styles without keeping the animation reference?

Use a Scope. Create a scope with anime.scope(), add animations to it using scope.add(), and call scope.revert() later. This allows you to revert animations and clean up inline styles even if you don't maintain individual references to each animation object, as the scope tracks all registered revertibles internally in src/scope/scope.js.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}