CODEWITHSUNDEEP
htmljquerycsscss-animationsaos.js
user16953799
user16953799

Reputation:

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>

Upvotes: 0

Views: 4320

Answers (2)

sadunna
sadunna

Reputation: 41

Try to initialize AOS when window is loaded

window.addEventListener('load', () => { AOS.init(); });

https://github.com/michalsnik/aos/issues/624

Upvotes: 0

ayan majumder
ayan majumder

Reputation: 61

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

Upvotes: 3

Related Questions