Astro.build and AOS

Animate on Scroll (AoS) and Astro.build work well together. Your code should look like this.

In your header section:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

And just before your closing body tag

<script is:inline src="https://unpkg.com/aos@next/dist/aos.js">&lt;/script>
<script is:inline>
  AOS.init();
</script>

Check the developer console to ensure you have no errors and it all should work.

That should be all you need. You can see it working on the landing pages for my projects linked on this blogs home page.

Now just use AOS as per the documentation,. If you are in deb mode you may need to reload the page to trigger the animations as some wont fire on a hot reload.