Navbar goes out when I add animate on scroll feature

Question

I am trying to implement animate on scroll in my site here using AOS

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

JS

<script>
   AOS.init({
       duration: 1200,
   });
</script>

and used like

<div data-aos="fade-up">

But my navbar goes out in mobile version. See this And Some content not loading here, see this image.

Answer 1

Yes changing fade-left to fade-up fixed the problem, navbar is not working properly when fade-left is used

Answer 2

I fixed it with a simple overflow-x: hidden

<div class="row text-center no-gutters" style="overflow-x: hidden">
    <div class="col-12 col-md-4 aos-init aos-animate" data-aos="fade-right">...</div>
    <div class="col-12 col-md-4 aos-init aos-animate" data-aos="fade-up">...</div>
    <div class="col-12 col-md-4 aos-init aos-animate" data-aos="fade-left">...</div>
</div>