I am using the pagepilling.js plugin and AOS for animation. I have to animate an image 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?
<div class="menu">
<span class="close-menu icon-cross2 right-boxed"></span>
<div class="menu-lang right-boxed">
<a href="" class="active">Eng</a>
<a href="">Fra</a>
<a href="">Ger</a>
</div>
<ul class="menu-list right-boxed">
<li data-menuanchor="page1">
<a href="#page1">Home</a>
</li>
<li data-menuanchor="page2">
<a href="#page2">Specialization</a>
</li>
<li data-menuanchor="page3">
<a href="#page3">Projects</a>
</li>
<li data-menuanchor="page4">
<a href="#page4">Services</a>
</li>
<li data-menuanchor="page6">
<a href="#page6">Reviews</a>
</li>
<li data-menuanchor="page7">
<a href="#page7">Contact</a>
</li>
</ul>
<div class="menu-footer right-boxed">
<div class="social-list">
<a href="" class="icon ion-social-twitter"></a>
<a href="" class="icon ion-social-facebook"></a>
<a href="" class="icon ion-social-googleplus"></a>
<a href="" class="icon ion-social-linkedin"></a>
<a href="" class="icon ion-social-dribbble-outline"></a>
</div>
<div class="copy">© Jonny 2017. All Rights Reseverd<br> Design by LoganCee</div>
</div>
</div>
<div class="pagepiling">
<div data-anchor="page1" class="pp-scrollable text-white section section-1">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-2.1-cave-man.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-2.2-brown-rectangle.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-3-text.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-4-ozaro.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-5-text.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-6-popup1.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-7-popup2.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-8-popup3.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-9--popup-img1.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-10--popup-img2.png);"></div>
<div class="section-bg" style="background-image:url(images/layer-11--popup-img3.png);"></div>
</div>
</div>
<div data-anchor="page2" class="pp-scrollable section section-2">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page2brownelipse.png);"></div>
<div class="section-bg" style="background-image:url(images/page2camera.png);"></div>
<div class="section-bg" style="background-image:url(images/page2adfilmmaking.png);"></div>
<div class="section-bg" style="background-image:url(images/page2logo.png);"></div>
<div class="section-bg" style="background-image:url(images/page2visual.png);"></div>
<div class="section-bg" style="background-image:url(images/page2production.png);"></div>
</div>
</div>
<div data-anchor="page3" class="pp-scrollable text-white section section-3">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page3animal.png);"></div>
<div class="section-bg" style="background-image:url(images/page3text.png);"></div>
<div class="section-bg" style="background-image:url(images/page3toptext.png);"></div>
<div class="section-bg" style="background-image:url(images/page3logo.png);"></div>
</div>
</div>
<div data-anchor="page4" class="pp-scrollable section section-4">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page4bg.png);"></div>
<div class="section-bg" style="background-image:url(images/page4graphics.png);"></div>
<div class="section-bg" style="background-image:url(images/page2logo.png);"></div>
<div class="section-bg" style="background-image:url(images/page4text.png);"></div>
</div>
</div>
<div data-anchor="page5" class="pp-scrollable text-white section section-6">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page5elipse.png);"></div>
<div class="section-bg" style="background-image:url(images/page5vector.png);"></div>
<div class="section-bg" style="background-image:url(images/page5web.png);"></div>
<div class="section-bg" style="background-image:url(images/page5text.png);"></div>
<div class="section-bg" style="background-image:url(images/page3logo.png);"></div>
</div>
</div>
<div data-anchor="page6" class="pp-scrollable section section-4">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page6bg.png);"></div>
<div class="section-bg" style="background-image:url(images/page6bg1.png);"></div>
<div class="section-bg" style="background-image:url(images/page6soundbox.png);"></div>
<div class="section-bg" style="background-image:url(images/page6text.png);"></div>
<div class="section-bg" style="background-image:url(images/page6online.png);"></div>
<div class="section-bg" style="background-image:url(images/page6icon.png);"></div>
<div class="section-bg" style="background-image:url(images/page6logo.png);"></div>
</div>
</div>
<div data-anchor="page7" class="pp-scrollable text-white section section-6">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page7bg.png);"></div>
<div class="section-bg" style="background-image:url(images/page7bg1.png);"></div>
<div class="section-bg" style="background-image:url(images/page7music.png);"></div>
<div class="section-bg" style="background-image:url(images/page7logo.png);"></div>
<div class="section-bg" style="background-image:url(images/page7text.png);"></div>
<div class="section-bg" style="background-image:url(images/page7rings.png);"></div>
</div>
</div>
<div data-anchor="page8" class="pp-scrollable section section-6">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/layer-1-background.png);"></div>
<div class="section-bg" style="background-image:url(images/page8bg.png);"></div>
<div class="section-bg" style="background-image:url(images/page8bg1.png);"></div>
<div class="section-bg" style="background-image:url(images/page8aboutus.png);"></div>
<div class="section-bg" style="background-image:url(images/page8logo.png);"></div>
<div class="section-bg" style="background-image:url(images/page8text.png);"></div>
<div class="section-bg" style="background-image:url(images/page8icon.png);"></div>
</div>
</div>
</div>
