CODEWITHSUNDEEP
javascriptcssanimation
javascript2016
javascript2016

Reputation: 1013

CSS - AOS animate library - why is slide-in animation distroying my width of entire page?

I am using AOS library for animations. When I use the animation slide-left and slide-right, the width of the page becames wider that the body width, making the whole page look weird. I couldnt find any solution online and the only solution I figured out is if I give the elements which I apply the animation on a width in px (it cannot be bigger than 400px for whatever reason). However, that solution doesnt really work as it destroys up my css too. I have provided a js fiddle so you can see what I mean. Ive been spending hours on that so if anyone can help, I would be truly happy! Thanks!!

https://jsfiddle.net/Lca8n0ue/

code:

<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="container-fluid">
  <div class="row center-block wrapper">
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
  </div>
</div>

js:

AOS.init();

ONLY THING THAT HELPS BUT RUINS CSS IS:

.test{
  width: 400px;
}

.test2{
  width: 400px;
}

Upvotes: 3

Views: 2681

Answers (1)

Claudio Cortese
Claudio Cortese

Reputation: 1380

Although I'm not completely sure WHY is it so (I had the same problem a lot of time) there is another way to fix this.

Just set overflow-x: hidden on the parent element.

In your case this would be .container-fluid.

Upvotes: 6

Related Questions