【スクロールすると「ふわっと」スクロールするアニメーション】の実装ができません

前提・実現したいこと

<こちらでもマルチポストさせていただいております>
https://ja.stackoverflow.com/questions/73542/%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99%e3%82%8b%e3%81%a8-%e3%81%b5%e3%82%8f%e3%81%a3%e3%81%a8-%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99%e3%82%8b%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3-%e3%81%ae%e5%ae%9f%e8%a3%85%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%be%e3%81%9b%e3%82%93

LPを制作しています。初心者です。

【スクロールすると「ふわっと」スクロールするアニメーション】を実装しようとしましたが、
稼働しません。

発生している問題・エラーメッセージ

エラーメッセージ

⇒グーグルクロームの検証ツールにてConsoleを確認しましたが
エラーは表示されていません。(表示は以下の通りです。)
Some messages have been moved to the Issues panel.

エラーメッセージはありませんが、稼働しません。

該当のソースコード

【ＨＴＭＬ】
ソースコード:  
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" media="screen" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
    <script type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/app.js"></script>
    
</head>

<ul>
<li class="fadein scrollin">  
テキストが入ります。  
<p>テキストが入ります。<br><br>  
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。  
</p>  
<figure>  
    <img src="img/photo.jpg">  
    <figcaption>テキストが入ります。</figcaption>  
</figure>  
</li>  
</ul>

【CSS】
ソースコード:
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
        transition : all 500ms;
}

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

【jQuery】
ソースコード:
$(function(){
	$(window).scroll(function (){
		$('.fadein').each(function(){
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > elemPos - windowHeight + 200){
                        $(this).addClass('.scrollin');
      }
    });
  });
});