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

> Master reverting animations and cleaning inline styles in Anime.js. Learn to restore original DOM states effortlessly with the revert() method. Maximize control over your animations.

- Repository: [Julian Garnier/anime](https://github.com/juliangarnier/anime)
- Tags: how-to-guide
- Published: 2026-03-04

---

**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`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/src/timer/timer.js)): Cancels the active timer and calls `scroller.revert()` if a scroll-linked animation exists.
- **Timeline** ([`src/timeline/timeline.js`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/src/scope/scope.js)): Collects all registered revertibles and runs them sequentially before clearing the internal lists.
- **Layout** ([`src/layout/layout.js`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/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

```js
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`](https://github.com/juliangarnier/anime/blob/main/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

```js
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`](https://github.com/juliangarnier/anime/blob/main/src/timeline/timeline.js) walks through each child animation and invokes individual revert operations, handling overlapping animations correctly.

### Batch Reverting with Scope

```js
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`](https://github.com/juliangarnier/anime/blob/main/src/scope/scope.js). This allows you to manage multiple animations without tracking individual references.

### Manual Style Cleanup (Advanced)

```js
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`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/src/core/styles.js).

### Can I revert a timeline with overlapping animations?

Yes. The timeline's `revert()` method in [`src/timeline/timeline.js`](https://github.com/juliangarnier/anime/blob/main/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`](https://github.com/juliangarnier/anime/blob/main/src/scope/scope.js).