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

Question

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.

Answer 1

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