# vuenime

> A flexible Vue wrapper for Animejs

Latest version **1.0.3** (published 2019-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuenime
pnpm add vuenime
yarn add vuenime
bun add vuenime
```

## 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.3 |
| Published | 2019-09-16 |
| First published | 2019-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 21.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 34 |
| Author | Mikhail Panichev |
| Maintainers | denis-invader |
| Keywords | vue, vuejs, component, animation, SVG, animejs, anime |

## Links

- npm: https://www.npmjs.com/package/vuenime
- Repository: https://github.com/denisinvader/vuenime
- Issues: https://github.com/denisinvader/vuenime/issues
- npm.io page: https://npm.io/package/vuenime

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [animejs](https://npm.io/package/animejs.md) ^3.1.0

## 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.3 (latest) — 2019-09-16
- 1.0.2 — 2019-09-16
- 1.0.1 — 2019-09-16
- 1.0.0 — 2019-09-16
- 0.2.1 — 2019-09-09
- 0.2.0 — 2019-03-03
- 0.1.0 — 2019-02-24

## README

# Vuenime

A flexible [Vue](https://vuejs.org) wrapper for [Animejs](https://animejs.com)


```sh
npm install vuenime
# or
yarn add vuenime
```

[Storybook](https://denisinvader.github.io/vuenime/) | [CodeSandbox](https://codesandbox.io/u/denisinvader/sandboxes)

## Usage

In a component:

```vue
<template>
  <div>
    <p>
      <label for="countInput">Value:</label>
      <input
        id="countInput"
        v-model.lazy="count"
        type="number"
        min="0"
      >
    </p>

    <vuenime
      :value="count"
      duration="1500"
      v-slot="theCount"
    >
      <div>
        <code>Width: {{theCount}}px</code>
        <div
          :style="{
            backgroundColor: 'green',
            width: `${theCount}px`,
          }"
        />
      </div>
    </vuenime>
  </div>
</template>

<script>
import { Vuenime } from 'vuenime';

export default {
  components: { Vuenime },
  data () {
    return {
      count: 42,
    };
  },
};
</script>
```

Global registration:

```js
import Vue from 'vue';
import Vuenime from 'vuenime';

Vue.use(Vuenime);
```


## Props

|Name|Type|Required||
|:---|:---|---:|:---|
|`value`|`Number` \| `String` \| `Array` \| `Object`|yes|[The animation target](https://animejs.com/documentation/#JSobject)|
|`render`|`Function`|no|Render function.<br/>Use this prop to avoid scoped slots definition in JSX.|

### Animation parameters

Cover Anime [property](https://animejs.com/documentation/#duration) and [animation](https://animejs.com/documentation/#direction) parameters.

|Name|Type|Default|
|:---|:---|:---|
|`duration`|`Number`|`1000`|
|`delay`|`Number`|`0`|
|`endDelay`|`Number`|`0`|
|`easing`|`String`|`"easeOutElastic(1, .5)"`|
|`round`|`Number`|`0`|
|`direction`|`String`|`"normal"`|
|`loop`|`Number` \| `Boolean`|`false`|

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