search

michalsnik / aos

Animate on scroll library
MIT License
26.51k stars 2.57k forks source link

Using AOS in Astro #815

Open ariley opened 1 year ago

ariley commented 1 year ago

Hi @michalsnik,

First, I got this working on a react-based site.

Now I'm building a new one with Astro. I have used npm to install AOS. I added the import command, and the init to the 'index.astro' page but it doesn't seem to want to do anything. Here's the site, if poking around helps: https://cheapfm.com/

Thank you!

burasuk commented 1 year ago

Try to add like this:

  1. Create file in src/js/main.js

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

  2. In src/layouts/Layout.astro

<!DOCTYPE html>
<html lang="pl">
  <head>
...
  </head>
  <body>
    <slot />

    <script src="../js/main"></script> <- add this
  </body>
</html>

Have fun.

andre-rd-rodrigues commented 1 year ago

In my case the animation works but only gets triggered once, and not when on view after scrolling. Any thoughts?

HighError commented 11 months ago

I have animation only after the first opening, then the elements appear without animation. After clearing the cache, the animations reappear until the page changes

HighError commented 11 months ago

Fix:

Willywes commented 11 months ago

in your principal layout in your head add

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

and before your closing body tag

<script is:inline src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script is:inline>
  AOS.init();
</script>
guttenbergovitz commented 11 months ago

@Willywes works like a charm. Thank you.

aam-himel commented 7 months ago

@Willywes thanks a lot! ❤