New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue-number-animation

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-number-animation

Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x.

  • 2.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.5K
decreased by-8.78%
Maintainers
1
Weekly downloads
 
Created
Source

Animated Number Vue 3 & 2

npm icon icon

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.

icon

Key Features:

  • Vue 3 & 2 (with animejs) is supported in version 2.x.x. icon icon npm
  • Vue 2 (with gsap) is supported in version 1.x.x. icon Static Badge

Demo:

Explore the demo for version 1.x.x here.

Installation:

To integrate the Animated Number Vue plugin into your project, follow the installation steps below.

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:

// 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:

// For version 2.x.x
<NumberAnimation
    ref="number1"
	:from="100"
	:to="10000"
	:format="theFormat"
	:duration="5"
	autoplay
    easing="linear"
/>

// For version 1.x.x
<number
    tag="div"
    animationPaused
    ref="number2"
	:to="10000"
	:duration="5"
    easing="Back.easeIn"
    @complete="completed"
    @click="playAnimation"/>

API:

PropertyDescriptionTypeDefault
toAnimation end pointnumber100
tagElement wrapperstring'span'
fromAnimation start pointnumber0
durationDuration of the animation (seconds)number1
delayAmount of delay (seconds) before the animation startsnumber0
easingEase of the animationstring'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 pointbooleantrue (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.

  • For version 1.x.x: Choose from various eases to control the rate of change during the animation. Refer to GreenSock Easing documentation. Don't forget the '.' between ease name, e.g., Circ.easeInOut.

Events:
EventDescription
startCalled when the animation has started
completeCalled when the animation has completed
updateCalled every time the animation updates (on every frame while the animation is active)
Methods:
MethodDescription
playStarts the animation
pausePauses the animation
restartRestarts and begins playing forward from the beginning

GitHub license

Keywords

FAQs

Package last updated on 04 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc