@dcasia/vue-aos

Implementing animation on scroll based on Vue 3
766 5
vue scroll animation aos
Install
npm install @dcasia/vue-aos
Latest Version:1.0.2
Vue:3
License:ISC
Last Updated:Aug 17, 2021
Links: GitHub  ·  npm
Maintainer: ah-dc

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

...

Related Packages

@parallax-editor/parallax-engine

Vue 3 engine for immersive parallax sites driven by a JSON schema. Core library...

2,300 0
animation scroll vue immersive parallax schema vue3
easyscroll

this is a tiny scroll bar plugin for vue2.0

871 41
scroll vue
@sweberdev/sigmoid-vue

Vue 3 directives and composables for Sigmoid: v-reveal, v-parallax, useScrollPro...

190 0
animation scroll vue parallax reduced-motion reveal scroll-driven-animations spring vue3
vue-dragscroll

vue directive to make a scrollable element scroll by draging to the scroll direc...

1,541,547 264
scroll vue drag
@morev/vue-transitions

Shareable Vue transitions library

412,603 222
animation vue transition

Version History

Version Released Vue License
1.0.2 ^3.0.4 ISC
1.0.0 ^3.0.4 ISC