How to stop Animation on scrolling?

Question

When I scroll down my page three boxes appears on scrolling which is perfect. But when I scroll up my page those three boxes goes disappear and I will have to scroll down again for appearing those boxes. I just wanted to animate boxes only once, If I scroll up page, those boxes should not be disappear.

Link is here http://www.shahfahad.com/scrol/demo/scrol.html

Answer 1

set All boxes in on div

 <div class="aos-item" data-aos="fade-up"> <div class="aos-item" data-aos="fade-right"> <div class="aos-item__inner"><h3>42</h3></div> </div> <div class="aos-item" data-aos="fade-left"> <div class="aos-item__inner"><h3>42</h3></div> </div> <div class="aos-item" data-aos="fade-up"> <div class="aos-item__inner"><h3>1</h3></div> </div> </div>