# re-animator

> Simple animator using CSS3 animations

Latest version **1.0.5** (published 2015-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install re-animator
pnpm add re-animator
yarn add re-animator
bun add re-animator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2015-11-17 |
| First published | 2015-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mathieu ANCELIN |
| Maintainers | mathieuancelin |
| Keywords | CSS3, animation, simple |

## Links

- npm: https://www.npmjs.com/package/re-animator
- Homepage: https://github.com/mathieuancelin/re-animator
- npm.io page: https://npm.io/package/re-animator

## Dependencies (1)

- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.1.19

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2015-11-17
- 1.0.4 — 2015-11-15
- 1.0.3 — 2015-11-15
- 1.0.2 — 2015-11-13
- 1.0.1 — 2015-11-13
- 1.0.0 — 2015-11-13

## README

Re-Animator
----------------------


Re-Animator is a simple library to animation DOM nodes using CSS3 animations. The global namespace in non commonJS env is `ReAnimator`

The API is the following :

* `changeGlobalTimeout(value)` : change the global timeout after which animation are ended no matter what
* `hide(node: string, cssClass: string, timeout: int, callback: function)` : hides a dom node after animation end
* `show(node: string, cssClass: string, timeout: int, [display]: string, callback: function)` : shows a dom node after animation end
* `animate(node: string, cssClass: string, timeout: int, callback: function)` : animate a dom node
* `animateElement(node: string, cssClass: string, options: object)` : animate a dom node
* `animateElements(nodes: string, cssClass: string, options: object)` : animate dom nodes
* `transition(nodes: string, baseClass: string, options: object)` : add baseClass class to nodes and in the next tick add `${baseClass}-active` to trigger animation. Use options timeout to remove both classes.

`node` arguments can be string (querySelector) or HtmlElement.
`nodes` arguments can be string (querySelectorAll) or NodeList.
`cssClass` arguments can be string or array of string.

options on `animateElement` are :

* `before` : callback before the start of the animation
* `after`: callback after the end of the animation
* `timeout` : after the timeout, css class will be remove from the node even if the animation is not done or did not even happens.

options on `animateElements` are :

* `beforeAll` : callback before the start of the animation of every node
* `afterAll` : callback after the end of the animation of every node
* `beforeItem` : callback before the start of the animation of each node
* `afterItem` : callback after the end of the animation for each node
* `timeout` : after the timeout, css class will be remove from the nodes even if the animation is not done or did not even happens.

Example
========

```css
@keyframes loop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.loop {
  animation: loop 1s;
  animation-iteration-count: 5;
}
@keyframes fadeout {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
.fadeout {
  animation-name: fadeout;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}
@keyframes fadein {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
.fadein {
  animation-name: fadein;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}
@keyframes scale {
  0% {
    width: 50px;
  }
  100% {
    width: 100px;
  }
}
.scale {
  animation-name: scale;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}
```

```html
<div style="display: flex; flex-direction: column">
  <div style="padding: 50px 50px 50px 50px">
    <div id="part" style="width: 50px; height: 50px; background-color: blue"></div>
  </div>
  <div style="padding: 50px 50px 50px 50px; display: flex; flex-direction: column">
    <div class="parts" style="margin-bottom: 10px; width: 50px; height: 50px; background-color: red"></div>
    <div class="parts" style="margin-bottom: 10px; width: 50px; height: 50px; background-color: red"></div>
    <div class="parts" style="margin-bottom: 10px; width: 50px; height: 50px; background-color: red"></div>
  </div>
</div>
```

```javascript
ReAnimator.animateElement('#part', 'loop', { timeout: 6000 });

ReAnimator.animateElements('.parts', 'loop', { timeout: 6000 });

ReAnimator.hide('#part', 'fade-out', 1000, function() {
  console.log('done');
});

ReAnimator.show('#part', 'fade-in', 1000, function() {
  console.log('done');
});

ReAnimator.animate('#part', 'scale', 1000, function() {
  console.log('done');
});
```

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