How Do I Simply Find Out If A Element Is In Viewport?

Question

I want to add a "lazy" animation for a section of a site, and have it fade back out of view when being scrolled past. Ive tried looking at quiet a few different options but nothing seems to stick. I also have a class with another subclass to save me css code in the long run since the site has several sections.

So far if I can figure out how to check viewport relative to this element and how to get a value to come back true when it is I can simply trigger a class to apply with the animation attached.

I have been throwing around some vanilla JS since im not every familiar with Jquery but here is the test div ive been trying to play with.

`  <div class="content">
 <h1>test </h1>
</div>
<div class="content one">
<h1>test 1</h1>
</div> `

So content is left alone and the specific .content.one is the one that has the class added.