Vue animejs

A simple Vue plugin for binding Anime.js

Version: 2.1.1 Updated: 01/24/2019

By: BenAHammond License: MIT

Downloads Last 30 Days: 2.4k

Install

npm i vue-animejs
yarn add vue-animejs

Repository: https://github.com/BenAHammond/vue-anime

CDNs

bundle.run: https://bundle.run/vue-animejs

jsDelivr: https://cdn.jsdelivr.net/npm/vue-animejs

unpkg: https://unpkg.com/vue-animejs

Vue-Anime

Simple Vue bindings for Anime.js

Install

$ npm install --save vue-animejs
import VueAnime from 'vue-animejs';

Vue.use(VueAnime)

Usage

Adds a simple directive named v-anime that passes all arguments directly to anime.js

<div v-anime="{ rotate: '1turn', backgroundColor: '#FFF', duration: 2000, loop: true }"></div>

Also adds this.$anime to your components

export default {
  name: "my-component",
  data() {
    return {};
  },
  mounted() {
    const targets = this.$el;
    this
      .$anime
      .timeline()
      .add({
        targets,
        translateX: 250,
        easing: 'easeOutExpo',
      })
      .add({
        targets,
        translateX: 250,
        easing: 'easeOutExpo',
      });
      /* ... etc ... */
  },
}
Categories: Vue js