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|