title: Play animation when content get into view
body: <p>I've been searching on many posts but almost all of them are confusing.</p>
  
  <p>I'm working with animate.css into a  which is at the middle of my page.
  For default the animation is played when the page is loaded, but i want that it play when i reach the  (when i'm scrolling).</p>
  
  <p>Please, don't say about JS Reveal, i'd like to use the animation from animate.css</p>
  
  <p>What i was trying:
  HTML</p>
  
  <pre><code>&lt;!-- Others div above --&gt;
  
  &lt;div class="row sf-medida" id="sf-medida" onscroll="Animar();"&gt;
  &lt;!-- Others div below --&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>  function Animar() {
  setTimeout(function(){
     document.getElementById("sf-medida").style.visibility = "visible";
     $("#titulo-general").addClass("animated fadeInLeft");
     $(".sub-titulo").addClass("animated bounceInRight");
  
    $(".titulo-izquierda").addClass("animated swing");
    $(".texto-1").addClass("animated fadeIn");
    $(".texto-2").addClass("animated fadeIn");
  
  },1000)
  </code></pre>
  
  <p>}  </p>
  
  <p>But it doesn't work, however, i've tried adding</p>
  
  <pre><code>window.addEventListener("scroll", Animar);
  </code></pre>
  
  <p>But what it does is that the animation is played whenever i scroll on the page,</p>