Skip to content

denisinvader/vuenime

Repository files navigation

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