I’m trying to add some AOS animations to my website to add some visual flair, but when I add the data-aos attributes to div tags that are located at the top of the page, instead of playing an entrance animation and staying on screen, the text starts on screen and plays the exit animation with the text staying gone afterward.

It also seems like it isn’t registering my scroll location either, as adding data-aos attributes to a text div that’s off screen doesn’t result in it playing the entrance animation. The text div starts blank and never appears, even when refreshing the page while the div is on screen.

I’ve followed the README in the repo, so I know that my div tag should look something like this in the context of my page:

<div class="grid-left-text" data-aos="fade-up">

and my script something like this:

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

Making changes to the parameters within the div tag like adding the anchor-placement and the duration attributes don’t change anything either.

Adding things like parameters in AOS.init() and implementing AOS.refresh() have also proven to not work.

To me it seems like it’s an issue with how the AOS.js file in the library is interpreting my “location” on the website, like it can’t figure out where it’s supposed to be.

Would having the div tags within a mat-grid-list or mat-grid-tile affect how AOS.js perceives the div elements in regard to location?