Skip to content

denisinvader/vuenime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Sep 16, 2019
17bce1b · Sep 16, 2019

History

73 Commits
Sep 16, 2019
Sep 16, 2019
Sep 16, 2019
Sep 9, 2019
Sep 9, 2019
Sep 9, 2019
Sep 16, 2019
Feb 23, 2019
Sep 16, 2019
Sep 9, 2019
Sep 16, 2019
Sep 9, 2019
Sep 9, 2019

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