title: How i fix parallax and reveal overflow?
body: <p>I'm creating landing page where a parallax effect is needed to reveal animations. The problem occurs because the <code>overflow-x: hidden;</code> 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.</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;wrapper&quot;&gt;
          &lt;div class=&quot;parallax__group hero-container&quot;&gt;
            &lt;div class=&quot;parallax__layer bushes&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;parallax__layer water&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;parallax__layer people1&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;parallax__layer people2&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;parallax__layer people3&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;parallax__layer hero-text&quot;&gt;
              &lt;div class=&quot;year-container&quot;&gt;
                &lt;h1&gt;THE FUTURE IS HYBRID&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;container-fluid px-0&quot;&gt;
            &lt;div class=&quot;parallax__group info-container&quot;&gt;
              &lt;div class=&quot;text-container&quot; style=&quot;text-align: center; display: inline; &quot;&gt;
                &lt;h1 class=&quot;m-0&quot; &gt;¿Qué son los centros de coworking?&lt;/h1&gt;
                &lt;div class=&quot;row px-5&quot; style=&quot;z-index: 8;&quot;&gt;
                  &lt;div class=&quot;col-lg-4 offset-lg-1&quot;&gt;
                    &lt;p class=&quot;m-0&quot;&gt;Espacios de colaboración que permiten a las personas tener flexibilidad para ser
                      productivos.&lt;/p&gt;&lt;/div&gt;
                  &lt;div class=&quot;col-lg-2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;col-lg-4&quot;&gt;
                    &lt;p class=&quot;m-0&quot;&gt; Pueden ser un edificio, una casa o un piso que adapta sus espacios para renta por
                      horas.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;row px-5&quot;&gt;
                  &lt;div class=&quot;col-12&quot;&gt;
                    &lt;%= image_tag 'landing/home/home_principal.png', class: 'home-first-image', alt: 'home_principal' %&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;row px-5&quot; style=&quot;z-index: 8;&quot;&gt;
                  &lt;div class=&quot;col-lg-4 offset-lg-1&quot;&gt;
                    &lt;p&gt;Espacios de colaboración que permiten a las personas tener flexibilidad para ser productivos.&lt;/p&gt;&lt;/div&gt;
                  &lt;div class=&quot;col-lg-2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;col-lg-4&quot;&gt;
                    &lt;p&gt; Pueden ser un edificio, una casa o un piso que adapta sus espacios para renta por horas.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div style=&quot;background-color: #FFFFFF;&quot;&gt;
            &lt;div class=&quot;container-fluid home-text pb-5&quot;&gt;
              &lt;div style=&quot;display: block; position: relative !important;&quot;&gt;
                &lt;h1 class=&quot;mt-5 px-5&quot; data-aos=&quot;zoom-in-up&quot; data-aos-delay=&quot;300&quot; data-aos-duration=&quot;1000&quot;&gt;¿Qué modalidades de
                  espacio hay dentro de un centro de Coworking?&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.wrapper {
      height: 100vh;
      width: 100vw;
      overflow-x: hidden;
      overflow-y: visible;
      perspective: 450px;
      background: #ffffff;
    }
  </code></pre>