Search code examples
htmljquerycsscss-animationsaos.js

I'm using AOS library to give animation but it is not working on some div


This is my html header

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

this is my html

<div class="row justify-content-center aos-animate" >
   <div class="col-lg-6 text-center heading-section mb-5" data-aos="fade-up" >
    <h2 class="text-black mb-5">PHOTO GALLERY</h2>
    </div>
  </div>

This is my JS

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
  AOS.init({
    duration:1000,
    offset:5,
    delay:10,
  });
  AOS.refresh();
</script>

I tried to give animation to a photo gallery with 10 images and it is not working can any one give me the solution.

AOS.init({
  duration: 1000,
  offset: 5,
  delay: 10,
});
AOS.refresh();
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

<div class="row justify-content-center aos-animate">
  <div class="col-lg-6 text-center heading-section mb-5" data-aos="fade-up">
    <h2 class="text-black mb-5">PHOTO GALLERY</h2>
  </div>
</div>

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>


Solution

  • I faced a similar issue. Try triggering AOS.refresh() on scroll, see if that helps. This worked for me:

      let scrollRef = 0;
      $(window).on("resize scroll", function () {
        // increase value up to 10, then refresh AOS
        scrollRef <= 10 ? scrollRef++ : AOS.refresh();
      });