menu

Questions & Answers

Animation on scroll library overflowing problem

I'm using a library called animation on scroll (aos). Library has pretty cool and good looking animations. However, in my project it causes some overflowing issues on the html document. How can I fix this problem? The problem only occurs on sliding or fading from left animations. enter image description here

html document code with handlebars

{{#each projeler as |proje|}}

 <div class="container">

    {{#each projeler as |proje|}}

    <main>
      <article class="postcard dark orange">

        <a class="postcard__img_link" href="/projeler/{{proje.id}}">
          <img class="postcard__img" src="../images/randomForLibrary/{{proje.proje_resmi_url}}" alt="Image Title" />
        </a>

        <div class="postcard__text">
          <h1 class="postcard__title blue"><a href="/projeler/{{proje.id}}">{{proje.proje_ismi}}</a></h1>
          <div class="postcard__subtitle small">
            <time>
              <i class="fa-regular fa-calendar-days"></i> <span class="date">{{proje.proje_eklenme_tarihi}}
            </time>
          </div>
          <div class="postcard__bar"></div>
          <div class="postcard__preview-txt">{{proje.proje_aciklamasi}}</div>
          <ul class="postcard__tagbox">
            <li class="tag__item"><i class="fa-solid fa-clover"></i> {{proje.proje_kategorisi}}</li>

            {{#ifCond proje.cito_adayi '==' 'Evet'}}

            <li class="tag__item"><i class="fa-solid fa-paperclip"></i>CITO ADAYI</li>
            {{/ifCond}}


            <li class="tag__item play orange">

              <span title="Profil Görüntüle" class="project_owner"><i class="fa-solid fa-user"></i><a
                  class="text-link" href="/profil/{{email}}">
                  {{proje.projeyi_ekleyen}}</a></span>

            </li>
          </ul>
        </div>
      </article>
    </main>


    {{/each}}


  </div>
Answers(1) :

OK, I fixed the issue. The overflow of the container element should be hidden on X axis. Which means .container{overflow-x:hidden}