# vue-number-animation
> Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x.
Latest version **2.0.2** (published 2023-12-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-number-animation
pnpm add vue-number-animation
yarn add vue-number-animation
bun add vue-number-animation
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.2 |
| Published | 2023-12-04 |
| First published | 2018-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 69.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 76 |
| Author | Nikos Koikas |
| Maintainers | nkoik |
| Keywords | vue, vuejs, vue2, vue3, vue-demi, animation, number, animate number, animated number, vue animated, vue number, vue animation, vue counter, counter reverse, vue animated counter |
## Links
- npm: https://www.npmjs.com/package/vue-number-animation
- Repository: https://github.com/nkoik/vue-animated-number
- Issues: https://github.com/nkoik/vue-animated-number/issues
- npm.io page: https://npm.io/package/vue-number-animation
## Dependencies (2)
- [animejs](https://npm.io/package/animejs.md) ^3.2.2
- [vue-demi](https://npm.io/package/vue-demi.md) ^0.11.4
## Alternatives
- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads
## Recent versions
- 2.0.2 (latest) — 2023-12-04
- 2.0.0 — 2023-12-03
- 1.1.2 — 2022-03-30
- 1.1.1 — 2021-07-16
- 1.1.0 — 2021-07-16
- 1.0.5 — 2018-07-15
- 1.0.4 — 2018-07-11
- 1.0.3 — 2018-07-10
- 1.0.2 — 2018-07-10
- 1.0.1 — 2018-07-10
- 1.0.0 — 2018-07-10
## README
# Animated Number Vue 3 & 2
  
Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x. This plugin provides animated transitions for numeric values, enhancing the visual appeal of numerical data in Vue.js applications.
## Key Features:
>- Vue 3 & 2 (with animejs) is supported in version 2.x.x.   [](https://www.npmjs.com/package/vue-number-animation)
>- Vue 2 (with gsap) is supported in version 1.x.x.  
## Demo:
Explore the demo for version 1.x.x [here](https://codesandbox.io/s/8256nwlq78).
## Installation:
To integrate the Animated Number Vue plugin into your project, follow the installation steps below.
```bash
npm install vue-number-animation
```
For Vue versions <=2.6 and vue-number-animation@2.x.x, ensure you also install `@vue/composition-api`.
## Usage:
Register the Animated Number component in your Vue application as demonstrated in the code snippet below:
```javascript
// For version 2.x.x - import the component as usual
import NumberAnimation from "vue-number-animation";
// For version 1.x.x
import Vue from "vue";
import VueNumber from "vue-number-animation";
Vue.use(VueNumber);
```
In your Vue file, utilize the Animated Number component:
```javascript
// For version 2.x.x
// For version 1.x.x
```
## API:
| **Property** | **Description** | **Type** | **Default** |
| ----------------- | ------------------- | -------- | ----------- |
| to | Animation end point | number | 100 |
| tag | Element wrapper | string | 'span' |
| from | Animation start point | number | 0 |
| duration | Duration of the animation (seconds) | number | 1 |
| delay | Amount of delay (seconds) before the animation starts | number | 0 |
| easing | Ease of the animation | string | 'linear' (for version 2.x.x) / 'Power1.easeOut' (for version 1.x.x) |
| autoplay (for version 2.x.x) / animationPaused (for version 1.x.x) | Pauses animation at starting point | boolean | true (for version 2.x.x) / false (for version 1.x.x) |
#### Easing:
- For version 2.x.x: Choose from various eases to control the rate of change during the animation. Refer to [animejs documentation](https://animejs.com/documentation/#linearEasing).
- For version 1.x.x: Choose from various eases to control the rate of change during the animation. Refer to [GreenSock Easing documentation](https://greensock.com/docs/Easing). Don't forget the '.' between ease name, e.g., `Circ.easeInOut`.
#### Events:
| **Event** | **Description** |
| --------- | -------------------------------------------------------------------------------------- |
| start | Called when the animation has started |
| complete | Called when the animation has completed |
| update | Called every time the animation updates (on every frame while the animation is active) |
#### Methods:
| **Method** | **Description** |
| ---------- | ------------------------------------------------------ |
| play | Starts the animation |
| pause | Pauses the animation |
| restart | Restarts and begins playing forward from the beginning |
[](https://github.com/nkoik/vue-animated-number/blob/master/LICENSE)
---
_Source: https://npm.io/package/vue-number-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._