スクロールで表示領域に入ったらアニメーションを実行したい

Question

Webサイトでよく見かける、表示領域に入ったら要素がふわっと出てくるアニメーションを実行したいです。
そこで、jQueryを使って試したのですが、表示領域前にアニメーションが実行されてしまいます。
表示領域内で、ページを再読み込みなどをしてみると確かにアニメーションは動いています。
下のコードのどこを改善すれば良いでしょうか？

jQuery　3.5.1バージョン

jQueryのコード
'use strict';

$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
let position = $(this).offset().top;
let scroll = $(window).scrollTop();
let windowHeight = $(window).height();
if (scroll > position - windowHeight + 200){
$(this).addClass('active');
}
});
});
});

アニメーションを実行したい要素(HTML)

コードの表示(ブロック)
 <div class="second">
   <img src="images/man.jpg" class ="fadein" rel="m-picture">
 </div>
``` <div id="second">
CSS
.fadein {
 opacity : 0;
 transform : translate(0, 100px);
 transition : all 1s;
}

.active {
 opacity : 1;
 transform : translate(0, 0);
}

Answer 1

inview.jsを利用して解決しました。