Play animation when content get into view

I've been searching on many posts but almost all of them are confusing.

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).

Please, don't say about JS Reveal, i'd like to use the animation from animate.css

What i was trying: HTML

JS

  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)

}

But it doesn't work, however, i've tried adding

window.addEventListener("scroll", Animar);

But what it does is that the animation is played whenever i scroll on the page,