
Product
Announcing Socket Fix 2.0
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
@dcasia/vue-aos
Advanced tools
Implementing animation on scroll based on Vue 3
npm i @dcasia/vue-aos --save
// 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')
// app.vue
<AOS>
<div>
I'll be animated when you see me in the viewport
</div>
</AOS>
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 |
… | … | … |
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 |
...
FAQs
Implementing animation on scroll based on Vue 3
We found that @dcasia/vue-aos demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.