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,