AOS (animate-on-scroll) elements invisible on static site

Question

I'm making a site for a client and trying to implement AOS library to make it look more dynamic. I've followed instructions from the GitHub :

Add to <head>

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

Add before </body>

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

No luck. I've applied data-aos="fade-in" to a div in the Services section of this site (it should be obvious with the missing box) and it doesn't display at all for me.

Can anyone help?

Thank you,

Jack

score 2 · Accepted Answer · answered Jun 05 '20 at 16:27

2

I've looked at the site and I think it has something to do with this css:

html, body {
    overflow: hidden;
    overflow-y: scroll;
}

This also caused a double scrollbar for me, you should remove those two lines.

answered Jun 05 '20 at 16:27

Cyrus

110
6

That fixed it, thanks so much. Do you know why this causes the issue? – Jack Scott Jun 05 '20 at 16:34

AOS (animate-on-scroll) elements invisible on static site

1 Answers1