# inferno-animation

> Animation helpers inferno. This package can be used to reuse server side rendered html

Latest version **9.1.0** (published 2026-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install inferno-animation
pnpm add inferno-animation
yarn add inferno-animation
bun add inferno-animation
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.1.0 |
| Published | 2026-04-07 |
| First published | 2017-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 125.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16457 |
| Author | Sebastian Ware |
| Maintainers | jhsware, havunen |
| Keywords | babel, react, inferno, framework, interfaces, user interfaces, vdom, animation, css |

## Links

- npm: https://www.npmjs.com/package/inferno-animation
- Repository: https://github.com/infernojs/inferno
- Homepage: https://github.com/infernojs/inferno#readme
- Issues: https://github.com/infernojs/inferno/issues
- npm.io page: https://npm.io/package/inferno-animation

## Dependencies (1)

- [inferno](https://npm.io/package/inferno.md) 9.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 9.1.0 (latest) — 2026-04-07
- 9.0.12-alpha.1 (next) — 2026-04-06
- 9.0.11 — 2026-01-30
- 9.0.10 — 2025-12-21
- 9.0.9 — 2025-12-20
- 9.0.8 — 2025-12-19
- 9.0.7 — 2025-12-10
- 9.0.5 — 2025-11-24
- 9.0.4 — 2025-09-13
- 9.0.3 — 2025-03-01
- 9.0.2 — 2025-02-09
- 9.0.1 — 2025-01-25
- 9.0.0 — 2025-01-24
- 9.0.0-alpha.4 — 2025-01-23
- 9.0.0-alpha.3 — 2025-01-22
- … 66 more at https://npm.io/package/inferno-animation/versions

## README

# inferno-animation

Helper components and utils to add smooth CSS-animations to your Inferno apps. Extend from `<AnimatedComponent>` and include the css from index.css in this package to get default animation on opacity and height. Requires setting `box-sizing: border-box;` on the animated element.

If you want to customise your animations, just use index.css as a template and replace "inferno-animation" prefix in the CSS-class names with your custom animation name (i.e. mySuperAnimation). Then pass that name to your animated component as an attribute `<MyComponent animation="mySuperAnimation" />` and your customised animation will be used.

For examples of what animations look like you can try inferno/docs/animations/index.html.

## Install

```
npm install inferno-animation
```

## Usage

There are three base components you can extend from to get animations in a straightforward way without any wiring.

- AnimatedComponent -- animates on add/remove
- AnimatedMoveComponent -- animates on move (within the same parent)
- AnimatedAllComponent -- animates on add/remove and move (within the same parent)

You can also animate functional components. There are a couple of examples of animations in the main repos in the `docs/animations` and `docs/animations-demo` folder.

If you don't want to extend from one of the pre-wired components, look att src/AnimatedAllComponent.ts to see
how to wire up the three animation hooks:

- componentDidAppear
- componentWillDisappear
- componentWillMove

Using AnimatedAllComponent is just like working with ordinary components. Don't forget to
add the CSS or you can get strange results:

app.js

```js
import { Component } from 'inferno';
import { AnimatedAllComponent } from 'inferno-animation';
import './app.css';

// Animate on add/remove
class MyAnimated extends AnimatedAllComponent {
  render() {
    return <li className="test">{this.props.children}</li>;
  }
}

class MyList extends Component {
  constructor() {
    super();
    this.state = {
      items: [1, 2, 3, 4, 5],
    };
  }

  render() {
    return (
      <ul>
        {this.state.items.map((item) => (
          <MyAnimated animation="inferno-animation">{item}</MyAnimated>
        ))}
      </ul>
    );
  }
}
```

app.css

```css
@import '~inferno-animation/index.css';
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li.test {
  box-sizing: border-box;
  font-size: 2em;
  background: #ddd;
  border-bottom: 1px solid white;
}
```

The syntax for hooking up a function component is straight forward too:

```js
import {
  componentDidAppear,
  componentWillDisappear,
  componentWillMove,
} from 'inferno-animation';

<MyFuncComponent
  onComponentDidAppear={componentDidAppear}
  onComponentWillDisappear={componentWillDisappear}
  onComponentWillMove={componentWillMove}
>
  ...
</MyFuncComponent>;
```

IMPORTANT! Always use the provided helper methods instead of implementing the hooks yourself. There
might be optimisations and/or changes to how the animation hooks are implemented in future versions
of Inferno that you want to benefit from.

### Global animations

Global animations allow you to animate a component between positions on two different "pages". Technincally this means they don't have the same parent element. When you mount one page imediately after unmounting the other page, inferno-animation will perform a FLIP-animation between the two positions. To match the elements you use the attribute `globalAnimationKey` which accept a string.

Global animations are very simple to use, [check this example.](https://github.com/infernojs/inferno/blob/master/docs/animations-global-demo/app.js)

### Bootstrap style modal animation

This is an example of how you could implement a Bootstrap style Modal animation using inferno-animation. These two animations are used both for the backdrop and the modal and the purpose is to support the CSS-rules without modification.

- always use the inferno-animation utility functions
- implementation is straight forward
- `callback` in animateModalOnWillDisappear triggers the dom-removal in Inferno and is crucial!

Custom animations won't be coordinated with the standard animations to reduce reflow, but performance is not an issue with just a few animations running simultaneously. Use the standard animations for grid or list items.

Call these helper methods from `componentDidAppear` and `componentWillDisapper` of your backdrop and content component when you build a Bootstrap style modal.

```js
import { utils } from 'inferno-animation';
const {
  addClassName,
  removeClassName,
  registerTransitionListener,
  forceReflow,
  setDisplay,
} = utils;

export function animateModalOnWillDisappear(dom, callback, onClosed) {
  registerTransitionListener([dom], () => {
    // Always call the dom removal callback first!
    callback && callback();
    onClosed && onClosed();
  });

  setTimeout(() => {
    removeClassName(dom, 'show');
  }, 5);
}

export function animateModalOnDidAppear(dom, onOpened) {
  setDisplay(dom, 'none');
  addClassName(dom, 'fade');
  forceReflow(dom);
  setDisplay(dom, undefined);

  registerTransitionListener([dom, dom.children[0]], function () {
    // *** Cleanup ***
    setDisplay(dom, undefined);
    onOpened && onOpened(dom);
  });

  addClassName(dom, 'show');
}
```

---
_Source: https://npm.io/package/inferno-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._