https://github.com/denisinvader/vuenime

A flexible Vue wrapper for Animejs
https://github.com/denisinvader/vuenime

animation animejs vuejs

Last synced: about 2 months ago
JSON representation

A flexible Vue wrapper for Animejs

• Host: GitHub
• URL: https://github.com/denisinvader/vuenime
• Owner: denisinvader
• License: mit
• Created: 2019-02-23T22:14:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:47:20.000Z (over 1 year ago)
• Last Synced: 2024-03-30T16:21:07.511Z (3 months ago)
• Topics: animation, animejs, vuejs
• Language: Vue
• Homepage: https://denisinvader.github.io/vuenime/
• Size: 3.16 MB
• Stars: 34
• Watchers: 1
• Forks: 4
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime
• awesome-vue - Vuenime - A flexible Vue wrapper for Animejs (UI Utilities [🔝](#readme))

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

  


    


      Value:

      

    


    

      


        Width: {{theCount}}px

        


      

    

  


import { Vuenime } from 'vuenime';

export default {

  components: { Vuenime },

  data () {

    return {

      count: 42,

    };

  },

};

```

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.
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`|