Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

Install

$ npm install --save vue-animejs

Import

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.

Examples:

Example 1:

export default {
  name: "my-component",
  data() {
    return {};
  },
  mounted() {
    this.$anime(/* ... animate something ... */)
  },
}

 

Example 2:

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 ... */
  },
}

Comments

Submitted by infoforwomen.be (not verified) on Sun, 09/27/2020 - 12:32 Permalink

Greetings from Florida! I'm bored at work so I decided to browse your site on my iphone during lunch break. I really like the knowledge you present here and can't wait to take a look when I get home. I'm shocked at how quick your blog loaded on my mobile .. I'm not even using WIFI, just 3G .. Anyways, excellent blog! flywh.infoforwomen.be/map5.php elise harritz nГёgen billeder
Add new comment

Restricted HTML

Riadh Rahmi

Senior Web Developer (Drupal & Laravel)

I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal and Laravel.

Web Posts

Search

Page Facebook