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: 2 months 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 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-20T19:14:29.000Z (over 5 years ago)
- Last Synced: 2025-02-12T02:43:13.796Z (over 1 year 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