v-aos

Vue plugin for AOS (animate on scroll library)

Using

1. Install

npm i v-aos --save

2. Plug-in

import Vue from 'vue'
import VAos from 'v-aos'

Vue.use(VAos);

With AOS init settings :

Vue.use(VAos, {
  startEvent: 'DOMContentLoaded',
  duration: 400,
  delay: 100
})

3. Use in your components

<template>
  <div v-aos:fade-up>Hello world</div>
</template>

List of available animations

With flags:

<template>
  <div v-aos:fade-up.once>Hello world</div>
</template>

With parameters:

<template>
  <div v-aos:fade-up="{ delay: 100, offset: 200 }">Hello world</div>
</template>

List of available options

4. Use with Nuxt

plugins/v-aos.js:

import Vue from 'vue'
import VAos from 'v-aos'

Vue.use(VAos);

nuxt.config.js:

plugins: [
  { src: '~/plugins/v-aos', mode: 'client' },
]

5. Access AOS object

AOS object can be accessed through $aos property in components or through window.AOS

export default {
  mounted() {
    this.$aos.refreshHard()
  }
}

6. AOS events

<div v-aos:fade-up @aos:in="handleAosIn"></div>

List of available events

License

MIT