Using aos in Astro

[ayemin-tun]

This is:

• Question

Detailed Description

"I use AOS in my Astro project, and it works fine, but it has an issue. For example, when I use AOS on the home page, the animations work correctly when the page is initially loaded, but they are too fast when navigating between pages. If I go to the about page and then return to the home page, the animations are too fast to see. Why is this happening? Please help or provide information to solve this issue. Do I need to install anything additional for AOS in my project?"

The way I install aos on my astro project

• in my src/js directory I add aos.js and it contain this code

import AOS from "aos";

export function aosInit() {
    AOS.init({ duration: 1000, easing: "ease-out-cubic", once: false, offset: 50 });
}

• in main layout I add this

<script>
    import { aosInit } from "@/js/aos";
    aosInit();
  </script>

[Boston343]

I'm not exactly sure why it happens (seems a CSS problem), but for me it only happens when you use view transitions. I'm currently working on my own animation setup using animejs with some logic taken from AOS for intersections. I plan to share it once done - it works with view transitions.

[joshuaiz]

You might need to import the css as well - I have it working in Astro with this:

<script>
    import AOS from 'aos'
    import 'aos/dist/aos.css'

    AOS.init()
</script>

[RayyanNafees]

u have to import css at the top in

---
---

section & in script tag import the js only

---
import 'aos/dist/aos.css'
---
<script>
    import AOS from 'aos'
    AOS.init()
</script>

...