title: Animation diagonal divs using bootstrap 4 only when the div enters the viewport
body: <p>I would like to run an animation on 2 diagonal divs.
  The first one should appear from the right, the second one should appear from the left. I tried different solution found on internet since it's my first time doing animation, but nothing worked as expected.</p>
  
  <pre><code>&lt;section class="page-section h-100 text-center text-white" id="services" &gt;
      &lt;div class="container-fluid toLeft" id="slideInRight"&gt;
          &lt;div class="container"&gt;
              &lt;h1&gt;Sei in cerca di un PT?&lt;/h1&gt;
              &lt;p class="font-weight-light"&gt;Potrai entrare in contatto con il personal trainer perfetto per te. Inizia subito il tuo percorso verso il corpo dei tuoi sogni&lt;/p&gt;
              &lt;button id="signInAsUser" type="button" class="btn btn-dark loginService"&gt;Iscriviti come cliente&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="container-fluid toRight" id="slideInLeft"&gt;
          &lt;div class="container"&gt;
            &lt;h1&gt;Sei un PT in cerca di clienti?&lt;/h1&gt;
            &lt;p class="font-weight-light"&gt;Potrai offrire le tue conoscenze tecniche agli utenti, aiutandoli a raggiungere i propri obiettivi&lt;/p&gt;
            &lt;button id="signInAsPt" type="button" class="btn btn-danger loginService"&gt;Iscriviti come PT&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Demo: <a href="https://jsfiddle.net/4b6283m9/" rel="nofollow noreferrer">https://jsfiddle.net/4b6283m9/</a></p>
  
  <p>Animation code: </p>
  
  <pre><code>$('.toLeft').each( function (i)){
    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window &gt; bottom_of_object ){
       $(this).animate({'opacity':'1'},500);
    }
  }
  </code></pre>