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

2.6k Views Asked by Jack Scott At 05 April 2025 at 06:38

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

Original Q&A

There are 1 best solutions below

Cyrus On 05 June 2020 at 16:27 BEST ANSWER

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.

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in ANIMATE-ON-SCROLL

Trending Questions

Popular # Hahtags

Popular Questions