3

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.

Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
  • 1
    if you are using `fade-left` or `fade-right` with position absolute it creates problem in mobile screen devices and all content are loading ! – Nisharg Shah May 31 '19 at 14:15
  • Navbar issue fixed by changing `fade-left` to `fade-up`. Still the content is loading only after refreshing the page. –  May 31 '19 at 14:50

2 Answers2

0

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>
Xeross
  • 1
-1

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

gopinath krm
  • 69
  • 1
  • 8