https://github.com/mikhailsidorov/v-aos

Vue plugin for AOS (Animate on scroll) library
https://github.com/mikhailsidorov/v-aos

animate-on-scroll animation aos v-aos vue vue-plugins

Last synced: about 1 month ago
JSON representation

Vue plugin for AOS (Animate on scroll) library

• Host: GitHub
• URL: https://github.com/mikhailsidorov/v-aos
• Owner: mikhailsidorov
• License: mit
• Created: 2021-04-15T11:04:57.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-04-20T19:14:29.000Z (over 3 years ago)
• Last Synced: 2024-10-08T00:50:54.652Z (3 months ago)
• Topics: animate-on-scroll, animation, aos, v-aos, vue, vue-plugins
• Language: JavaScript
• Homepage:
• Size: 614 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-aos

Vue plugin for [AOS (animate on scroll library)](https://github.com/michalsnik/aos)

## Using

### 1. Unpkg

```html

```

### 2. Package manager

```bash

npm i v-aos --save

```

### 3. Plug-in

```js

import Vue from 'vue'

import VAos from 'v-aos'

Vue.use(VAos);

```

With AOS init settings :

```js

Vue.use(VAos, {

  startEvent: 'DOMContentLoaded',

  duration: 400,

  delay: 100

})

```

### 4. Use in your components

```html

  
Hello world


```

[List of available animations](https://github.com/michalsnik/aos#animations)

With flags:

```html

  
Hello world


```

With parameters:

```html

  
Hello world


```

[List of available options](https://github.com/michalsnik/aos#1-initialize-aos)

### 5. Use with Nuxt

plugins/v-aos.js:

```js

import Vue from 'vue'

import VAos from 'v-aos'

Vue.use(VAos);

```

nuxt.config.js:

```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

```js

export default {

  mounted() {

    this.$nextTick(() => this.$aos.refreshHard())

  }

}

```

### 7. AOS events

```html



```


[List of available events](https://github.com/michalsnik/aos#js-events)

## License

MIT