aos

aos copied to clipboard

This is:

• Bug

Specifications

• Browser: Firefox, Chrome

Expected Behavior

Element loads when it gets scrolled to

Actual Behavior

Everything animates as soon as page loads. when I refresh page i see animation happen but it happens everywhere not just to elements that are in viewport

Steps to Reproduce the Problem

1. vue create test (vue 3 default config)
2. npm install aos
3. //main.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import AOS from "aos"; import "aos/dist/aos.css"; app.AOS = new AOS.init({ disable: "phone" }); app.mount('#app')
4. anything i write no matter where gets animated as soon as page loads

any solution ?

nice!😑

In main.js file, you need to use AOS as following :

import { createApp } from 'vue' import App from './App.vue' import AOS from "aos"; import "aos/dist/aos.css";

const app = createApp(App)

app.AOS = new AOS.init({ disable: "phone" });

app.use(AOS).mount('#app')