AOS animation not working when section comes on screen

Question

I am using the fullview.js plugin and AOS for animation. I have to animate the text when my screens come on the viewport. I tried the below code, Animation is working only on the first section but when I scroll the animation not working with the other section

Would you help me out with this issue?

AOS.init();
$(document).ready(function() {

  $("#fullview").fullView({
    //Navigation
    navbar: "#navbar",
    dots: true,
    dotsPosition: 'right',

    //Scrolling
    easing: 'swing',
    // backToTop: true,

    // Accessibility
    keyboardScrolling: true,

    // Callback
    onViewChange: function(currentView) {
      // console.log(currentView)
    }
  })

});

#fullview>div {
  background-color: azure;
  padding: 200px 0;
  /* opacity: 0;
            transition: 0.2s ease-in all; */
}

#fullview>div.active {
  /* opacity: 1; */
}

#fullview>div:nth-child(even) {
  background-color: #282c34;
  color: #ffffff;
}

#fullview h2 {
  margin: auto;
  width: 50%;
  text-align: center;
}

#fullview p {
  text-align: center;
  margin-top: 15px;
}

#navbar {
  position: fixed;
  width: 100%;
  padding: 20px;
}

#navbar ul {
  list-style: none;
  text-align: center;
}

#navbar li {
  display: inline-block;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid gray;
  border-radius: 5px;
}

#navbar li a {
  text-decoration: none;
  color: black;
}

<link rel="stylesheet" href="https://www.jqueryscript.net/demo/full-view-scroll/fullview.css?v3">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<div id="navbar">
  <ul>
    <li><a href="#section1">
                    Section 1
                </a>
    </li>
    <li><a href="#section2">
                    Section 2
                </a>
    </li>
    <li><a href="#section3">
                    Section 3
                </a>
    </li>
    <li><a href="#section4">
                    Section 4
                </a>
    </li>
  </ul>
</div>

<div id="fullview">
  <div id="section1">
    <div data-aos="fade-up">
      <h2>jQuery FullView.Js Example</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section2">
    <div data-aos="fade-up">
      <h2>jQueryScript</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section3">
    <div data-aos="fade-up">
      <h2>Section 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section4">
    <div data-aos="fade-up">
      <h2>Section 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/full-view-scroll/fullview.js?v3"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

Answer 1

try to init() the AOS after document is ready:

$(document).ready(function() {
   
   AOS.init();
   
   $("#fullview").fullView({
     //Navigation
     navbar: "#navbar",
     dots: true,
     dotsPosition: 'right',
     //Scrolling
     easing: 'swing',
     // backToTop: true,
     // Accessibility
     keyboardScrolling: true,
     // Callback
     onViewChange: function(currentView) {
        // console.log(currentView)
     }
   })

});