README.md

Vuenime

A flexible Vue wrapper for Animejs

npm install vuenime
# or
yarn add vuenime

Storybook | CodeSandbox

Usage

In a component:

<template>
  <div>
    <p>
      <label for="countInput">Value:</label>
      <input
        id="countInput"
        v-model.lazy="count"
        type="number"
        min="0"
      >
    </p>

    <vuenime
      :value="count"
      duration="1500"
      v-slot="theCount"
    >
      <div>
        <code>Width: {{theCount}}px</code>
        <div
          :style="{
            backgroundColor: 'green',
            width: `${theCount}px`,
          }"
        />
      </div>
    </vuenime>
  </div>
</template>

<script>
import { Vuenime } from 'vuenime';

export default {
  components: { Vuenime },
  data () {
    return {
      count: 42,
    };
  },
};
</script>

Global registration:

import Vue from 'vue';
import Vuenime from 'vuenime';

Vue.use(Vuenime);

Props

Name	Type	Required
value	Number | String | Array | Object	yes	The animation target
render	Function	no	Render function. Use this prop to avoid scoped slots definition in JSX.

Animation parameters

Cover Anime property and animation 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