vue-state-animation

vue-state-animation provides a capability to update Vue component's data value by requestAnimationFrame with a simple APIs that builds on d3-ease. The file size is just 4KB (minified).

This is the Vue.js version of react-state-animation by @tejitak https://github.com/tejitak/react-state-animation

Installation

npm install vue-state-animation --save
Include the module by CommonJS way
import VueAnimation from 'vue-state-animation' or var VueAnimation = require('vue-state-animation');

This will require ES5 modules converted by babel. ES6 sources are in /src and converted ES5 modules are located in /lib.

API

• linearIn(stateProp, endStateValue, duration)
• linearOut(stateProp, endStateValue, duration)
• linearInOut(stateProp, endStateValue, duration)
• quadIn(stateProp, endStateValue, duration)
• quadOut(stateProp, endStateValue, duration)
• quadInOut(stateProp, endStateValue, duration)
• cubicIn(stateProp, endStateValue, duration)
• cubicOut(stateProp, endStateValue, duration)
• cubicInOut(stateProp, endStateValue, duration)
• polyIn(stateProp, endStateValue, duration)
• polyOut(stateProp, endStateValue, duration)
• polyInOut(stateProp, endStateValue, duration)
• sinIn(stateProp, endStateValue, duration)
• sinOut(stateProp, endStateValue, duration)
• sinInOut(stateProp, endStateValue, duration)
• expIn(stateProp, endStateValue, duration)
• expOut(stateProp, endStateValue, duration)
• expInOut(stateProp, endStateValue, duration)
• circleIn(stateProp, endStateValue, duration)
• circleOut(stateProp, endStateValue, duration)
• circleInOut(stateProp, endStateValue, duration)
• bounceIn(stateProp, endStateValue, duration)
• bounceOut(stateProp, endStateValue, duration)
• bounceInOut(stateProp, endStateValue, duration)
• backIn(stateProp, endStateValue, duration)
• backOut(stateProp, endStateValue, duration)
• backInOut(stateProp, endStateValue, duration)
• elasticIn(stateProp, endStateValue, duration)
• elasticOut(stateProp, endStateValue, duration)
• elasticInOut(stateProp, endStateValue, duration)

The above API returns Promise, so you can chain additinal processes by using then.

Usage

import VueAnimation from 'vue-state-animation'
var animation = new VueAnimation(this/*your Component*/)
animation.linearIn('yourComponentProperty1', 350/*end value*/, 1000/*duration(ms)*/).then(() => animation.linearInOut('yourComponentProperty2', 0, 400))