Vue AOS

Implementing animation on scroll based on Vue 3

How to use

1. Install it from NPM

npm i @dcasia/vue-aos --save

2. Import and register it in your Vue entry file

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import VueAOS from '@dcasia/vue-aos'
import '@dcasia/vue-aos/dist/vue-aos.css'

createApp(App)
    .use(VueAOS, {
        disable: false,
        isBrowser: true,
        anchorPlacement: 'center-bottom',
        once: true,
        duration: 1000,
        easing: 'ease-out',
        offset: 0,
        startEvent: 'init-aos',
        disableMutationObserver: false
    })
    .mount('#app')

3. Feel free to use it in your Vue template

// app.vue

<AOS>
    <div>
        I'll be animated when you see me in the viewport
    </div>
</AOS>

Options

Global Options

Name	Type	Functionality
disable	Boolean	Whether to disable the effect globally
isBrowser	Boolean	Whether the current environment is a browser environment
anchorPlacement	….
once	Boolean	Whether only have elements fade in and without fading out
duration	Number	Animation duration
easing	…	Animation easing type
offset	Number	Distance from the trigger point, can be negative
startEvent	String	Name of the event dispatched on the document, that AOS should initialize on
disableMutationObserver	Boolean	Disables automatic mutations' detections
…	…	…

Component Options

Options for single instance

Name	Type	Functionality
type	String	Animation type
easing	String
duration	Number | String	Animation duration
offset	Number | String	Distance from the trigger point, can be negative
delay	Number | String	Animation delay
anchor	String	The name of the specified trigger anchor point
anchorPlacement	…	The position of the trigger point, taken from several key positions of the element and viewport
order	Number | String	The sequential animation order, it basically automatically calculate delay for current instance
step	Number | String	The Interval delay between different order
isGroup	Boolean	Whether to create a container element
tag	String	The tag name of the container
disableAnimation	Boolean	Disable animation on current instance but still can be triggered and emit key events
once	Boolean	Whether only have elements fade in and without fading out
persistentAttributes	Boolean	Whether to retain aos custom attributes and class names after animation is done
hiddenOnServer	Boolean	Whether to hide itself on server side rendering to make it hidden at the very first beginning when it’s showing on client side

API

...