@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

    ...

    Install

    npm i @dcasia/vue-aos

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    1.44 MB

    Total Files

    10

    Last publish

    Collaborators

    • milewski
    • itsryanwu