AOS animations not working using Vite

[danielreales7]

I have a new project in Laravel that use Vite, if I install the package data-aos and add this:

import AOS from 'aos' import 'aos/dist/aos.css'

AOS.init({ easing: 'ease-out-quart', delay: 0, duration: 750 })

Animations not working but the DOM load correctly AOS.

In the layout I have: {{ vite src="resources/css/site.css|resources/js/site.js" }} but If I add CDNs manually animations works correctly.

I don't understand why.

This is:

• Bug

Specifications

• AOS version: ^2.3.4
• OS:
• Browser: Chroome

[webplusmultimedia]

Hi, This work for me (Laravel + vite)

import AOS from "aos";

document.addEventListener('DOMContentLoaded',(e)=>{
    AOS.init()
})

I have a new project in Laravel that use Vite, if I install the package data-aos and add this:

import AOS from 'aos' import 'aos/dist/aos.css'

AOS.init({ easing: 'ease-out-quart', delay: 0, duration: 750 })

Animations not working but the DOM load correctly AOS.

In the layout I have: {{ vite src="resources/css/site.css|resources/js/site.js" }} but If I add CDNs manually animations works correctly.

I don't understand why.

This is:

• Bug

Specifications

• AOS version: ^2.3.4
• OS:
• Browser: Chroome

[ignacio-dev]

I have the same issue.. document.addEventListener did not solve it

[webplusmultimedia]

I have the same issue.. document.addEventListener did not solve it

What is your config in your blade app file and vite.config.js ? Are you using this ? @vite(['resources/css/app.css', 'resources/js/app.js'])`

[alecStewart1]

We're experiencing some issues with AOS as well with Nuxt 3 and Vite. We have the following script tags in our applications app.vue:

<script setup>
  import AOS from 'aos';
</script>

<!-- some html here -->

<script>
export default {
  mounted() {
    AOS.init({
        once: true,
        disable: 'phone',
        duration: 700,
        easing: 'ease-out-cubic'
    });
  }
}
</script>

EDIT: Granted this seems to only be an issue on the more recent version of Firefox. Chromium and Safari work as intended.

[manusiakemos]

To use the AOS (Animate On Scroll) library with Laravel and Vite, you can follow these steps:

1. Install AOS via npm:

   npm install aos --save

2. In your Laravel project, open the resources/js/app.js file and import AOS:

   import AOS from 'aos';
   import 'aos/dist/aos.css';
   
   AOS.init();

3. In your Laravel Blade template file (e.g., resources/views/layouts/app.blade.php), add the necessary HTML markup and apply the AOS data attributes to the elements you want to animate. For example:

   <div data-aos="fade-up" data-aos-duration="1000">
    <!-- Your content here -->
   </div>

4. Compile your JavaScript using Vite. Run the following command from your Laravel project root directory:

   npm run dev

5. Make sure to include the compiled JavaScript file in your Blade template. Add the following script tag at the end of your template file:

   <script src="{{ mix('js/app.js') }}"></script>

6. Start your Laravel development server:

   php artisan serve

Now, AOS should be properly integrated into your Laravel application using Vite. The elements with the data-aos attribute will be animated based on the specified animation configuration.

Note: Ensure that you have Vite set up correctly in your Laravel project and that your JavaScript is being compiled and loaded properly.