AOS

To use AOS (animation on scroll) in Astro projects, do the following:

First, install the package:

npm install aos --save

If not exist, create the folder src/components/utils/
Create a component AOSInit.jsx with the following content: (and yes, this module its in javascript, not typescript, because AOS don’t have a typescript version)

import { useEffect } from 'react'
import AOS from "aos"
import "aos/dist/aos.css"

export default function AOSInit() {
  // Start AOS when component mounts
  useEffect(() => {

    // Start Aos
    AOS.init({
      duration: 1000,
      delay: window.innerWidth < 768 ? 0 : 100,
      once: true,
    })

  }, [])

  return null
}

Apply the AOS init component to src/layouts/Layout.astro

---
...

// Utils
import AOSInit from '../components/utils/AOSInit'
---

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <!-- Start aos -->
    <AOSInit client:load />

    ...
  </body>
</html>

Learn more about the Layout in Layout

Use AOS in any component like in the AOS Docs