@dcasia/vue-aos

1.0.2 • Public • Published

Vue AOS

Implementing animation on scroll based on Vue 3

How to use

  1. Install it from NPM
npm i @dcasia/vue-aos --save
  1. 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')
  1. 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

...

Readme

Keywords

Package Sidebar

Install

npm i @dcasia/vue-aos

Weekly Downloads

24

Version

1.0.2

License

ISC

Unpacked Size

1.44 MB

Total Files

10

Last publish

Collaborators

  • ah-dc
  • milewski
  • itsryanwu