vue-anime

Vue animation with timeline and grouping support using http://animejs.com/

Usage

``sh
npm install vue-anime
`

In vue file, first import
`javascript
import {VueAnime} from 'vue-anime'
import {VueAnimeGroup} from 'vue-anime'
import {VueAnimeTimeLine} from 'vue-anime'
export default {
name: 'app',
components: {
VueAnime,
VueAnimeGroup,
VueAnimeTimeLine
},
}

`

and then use in template

`vue

`

Vue-anime support all feature provided by animejs.

There are three element available for use:
1. vue-anime: a single animation element
2. vue-anime-group: a group of elements that share the same animation properties
3. vue-anime-timeline: multiple elements that run animation by orders

Props

$3

Type: Object

The animation to transitions or css properties with numeric values

CSS: opacity, backgroundColor, fontSize ...
Transforms: translateX, rotate, scale ...

Initial css properties should be written as inline-css

`vue

`

$3

Type: Number or Function

$3

Type: Number or Function

$3

Type: Number or Array

| Types | Examples | Infos |
| ------- | -------------------- | -------------------------------------------------- |
| String | 'easeOutExpo' | Built in function names |
| Array | [.91,-0.54,.29,1.56] | Custom Bézier curve coordinates ([x1, y1, x2, y2]) |

| easeIn | easeOut | easeInOut |
| ------------- | -------------- | ---------------- |
| easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic |
| easeInQuart | easeOutQuart | easeInOutQuart |
| easeInQuint | easeOutQuint | easeInOutQuint |
| easeInSine | easeOutSine | easeInOutSine |
| easeInExpo | easeOutExpo | easeInOutExpo |
| easeInCirc | easeOutCirc | easeInOutCirc |
| easeInBack | easeOutBack | easeInOutBack |
| easeInElastic | easeOutElastic | easeInOutElastic |

$3

Elasticity of Elastic easings can be configured with the elasticity parameters

$3

Type: String
One of 'normal', 'reverse', 'alternate'

$3

Type: Boolean
Default: false

$3

Type: Boolean
Default: false

$3

Type: Number
Animations or timelines current time.

$3

Type： Object

set animation target to object and specify property to change by object-props

`html
:object="objectAnimeData"
easing="linear"
:playing="false"
:object-props="{
prop1: 50,
prop2: '100%',
round: 1
}">
{{objectAnimeData.prop1}} / {{objectAnimeData.prop2}}

`

$3

Defines starting time relative to the previous animations duration.
`html



``

Methods

$3

On changing the vue :style property, reset() should be called to take effects

Example

$3

Adding vue-anime to one group and share the same animation
`vue





`

$3

Animate any css properties (not only translate)
`vue

`

$3

Set object and property
`vue

{{objectAnimeData.prop1}} / {{objectAnimeData.prop2}}

`

$3

Animate svg points

`vue
points="64 69.32121174760113 8.574 99.95409624342311 62.81629226727815 67.27053849133411 64 3.9540962434231046 65.18370773272186 67.27053849133411 119.426 99.95409624342311 "
fill="currentColor" :animate="{
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
}">

`

$3

`vue


`

$3

`vue



`

$3

`vue


`

$3

`vue



`

$3

`vue



`

$3

`vue





`

$3

`vue






``