How i fix parallax and reveal overflow?

Question

I'm creating landing page where a parallax effect is needed to reveal animations. The problem occurs because the overflow-x: hidden; of the parallax wrapper makes prevents the reveal animations from appearing. When that overflow is off, the animations work perfectly, but the parallax stops working.

    <div class="wrapper">
        <div class="parallax__group hero-container">
          <div class="parallax__layer bushes"></div>
          <div class="parallax__layer water"></div>
          <div class="parallax__layer people1"></div>
          <div class="parallax__layer people2"></div>
          <div class="parallax__layer people3"></div>
          <div class="parallax__layer hero-text">
            <div class="year-container">
              <h1>THE FUTURE IS HYBRID</h1>
            </div>
          </div>
        </div>
        <div class="container-fluid px-0">
          <div class="parallax__group info-container">
            <div class="text-container" style="text-align: center; display: inline; ">
              <h1 class="m-0" >¿Qué son los centros de coworking?</h1>
              <div class="row px-5" style="z-index: 8;">
                <div class="col-lg-4 offset-lg-1">
                  <p class="m-0">Espacios de colaboración que permiten a las personas tener flexibilidad para ser
                    productivos.</p></div>
                <div class="col-lg-2"></div>
                <div class="col-lg-4">
                  <p class="m-0"> Pueden ser un edificio, una casa o un piso que adapta sus espacios para renta por
                    horas.</p>
                </div>
              </div>
              <div class="row px-5">
                <div class="col-12">
                  <%= image_tag 'landing/home/home_principal.png', class: 'home-first-image', alt: 'home_principal' %>
                </div>
              </div>
              <div class="row px-5" style="z-index: 8;">
                <div class="col-lg-4 offset-lg-1">
                  <p>Espacios de colaboración que permiten a las personas tener flexibilidad para ser productivos.</p></div>
                <div class="col-lg-2"></div>
                <div class="col-lg-4">
                  <p> Pueden ser un edificio, una casa o un piso que adapta sus espacios para renta por horas.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="background-color: #FFFFFF;">
          <div class="container-fluid home-text pb-5">
            <div style="display: block; position: relative !important;">
              <h1 class="mt-5 px-5" data-aos="zoom-in-up" data-aos-delay="300" data-aos-duration="1000">¿Qué modalidades de
                espacio hay dentro de un centro de Coworking?</h1>
            </div>
          </div>

.wrapper {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
    perspective: 450px;
    background: #ffffff;
  }

Answer 1

Try put your image in css class like background-image.

.your_class{background-image: url(your_image.jpg);}