v-aos

Vue plugin for AOS (animate on scroll library)

Using

1. Unpkg

<script src="https://unpkg.com/v-aos"></script>

2. Package manager

npm i v-aos --save

3. 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
})

4. 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

5. 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' },
]

6. Access AOS object

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

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

7. AOS events

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

List of available events

License

MIT