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

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/aos@2.3.1/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/aos@2.3.1/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.

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();
  });